html好看的导航栏
时间: 2023-08-30 20:06:58 浏览: 160
html实现好看的多种风格导航菜单(源码)
5星 · 资源好评率100%
要制作一个好看的导航栏,可以使用HTML和CSS来实现。以下是一个简单的示例代码:
HTML代码:
```
<nav>
<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>
</nav>
```
CSS代码:
```
nav {
background-color: #333;
height: 50px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
li {
margin: 0 10px;
}
a {
color: #fff;
text-decoration: none;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
padding: 10px 15px;
border-radius: 5px;
}
a:hover {
background-color: #fff;
color: #333;
}
```
这段代码将会生成一个简单但漂亮的导航栏。你可以根据需要进行调整和修改。
阅读全文