HTML と CSS は、画像、タイトル、テキストを含む六角形のグリッド レイアウトをどのように作成するのでしょうか?

の使用タグを使用すると、Web サイトに画像を表示できます。

• タグは順序なしリストを作成します。タグはリスト項目を定義します。 タグはハイパーリンクを定義します。

  CSS コードは、transform プロパティと skew プロパティを使用して六角形を作成します。 overflow: hidden プロパティは、六角形の外側にある画像の部分を非表示にするために使用されます。

  HTML コードでは、24 個の六角形が定義されており、それぞれに画像、タイトル、およびテキストの段落が含まれています。 CSS コードは、六角形とテキストのスタイルを設定します。

  HTML と CSS コードの内訳は次のとおりです。

  HTML

  <ウル>

  タグは順序なしリストを定義します。タグはリスト項目を定義します。

  タグはハイパーリンクを定義します。

  タグは画像を定義します。タグは見出しを定義します。

  タグは段落を定義します。

  CSS

  * セレクターはすべての要素を選択します。

  マージン: 0;パディング: 0;プロパティは、すべての要素からデフォルトのマージンとパディングを削除します。

  ボディ セレクターは、 を選択します。要素。

  背景: rgb(123, 158, 158);プロパティは、 の背景色を設定します。 element.

  #hexGrid セレクターは、ID「hexGrid」を持つ要素を選択します。

  オーバーフロー: 非表示;プロパティは、六角形の外側にある画像の部分を非表示にします。

  幅: 90%;プロパティは、#hexGrid 要素の幅を 90% に設定します。

  マージン: 0 auto;プロパティは #hexGrid 要素を中心に配置します。

  パディング:0.707% 0;プロパティは、#hexGrid 要素の上部と下部にパディングを追加します。

  #hexGrid:after セレクターは、#hexGrid 要素の後の疑似要素を選択します。

  内容: "";プロパティは、空の文字列を疑似要素に追加します。

  display: block;プロパティは、疑似要素の表示タイプをブロックに設定します。

  クリア: 両方。プロパティは、疑似要素が他の要素によってラップされるのを防ぎます。

  .hex セレクターは、クラス「hex」を持つすべての要素を選択します。

  位置: 相対;プロパティは、.hex 要素の位置タイプを相対に設定します。

  list-style-type: none;プロパティは、.hex 要素からデフォルトの箇条書きを削除します。

  浮動小数点: left;プロパティは、.hex 要素を左側にフロートします。

  オーバーフロー: hidden;プロパティは、六角形の外側にある画像の部分を非表示にします。

  可視性: 非表示。プロパティは .hex 要素を非表示にします。

  -webkit-transform:rotate(-60deg) skewY(30deg);プロパティは .hex 要素を -60 度回転させ、y 軸で 30 度傾けます。

  -ms-transform:rotate(-60deg) skewY(30deg);プロパティは、.hex 要素を -60 度回転し、y 軸で 30 度傾けます。

  変換:rotate(-60deg) skewY(30deg);プロパティは、.hex 要素を -60 度回転し、y 軸で 30 度傾けます。

  .hex * セレクターは、.hex 要素のすべての子要素を選択します。

  位置: 絶対;プロパティは、子要素の位置タイプを絶対に設定します。

  可視性: 可視。プロパティにより、子要素が表示されます。

  .hexIn セレクターは、クラス「hexIn」を持つすべての要素を選択します。

  display:block;プロパティは、.hexIn 要素の表示タイプをブロックに設定します。

  幅: 100%;プロパティは、.hexIn 要素の幅を 100% に設定します。

  高さ: 100%;プロパティは、.hexIn 要素の高さを 100% に設定します。

  text-align: center;プロパティは、テキストを .hexIn 要素の中央に配置します。

  色: #fff;プロパティは、.hexIn 要素のテキストの色を白に設定します。

  オーバーフロー: 非表示。プロパティは、六角形の外側にある画像の部分を非表示にします。

  -webkit-transform: skewY(-30deg)rotate(60deg);プロパティは、.hexIn 要素を Y 軸で -30 度傾斜させ、60 度回転します。

  -ms-transform: skewY(-30deg)rotate(60deg);プロパティは、.hexIn 要素を Y 軸で -30 度傾斜させ、60 度回転します。

  変換: skewY(-30deg)rotate(60deg);プロパティは、.hexIn 要素を Y 軸で -30 度傾け、60 度回転します。

  -webkit-backface-visibility: hidden;プロパティは、.hexIn 要素の背面を非表示にします。

  backface-visibility: hidden;プロパティは、.hexIn 要素の背面を非表示にします。

  HEX CONTENT

  .hex 画像セレクターはすべての画像を選択します

以上がHTML と CSS は、画像、タイトル、テキストを含む六角形のグリッド レイアウトをどのように作成するのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。