HTML 和 CSS 如何建立包含圖像、標題和文字的六邊形網格佈局？

使用 標籤可讓您在網站上顯示圖片。

標籤建立一個無序列表，並且
• 標籤定義一個清單項目。 標籤定義一個超連結。

  CSS 程式碼使用變換和傾斜屬性來建立六邊形形狀。 Overflow:hidden 屬性用於隱藏六邊形之外的影像部分。

  HTML 程式碼定義了 24 個六邊形，每個六邊形都有一個圖像、一個標題和一段文字。 CSS 程式碼設定六邊形形狀和文字的樣式。

  以下是HTML 和CSS 代碼的細分：

  HTML

  HTML

  ul>標籤定義一個無序列表。

• ;標籤定義一個列表項目。

  ;標籤定義一個超連結。

  標籤定義影像。

  標籤定義標題。

  ;標籤定義一個段落。

  CSS

  * 選擇器選擇所有元素。

  邊距：0；和填充：0；屬性刪除所有元素的預設邊距和填充。

  正文選擇器選擇

  元素。

  背景：rgb(123, 158, 158);屬性設定

  的背景顏色

  #hexGrid 選擇器選擇 id 為「hexGrid」的元素。

  溢出：隱藏；屬性隱藏影像中六邊形之外的部分。

  寬度：90%；屬性將 #hexGrid 元素的寬度設定為 90%。

  邊距：0 auto;屬性以 #hexGrid 元素為中心。

  填充：0.707% 0；屬性為 #hexGrid 元素的頂部和底部添加填充。

  #hexGrid:after 選擇器選擇 #hexGrid 元素後面的偽元素。

  內容： "";屬性為偽元素增加一個空字串。

  display: 區塊； property 設定偽元素的顯示類型為 block。

  clear: Both;屬性防止偽元素被其他元素包裹。

  .hex 選擇器選擇所有類別為「hex」的元素。

  位置：相對；property 將 .hex 元素的位置類型設為relative。

  list-style-type: none;屬性從 .hex 元素中刪除預設的項目符號點。

  float: left;屬性將 .hex 元素向左浮動。

  溢出：隱藏；屬性隱藏影像中六邊形之外的部分。 可見性：隱藏；屬性隱藏 .hex 元素。 -webkit-transform:rotate(-60deg) skewY(30deg);屬性將 .hex 元素旋轉 -60 度，並在 y 軸上傾斜 30 度。

  -ms-transform: 旋轉(-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 元素的背面。

  背面可見性：隱藏；屬性隱藏 .hexIn 元素的背面。

  十六進位內容

  .hex img 選擇器選擇所有影像

以上是HTML 和 CSS 如何建立包含圖像、標題和文字的六邊形網格佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！