在前端网页设计中,导航条是一个必不可少的组件。而CSS正是一种可以实现导航条的技术,它可以帮助用户更好的在页面中浏览,并且增强网站的可用性。首先,我们需要在HTML中添加一个导航条的div容器。可以在
<div class="nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">产品</a></li> <li><a href="#">服务</a></li> <li><a href="#">关于我们</a></li> </ul> </div>
.nav{ background: #333; padding: 10px 0; } .nav ul{ list-style: none; margin: 0; padding: 0; text-align: center; } .nav li{ display: inline-block; margin: 0 10px; line-height: 50px; } .nav a{ color: #fff; text-decoration: none; padding: 5px 15px; border: 1px solid #fff; border-radius: 3px; } .nav a:hover{ background: #fff; color: #333; }
粉丝
0
关注
0
收藏
0