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

简介

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") css/IntermediateStylingGroup -.-> css/pseudo_classes("Pseudo-classes") subgraph Lab Skills css/selectors -.-> lab-35257{{"斑马条纹列表"}} css/colors -.-> lab-35257{{"斑马条纹列表"}} css/backgrounds -.-> lab-35257{{"斑马条纹列表"}} css/pseudo_classes -.-> lab-35257{{"斑马条纹列表"}} end

斑马条纹列表

虚拟机中已提供了 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 中练习更多实验来提升你的技能。