css导航栏
时间: 2023-07-25 07:09:43 浏览: 62
CSS导航栏是一个常见的Web设计元素,可以让用户轻松浏览您的网站。以下是一个基本的水平CSS导航栏示例:
HTML代码:
```html
<nav>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
```
CSS代码:
```css
nav {
background-color: #333; /* 导航栏背景色 */
}
nav ul {
list-style-type: none; /* 去掉列表样式 */
margin: 0;
padding: 0;
overflow: hidden; /* 隐藏溢出内容 */
}
nav li {
float: left; /* 左浮动 */
}
nav li a {
display: block; /* 设置为块级元素 */
color: white; /* 文字颜色 */
text-align: center;
padding: 14px 16px; /* 上下左右填充 */
text-decoration: none; /* 去掉下划线 */
}
nav li a:hover {
background-color: #111; /* 鼠标悬停时的背景色 */
}
```
您可以根据自己的需求进行修改和定制,例如添加子菜单、更改颜色等。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)