上一节站长地带详细介绍了如何制作导航条,本章我们继续多做几遍不同效果的导航条。
效果如下:
这个实例和上一节的差不多,站长地带作为巩固为大家再次做一遍,请大家查漏补缺。
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="#">项目6</a></li> |
|
<li><a href="#">项目7</a></li> |
|
</ul> |
|
</div> |
|
不管是CSS竖向列表,还是横向导航条列表,在结构部分主要是使用的ul li的组合标签。
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; |
|
|
|
|
|
} |
|
li a:hover{ |
|
color:#FF0000; |
|
|
|
} |
|
|
|
</style> |
|
如果你对于站长地带这样的图文教程还是不容易接受,请加入站长地带VIP,里面有详细的制作视频,供大家学习。
本文链接:
https://www.dnwfb.com/1001.html,转载请注明出处。
评论0