上一节站长地带详细介绍了如何制作导航条，本章我们继续多做几遍不同效果的导航条。
效果如下：
可以看见鼠标放下去时，背景色变了。
HTML代码：
| <div class="nav"> |
| |
<ul> |
| |
<li><a href="http://www.zzarea.com">项目1</a></li> |
| |
<li><a href="#">项目2</a></li> |
| |
<li><a href="#">项目3</a></li> |
| |
<li><a href="#">项目4</a></li> |
| |
<li><a href="#">项目5</a></li> |
| |
<li><a href="http://bbs.zzarea.com">项目6</a></li> |
| |
<li><a href="#">项目7</a></li> |
| |
</ul> |
| |
</div> |
|
CSS代码：
| <style type="text/css"> |
| |
*{ |
| |
margin:0px; |
| |
padding:0px; |
| |
} |
| |
body{ |
| |
font-size:14px; |
| |
font-family:"微软雅黑"; |
| |
} |
| |
.nav{ |
| |
width:1000px; |
| |
margin:30px auto 0px auto; |
| |
background-color:#0099FF; |
| |
height:40px; |
| |
|
| |
} |
| |
ul{ |
| |
list-style:none; |
| |
|
| |
} |
| |
li{ |
| |
float:left; |
| |
line-height:40px; |
| |
width:100px; |
| |
text-align:center; |
| |
|
| |
} |
| |
li a{ |
| |
color:#FFFFFF; |
| |
text-decoration:none; |
| |
display:block; /*块状结构*/ |
| |
width:100px; |
| |
height:40px; |
| |
|
| |
|
| |
} |
| |
li a:hover{ |
| |
background-color:#000000; |
| |
|
| |
} |
| |
|
| |
</style> |
|
请注意红色地方，如果你直接在hover里写上背景颜色，只会把文字的背景变掉，而不会填充一定的宽高，所以直接用display:block 变成块状元素，再设置宽高，就搞定了。
本文链接：
https://www.dnwfb.com/999.html，转载请注明出处。
评论0