2. 作业:根据以上显示效果用<ul><li>标记结合CSS设置水平导航条。
时间: 2024-10-17 12:10:27 浏览: 33
用ul、li标签创建css横向导航菜单示例
5星 · 资源好评率100%
为了创建一个水平导航栏,你可以使用`<ul>`和`<li>`元素结合CSS样式来布局。下面是一个基本的例子:
首先,创建HTML结构:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css"> <!-- 这里假设styles.css是你存放CSS的文件 -->
<title>水平导航栏</title>
</head>
<body>
<ul class="nav">
<li><a href="#">主页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</body>
</html>
```
接下来,创建一个名为`styles.css`的CSS文件,设置导航栏样式:
```css
.nav {
list-style-type: none; /* 移除列表默认的项目符号 */
margin: 0;
padding: 0;
display: flex; /* 使用flex布局 */
justify-content: space-between; /* 水平居间分布 */
}
.nav li {
position: relative; /* 添加定位以便处理下划线 */
}
.nav a {
display: block;
text-align: center;
padding: 15px 20px;
color: #333;
text-decoration: none;
}
.nav a:hover {
background-color: #f0f0f0;
}
```
这个例子中,`.nav`设置了无序列表的基本样式,并使用`display: flex`使其变为水平布局。`.nav li`添加了相对定位,方便在鼠标悬停时添加下划线效果。`.nav a`则是单个链接项的样式,包括颜色、内边距等。
记得将CSS样式链接的`href`替换为你实际的CSS文件路径,然后保存并预览HTML文档,你应该能看到一个简单的水平导航栏。如果你需要进一步定制样式,例如添加下划线效果,可以在`.nav a:hover`选择器中调整对应的样式。
阅读全文