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中文网其他相关文章！