掌握 CSS：斑马条纹列表设计

简介

在这个实验中，我们将探索 CSS 编程的基础知识。本实验的目的是帮助你更好地理解如何使用 CSS 对 HTML 元素进行样式设置和布局。你将学习如何使用 CSS 选择器、属性和值来创建视觉上吸引人且响应式的网页。

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个初级级别的实验，完成率为 100%。获得了学习者 100% 的好评率。

斑马条纹列表

虚拟机中已提供了 index.html 和 style.css。

要创建具有交替背景颜色的列表，请使用 :nth-child(odd) 或 :nth-child(even) 伪类选择器，根据元素在同级元素中的位置为其应用不同的 background-color。这可以应用于各种 HTML 元素，如 <div>、<tr>、<p>、<ol> 等。

以下是如何使用 <li> 元素创建条纹列表的示例：

<ul>
  <li>Item 01</li>
  <li>Item 02</li>
  <li>Item 03</li>
  <li>Item 04</li>
  <li>Item 05</li>
</ul>

li:nth-child(odd) {
  background-color: #999;
}

请点击右下角的“Go Live”以在端口 8080 上运行 Web 服务。然后，你可以刷新“Web 8080”标签页来预览网页。

总结

恭喜你！你已经完成了斑马条纹列表实验。你可以在 LabEx 中练习更多实验来提升你的技能。