21.2.17

5270 ワード
CSS 上のコード WeCode TIL html テキストリンク
<学習によるcolor huntコンポーネントの作成>
  • 渋滞に悩む痕跡と知らない概念整理
  • 2 2つのdivバックグラウンドが重なる後中央揃え
    • div{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}
  • 苦悩:もともと2種類に分けられ、位置問題を解決しようとした
    • 解決
  • :div要素はいっそ並べ替えたと考えられる.変換コンセプトを使用します.
  • span値(シェーディングされたボックス内)を継承し、並べ替えます.
  • 悩み:位置を位置値に調整する.ただし、画面サイズに応じて個別に移動します.blockとinlineの設定はソリューションではありません.
    • 解決
  • :spanラベルをdivに挿入して継承します.バンドルの概念で解決する.
  • およびmouseoverにマウスを置く場合にのみ、
    • が表示されます.
    span{
  display: none;
  color:  #709fb0;

}

.colorBox span:hover{
  border : 1px solid #709fb0;
  background-color: #709fb0;
  color: white;
  opacity: 100%;

}
    悩み:マウスがカラーボックスのspanにぶら下がっているとき、白いフォントが現れるはずです.まずソートを完了し、サスペンションの使用を学習します.
    解決策:色反転と不透明値を使用して解決します.
  • flexプロパティのボタンとテキスト間隔(aside)
    • を使用します.
  • 悩み:コンテナ(共通分母)がなく、flex値を簡単に保存しただけで、結果はいつもボタンとテキストが真ん中に置かれた会議
  • 最初のソリューション:まず汎用Flexコンテナを大きなdivクラスに割り当て、次に間隔%に調整します.
    ヒント:
    • .flex-container{
　width:100%;
　-webkit-display:flex;
　display:flex;
　padding-bottom:20px;
　border:1px dotted #F60;
　}
    実行
    .btnday{
  width: 70%;
  -webkit-display : flex;
  display: flex;
  justify-content: space-around;
}
  • 質問:すべての人が正方形を離れました.
  • 二次解決:矩形内divを入れ、継承する.
    • .btnday{
  width: 120%;
  -webkit-display : flex;
  display: flex;
  justify-content: space-around;
  margin-top : 150px;
}
  • 第3の問題:中央に位置し、下がることができません.ボタン位置は底部
    • にある
  • ソリューション:margine-topを使用して調整
    • TIL 13 | JavaScript Operator
    [プログラマー]ハッシュ完走していない選手🏃🏿‍♀️🏃🏿‍♀️/Java