几种常见的导航-有趣的事

几种常见的导航

2010-12-30 阅读 462

最近在学前台，今天就用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日