[UI Seriese] 04 Card

15166 ワード
CSS html UIUX JavaScript テキストリンク

緒論

  • Cardなに?
  • 小さなボックスに複数の情報を含むモジュール
  • ユーザーのエントリポイントとして、ユーザーがクリックできる各種コンテンツを一覧表示
  • カードの장점
  • カードは所定のスペースを利用する良い方法
  • 複数のコンテンツオプションを提供しようとすると、従来のリストスクロールオプションの代わりに選択できます
  • 文字だけに頼るよりも、視覚情報を利用してユーザに情報を伝えることができる

    • 本題


    実施形態

  • プライオリティカードを作る前に
  • 矩形カード構造では、まず内部にどのような情報が含まれているかを考える
  • 悩んだ後の情報はどのような仕組みでカード部分を配置・区切るべきか
  • カードの内部を分けて情報ごとに美化する
  • 今日の目標形態

    • 実装を試みる

  • まずはcard-body divを作成する.
  • 内部はcard-imgとcard-contentに大別される.
  • card-img divの幅に合わせて高さを調整します.
  • card-content部分
  • 優先title部分と以下の小要素に分けられる두 div
    • 入力
  • title.
  • 以下の小要素は価格とプラットフォームアイコンに分けられる두 div
  • card-content部分flexを適用後、行うjustify-content: flex-end;
  • アマウェイ方式はfloat: right;に取って代わることができる.
  • 確認結果は代替可能.
  • 他の要素をblockまたはinlineに置き換える必要があり、メンテナンスによくない場合があります.
  • 以降、各フォントのサイズを適宜調整する.

    • 完了コード

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Card</title>
  <style>
    .card-body {
      background-color: #000000;
      width: 320px;
      height: 210px;
      border-radius: 3px;
    }
    .card-img {
      width: 320px;
    }

    .game-title {
      font-size: 24px;
      margin: 0 30px;
    }

    span {
      margin: 0;
      color: white;
    }

    .flatfrom-icons {
      margin: 0 10px 0 20px;
    }
    .flatfrom-icons>i {
      color: white;
    }

    .small-content {
      font-size: 13px;
      display: flex;
      justify-content: flex-end;
    }

  </style>
  <script src="https://kit.fontawesome.com/af806c52f5.js" crossorigin="anonymous"></script>
</head>
<body>
  <div class="card-body">
    <img class="card-img" src="./04_card.assets/terraria.jpg" alt="">
    <div class="card-content">
      <span class="game-title">Terraria</span>
      <div class="small-content">
        <span>￦ 10,500</span>
        <div class="flatfrom-icons">
          <i class="fab fa-windows"></i>
          <i class="fab fa-apple"></i>
          <i class="fab fa-steam"></i>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

  • 後で完成しましたが、またやりたいことがありました.

  • カードにマウスを塗っている間に、ラベルを飛び出したいです.

  • どうしようかな.

  • javascriptで順番に時間を調整できますか?

  • 試してみる.
  • async-awaitを利用しようとしたが失敗した.
  • 以降Kkowasync-awaitとともにpromiseをマスター

  • 試してみる.

  • tagリストを読み込み、for文として処理します.
  • tagList[i].style.transitionDelay = i * 0.08 + 's';

  • 上記のコードを追加して、遅延を与えます.

  • 成功!

    • 最終結果



    n/a.結論


    新知


    • 大尉div上hover上に掛ける
      • 子divで使用animation-delayの場合、親div案を基準に移動可能です.
    • 順次移行する方法
      • style.TransitionDealy値をそれぞれ変更します.

    考えなければならないこと


    • async-await & Promise!!
    • 動画を遅らせる方法はありますか?
    • 今回は横の長いカード『ul』を作りました
    • 縦の長さで、ユーザーが簡単に情報を入手できるようにするには?
    • 今作っているものもユーザーにクリックしてもらう情報が入っていますか?
    • 正方形カードは?
      • カードの写真がなくても、今日悟った相対的な絶対戦法を使って、写真をもっとかっこよくすることができます.
    【1-2】辞書順の問題
    Linux