在网页设计中,侧边导航栏是非常常见的元素之一,它能够方便用户浏览和快速访问网站中的各个页面,同时还能够提高网站的美观程度和易用性。在CSS中,我们可以通过一些简单的代码来实现一个漂亮的侧边导航栏。首先
<div class="sidebar"> <ul class="nav"> <li><a href="#">第一个菜单项</a></li> <li><a href="#">第二个菜单项</a></li> <li><a href="#">第三个菜单项</a></li> <li><a href="#">第四个菜单项</a></li> </ul> </div>
.sidebar { background-color: #eee; width: 200px; float: left; } .nav { padding: 0; margin: 0; list-style: none; } .nav li { border-bottom: 1px solid #ccc; } .nav li a { display: block; padding: 10px; text-decoration: none; color: #333; } .nav li a:hover { background-color: #ddd; }
粉丝
0
关注
0
收藏
0