导航栏.png
这样子的导航栏。
用css修饰即可实现。
首先是html代码部分：
<body>
<div class="daohang">
<ul>
<li><a href="#">栏目1</a></li>
<li><a href="#">栏目2</a></li>
<li><a href="#">栏目3</a></li>
<li><a href="#">栏目4</a></li>
......
</ul>
</div>
为你所需要导航的地方对栏目n进行一个修改，对需要导航到的网站在替换掉链接代码中的"#"。
接下来是css代码：
1.对于整个导航栏的代码
.daohang{
width:xxpx;
height:xxpx;
font-size:xxpx;
font-family:xx;
background-color:xx;
padding:0 0 1em 0; /*用于美化边框结构，可以不用*/
}
2.针对导航栏的排序代码进行美化
.daohang ul{
list-style:none; /*去掉前面的排序标记*/
padding:0; /*内容靠近大框*/
}
3.对于链接的美化
.daohang li{
display:block; /*使得链接体放入框中*/
padding:xpx xpx xpx xem;
text-decoration:none;
background-color:xx;
border-right-style:xx;
border-left-style:xx;
border-right-color:xx;
border-left-color:xx;
border-right-width:xx;
border-left-width:xx;
/*分成几行来写，可有可无，根据直接想写的美观程度*/
}
image.png
4.对于链接处理：
.daohang li a:hover{
background-color:xx; /*当鼠标移过去时背景显示的颜色*/
color:xx; /*当鼠标移过去时字显示的颜色*/
border-right-style:xx;
border-left-style:xx;
border-right-color:xx;
border-left-color:xx;
border-right-width:xx;
border-left-width:xx; /*对于width,如果前面对Li设置有的话，应该与Li中的同步*/
/*鼠标已过去时边框所显示的效果*/
}
之前.png
鼠标放上去以后.png
另外横线导航与纵向导航类似。html的代码保持不变；
而css：
.q ul{
list-style:none;
}
.q li{
float:left;
}
.q li a{
color:#ffffff;
text-decoration:none;
padding-top:4px;
display:block;
width:65px;
height:20px;
text-align:center;
background-color:#6600cc;
margin-left:2px;
}
.q li a:hover{
background:#9999ff;
color:#ffffff;
}
大体上一支，不过增加了对Li属性的"float:left"浮点型，使之能对齐左边。
网友评论