在前端开发中，经常需要呈现一些包含重复元素的内容，例如列表、表格和图片。本文将介绍如何使用 HTML 和 CSS 创造出具有视觉层次感和易于阅读的重复元素。
1. 列表
1.1 无序列表
无序列表可以使用圆点、方块或自定义图标来表示每个列表项。我们可以使用 CSS 中的 list-style 属性来修改默认样式，并使用 :before 或 :after 伪元素来添加更多样式。
例如，以下代码将创建一个带有自定义图标的无序列表：
<ul> <li>列表项 1</li> <li>列表项 2</li> <li>列表项 3</li> </ul>
-- -------------------- ---- ------- -- - ----------- ----- ------------ -- ------------- -- - -- - --------- --------- ------------- ----- -------------- ----- - --------- - -------- --- -------- ------ --------- --------- ----- -- ---- ---- ------ ----- ------- ----- -------------- ---- ----------------- ----- -
1.2 有序列表
有序列表使用数字顺序表示每个列表项。除了修改 list-style 属性外，还可以使用 counter-reset 和 counter-increment 属性来自定义计数器，并使用 content 属性来显示计数器的值。
例如，以下代码将创建一个带有自定义计数器的有序列表：
<ol> <li>列表项 1</li> <li>列表项 2</li> <li>列表项 3</li> </ol>
-- -------------------- ---- ------- -- - ----------- ----- -------------- ----- ------------ -- ------------- -- - -- - --------- --------- ------------------ ----- ------------- ----- -------------- ----- - --------- - -------- ------------- ---- -------- ------ --------- --------- ----- -- ---- ---- ------ ----- ----------- ------- ------------ ----- -
2. 表格
表格可以使用 HTML 标签 <table>、<tr>、<th> 和 <td> 来创建。我们可以使用 CSS 中的 border、padding 和 background-color 属性来修改表格样式。
例如，以下代码将创建一个简单的表格：
-- -------------------- ---- -------
-------
----
------- ------
------- ------
------- ------
-----
----
------- ------
------- ------
------- ------
-----
----
------- ------
------- ------
------- ------
-----
---------- -------------------- ---- ------- ----- - ---------------- --------- ------ ----- - --- -- - -------- ----- ----------- ----- --------------- ------- ------- --- ----- ----- - -- - ----------------- -------- ------------ ----- -
3. 图片
图片可以使用 HTML 标签 <img> 来呈现。我们可以使用 CSS 中的 border、padding 和 box-shadow 属性来添加边框和阴影效果。
例如，以下代码将创建一个带有边框和阴影效果的图片：
<img src="image.jpg" alt="图片">
img {
display: block;
max-width: 100%;
border: 10px solid #fff;
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/14288) ，转载请注明来源
[https://www.javascriptcn.com/post/14288](https://www.javascriptcn.com/post/14288)