几种常见的导航
2010-12-30 阅读 218
最近在学前台，今天就用div ul li h1~h6 这些标签写几个导航，本来是练习。想想还是写出来吧，希望能给大家一点帮助吧。
#### 1.横排导航
css代码：
.mainnav ul li { float:left;}
.mainnav ul li a { background:url(../images/bg_nav.png) no-repeat -81px; height:26px; width:77px;display:block; margin:0 5px 0 0; text-align:center; line-height:26px; text-decoration:none; color:#FFF;}
.mainnav ul li a:hover,.mainnav ul li .active{ background:url(../images/bg_nav.png) no-repeat; display:block;}
```
html代码：
＜body＞
＜div class="mainnav"＞
＜ul＞
＜li＞＜a class="active" href="#"＞BUY＜/a＞＜/li＞
＜li＞＜a href="#"＞SELL＜/a＞＜/li＞
＜li＞＜a href="#"＞NEWS＜/a＞＜/li＞
＜li＞＜a href="#"＞ABOUT＜/a＞＜/li＞
＜li＞＜a href="#"＞CONTACT＜/a＞＜/li＞
＜li＞＜a href="#"＞FAQ＜/a＞＜/li＞
＜/ul＞
＜/div＞
＜/body＞
```
本例用到的图片，如图所示：
注释：在css中红色代码的数值，是计算出来的，本例中是81px，当然这个值是由你背景图的宽度决定的。
2. 横排下拉导航
本例导航没有使用javascript代码，完全是用css来是现的。
css代码：
＜style＞
ul{ padding:0; margin:0; list-style:none; width:130px; border-bottom:1px #F00 solid; font-size:12px;}
ul li { position:relative;}
li{width:160px; border:#000 1px solid;}
li ul{ position:absolute; left:160px; top:0px; display:none;}
li:hover ul{ display:block;}
ul li a { display:block; font-size:12px; background:#999; padding:5px; text-decoration:none; border:1px #0F0; border-bottom:0; color:#606;}
ul li a:hover{ background:#FF0;}
＜/style＞
```
html代码：
＜body＞
＜ul＞
＜li＞＜a href="#"＞文章＜/a＞
＜ul＞
＜li＞＜a href="#"＞教程＜/a＞＜/li＞
＜li＞＜a href="#"＞教程＜/a＞＜/li＞
＜li＞＜a href="#"＞教程＜/a＞＜/li＞
＜li＞＜a href="#"＞教程＜/a＞＜/li＞
＜/ul＞
＜/li＞
＜li＞＜a href="#"＞文章＜/a＞
＜ul＞
＜li＞＜a href="#"＞教程＜/a＞＜/li＞
＜li＞＜a href="#"＞教程＜/a＞＜/li＞
＜li＞＜a href="#"＞教程＜/a＞＜/li＞
＜li＞＜a href="#"＞教程＜/a＞＜/li＞
＜/ul＞
＜/li＞
＜li＞＜a href="#"＞文章＜/a＞
＜ul＞
＜li＞＜a href="#"＞教程＜/a＞＜/li＞
＜li＞＜a href="#"＞教程＜/a＞＜/li＞
＜li＞＜a href="#"＞教程＜/a＞＜/li＞
＜li＞＜a href="#"＞教程＜/a＞＜/li＞
＜/ul＞
＜/li＞
＜li＞＜a href="#"＞文章＜/a＞
＜ul＞
＜li＞＜a href="#"＞教程＜/a＞＜/li＞
＜li＞＜a href="#"＞教程＜/a＞＜/li＞
＜li＞＜a href="#"＞教程＜/a＞＜/li＞
＜li＞＜a href="#"＞教程＜/a＞＜/li＞
＜/ul＞
＜/li＞
＜/ul＞
＜/body＞
```
3.竖排导航
css代码：
＜style＞
ul{ padding:0; margin:0; list-style:none;}
li { float:left; width:160px;}
li ul{ display:none; top:20px;}
li:hover ul{ display:block;}
ul li a{ display:block; font-size:12px; border:#F00 1px solid; padding:3px; text-decoration:none; color:#777;}
ul li a:hover{ background:#f4f4f4;}
＜/style＞
```
html代码：
＜ul＞
＜li＞＜a href="#"＞文章＜/a＞
＜ul＞
＜li＞＜a href="#"＞教程＜/a＞＜/li＞
＜li＞＜a href="#"＞教程＜/a＞＜/li＞
＜li＞＜a href="#"＞教程＜/a＞＜/li＞
＜li＞＜a href="#"＞教程＜/a＞＜/li＞
＜/ul＞
＜/li＞
＜li＞＜a href="#"＞文章＜/a＞
＜ul＞
＜li＞＜a href="#"＞教程＜/a＞＜/li＞
＜li＞＜a href="#"＞教程＜/a＞＜/li＞
＜li＞＜a href="#"＞教程＜/a＞＜/li＞
＜li＞＜a href="#"＞教程＜/a＞＜/li＞
＜/ul＞
＜/li＞＜li＞＜a href="#"＞文章＜/a＞
＜ul＞
＜li＞＜a href="#"＞教程＜/a＞＜/li＞
＜li＞＜a href="#"＞教程＜/a＞＜/li＞
＜li＞＜a href="#"＞教程＜/a＞＜/li＞
＜li＞＜a href="#"＞教程＜/a＞＜/li＞
＜/ul＞
＜/li＞
＜li＞＜a href="#"＞文章＜/a＞
＜ul＞
＜li＞＜a href="#"＞教程＜/a＞＜/li＞
＜li＞＜a href="#"＞教程＜/a＞＜/li＞
＜li＞＜a href="#"＞教程＜/a＞＜/li＞
＜li＞＜a href="#"＞教程＜/a＞＜/li＞
＜/ul＞
＜/li＞
＜/ul＞
```
4.竖排导航（2）
css代码：
＜style＞
#category {
width:100px;
border-right:1px #999;
border-bottom:1px #999;
borde-left:1px #999;
font-size:12px;
}
#category h1 {
margin:0px;
padding:4px;
font-weight:bold;
border-top:1px #F00;
background:#333;
}
#category h2 {
margin:0px;
padding:4px;
font-weight:normal;
}
＜/style＞
```
html代码：
＜div id="category"＞
＜h1＞css入门＜/h1＞
＜h2＞进阶＜/h2＞
＜h2＞进阶＜/h2＞
＜h2＞进阶＜/h2＞
＜div＞
＜h1＞css入门＜/h1＞
＜h2＞进阶＜/h2＞
＜h2＞进阶＜/h2＞
＜h2＞进阶＜/h2＞
＜/div＞
＜div＞
＜h1＞css入门＜/h1＞
＜h2＞进阶＜/h2＞
＜h2＞进阶＜/h2＞
＜h2＞进阶＜/h2＞
＜/div＞
＜div＞
＜h1＞css入门＜/h1＞
＜h2＞进阶＜/h2＞
＜h2＞进阶＜/h2＞
＜h2＞进阶＜/h2＞
＜/div＞
＜/div＞
```
因为刚开始学习前台不久，代码中难免有不足之处，还请网友们见谅。
请关注我们（www.huilinwang.com）精彩还在继续......
html css 导航
更新于 2023年03月28日
