:hover 选择器实现简单的导航栏效果
:hover 选择器
:hover 选择器用于选择鼠标指针浮动在上面的元素。
ps: :hover 选择器可用于所有元素,不只是链接。
一级导航栏效果
一般网页做导航栏都是有跳转效果的功能,所以一般li中都包含了a标签。
i标签里可以放小图标。
html代码
<div class="nav">
<ul class="nav_ul">
<li>
<a href="">首页 <i></i> </a>
</li>
<li>
<a href="">视频 <i></i> </a>
</li>
<li>
<a href="">小说 <i></i> </a>
</li>
<li>
<a href="">音乐 <i></i> </a>
</li>
<li>
<a href="">游戏 <i></i> </a>
</li>
<li>
<a href="">其他 <i></i> </a>
</li>
</ul>
</div>
css代码
*{
padding: 0;
margin:0;
}
li{
list-style: none;
}
a{
/*取消a标签下边的线*/
text-decoration: none;
}
.nav{
width: 300px;
margin