列举几个导航列表html及样式
时间: 2023-09-20 16:10:59 浏览: 46
以下是几个常见的导航列表HTML及样式:
1. 无序列表导航(Unordered List Navigation):
HTML代码:
```
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
```
CSS代码:
```
ul {
list-style: none; /* 去掉原本的圆点标记 */
margin: 0;
padding: 0;
background-color: #f6f6f6;
}
li {
display: inline-block; /* 将列表项变成水平排列 */
}
li a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
}
li a:hover {
background-color: #ccc;
}
```
2. 有序列表导航(Ordered List Navigation):
HTML代码:
```
<ol>
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ol>
```
CSS代码:
```
ol {
list-style: none; /* 去掉原本的数字标记 */
margin: 0;
padding: 0;
background-color: #f6f6f6;
}
li {
display: inline-block; /* 将列表项变成水平排列 */
}
li a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
}
li a:hover {
background-color: #ccc;
}
```
3. 水平导航(Horizontal Navigation):
HTML代码:
```
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
```
CSS代码:
```
ul {
list-style: none;
margin: 0;
padding: 0;
background-color: #f6f6f6;
text-align: center; /* 让列表项居中对齐 */
}
li {
display: inline-block;
}
li a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
}
li a:hover {
background-color: #ccc;
}
```
以上是几个常见的导航列表HTML及样式,可以根据实际需求进行修改。