CSS 列表样式设计：创建水平导航栏

介绍

在本实验中，你将学习如何使用 CSS 将一个标准的、未经过样式化的 HTML 列表转换为一个视觉上吸引人的水平导航菜单。默认情况下，HTML 列表 (<ul>) 是垂直显示的，并带有项目符号。我们将使用几个基本的 CSS 属性来移除默认样式，并创建一个简洁、现代的导航栏。

你将学习使用以下 CSS 属性：

在本实验结束时，你将对如何设置列表样式有一个扎实的理解，这是网页开发中创建菜单、项目列表等常见任务。

在本步骤中，你将开始移除无序列表的默认项目符号。CSS 中的 list-style-type 属性用于控制列表项标记的外观。

首先，在 WebIDE 左侧的文件浏览器中找到 styles.css 文件并打开它。该文件目前是空的。

现在，向 styles.css 添加以下 CSS 规则。此规则将目标定位到 <ul> 元素，并将其 list-style-type 设置为 none，这将隐藏项目符号。

ul {
  list-style-type: none;
}

添加代码后，保存 styles.css 文件。要查看结果，请点击 LabEx 界面顶部的 "Web 8080" 标签页。你应该会看到列表项，但没有项目符号。

ul tag

在本步骤中，你将移除浏览器自动应用于无序列表的默认缩进。这种缩进实际上是 <ul> 元素左侧的 padding。

要移除它，你将更新 styles.css 文件中现有的 ul 规则。向该规则添加 padding: 0; 属性。这将把元素所有四个方向的内边距设置为零，从而有效地移除左侧的缩进。

将你的 styles.css 文件更新为如下所示：

ul {
  list-style-type: none;
  padding: 0;
}

保存文件并切换到 "Web 8080" 标签页来预览你的更改。你会注意到列表现在已对齐到其容器的最左侧。

在本步骤中，你将把列表项（list items）的布局从垂直改为水平。默认情况下，列表项（<li>）是块级元素（block-level elements），这意味着每个列表项会占据可用空间的全部宽度，并另起一行。

要将它们并排显示，你可以更改它们的 display 属性。我们将使用 inline-block 值，它允许元素像行内元素（inline elements）一样彼此相邻，但同时保留块级元素的属性，如 width、height 和 padding。

在你的 styles.css 文件中为 li 元素添加一条新的 CSS 规则。

li {
  display: inline-block;
}

现在，你的完整的 styles.css 文件应该如下所示：

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
}

保存文件并查看 "Web 8080" 标签页。列表项现在应该排列在同一水平线上。

li tag

在本步骤中，你将为列表项添加一些视觉样式，使其看起来更像导航按钮。我们将添加背景颜色和一些内部内边距（padding）。

background-color 属性用于设置元素的背景颜色，而 padding 属性则在元素边框内部添加空间。

修改 styles.css 中现有的 li 规则，以包含这些新属性。

li {
  display: inline-block;
  background-color: #f2f2f2;
  padding: 8px 16px;
}

这里，background-color: #f2f2f2; 设置了一个浅灰色背景。padding: 8px 16px; 为每个列表项内的文本顶部和底部添加了 8 像素的内边距，左右两侧添加了 16 像素的内边距。

保存文件并刷新 "Web 8080" 标签页。你将看到每个列表项现在都有一个灰色背景，并且文本周围有更多空间，使其看起来像独立的按钮。

li tag

在这个最后的样式步骤中，你将为列表项添加一些间距，以防止它们相互接触。margin 属性用于在元素的边框外部创建空间。

为了只在元素之间添加间距，我们可以使用 margin-right 属性为每个列表项的右侧应用外边距。

最后一次更新你的 styles.css 文件中的 li 规则：

li {
  display: inline-block;
  background-color: #f2f2f2;
  padding: 8px 16px;
  margin-right: 5px;
}

这会在每个列表项的右侧添加 5 像素的外边距，将它们彼此分开。最后一个列表项也会有右外边距，但由于其旁边没有其他元素，所以不会显示出来。

保存文件并查看 "Web 8080" 标签页。你的水平导航菜单现在已完成，每个按钮之间都有了适当的间距。

恭喜你！你已成功完成了关于 CSS 列表样式设计的这个实验。

你从一个标准的垂直 HTML 列表开始，将其转换成了一个风格化的水平导航菜单。在此过程中，你学习并应用了几个重要的 CSS 属性：

这些技术是构建导航栏和现代网站上其他基于列表的组件的基础。