管理资源吧首页>>>教程>>>编程>>>CSS/HTML教程>>>

纯CSS实现标签导航制作

　　在网上搜索了一下都没怎么看到纯用CSS制作标签导航方面的教程或者说明，大部分都是要涉及到JS的编写的。这对于很多CSS学习中的人来说实在有些不够体贴，既然没人做那我来先来试试！我在这里做的CSS标签导航是纯CSS无JS无背景图片的绿色导航。此文章适合初学者，高手可以路过，呵呵！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"><head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>nav02</title> 
</head> 
<style type="text/css"> 
*{ 
    margin:0; 
    padding:0; 
} 
.mainNav{ 
    margin:0 20px; 
    height:47px; 
    border-bottom:2px solid #000; 
} 
ul{ 
    margin:20px; 
    margin-bottom:0; 
    padding-left:20px; 
    list-style-type:none; 
    font-size:12px; 
    position:absolute; 
} 
ul li{ 
    float:left; 
    margin-right:5px; 
} 
ul li a{ 
    display:block; 
    width:100px; 
    line-height:25px; 
    text-align:center; 
    color:#999; 
    background-color:#FC0; 
    border:2px solid #000; 
} 
ul li a:hover{ 
    height:27px; 
    background-color:#F60; 
    border-bottom:none; 
} 
#nav01 ul li a#nav001, 
#nav02 ul li a#nav002, 
#nav03 ul li a#nav003{ 
    width:100px; 
    height:27px; 
    color:#FFF; 
    background-color:#F60; 
    border:2px solid #000; 
    border-bottom:none; 
} 
.con{ 
    margin:0 20px; 
    padding:20px; 
    color:#FFF; 
    background-color:#F60; 
    border:2px solid #000; 
    border-top:none; 
} 
</style> 
<body id="nav01"> 
    <div class="mainNav"> 
        <ul> 
            <li><a href="#" _ewebeditor_ta_href="%23" id="nav001">管理资源吧01</a></li> 
            <li><a href="#" _ewebeditor_ta_href="%23" id="nav002">管理资源吧02</a></li> 
            <li><a href="#" _ewebeditor_ta_href="%23" id="nav003">管理资源吧03</a></li> 
        </ul> 
    </div> 
    <div class="con">管理资源吧 <A href="http://www.glzy8.com</div" _ewebeditor_ta_href="http%3A%2F%2Fwww.glzy8.com%3C%2Fdiv">www.glzy8.com</div</A>> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

复制代码代码如下:

　　.mainNav{

　　margin:0 20px;

　　height:47px;

　　border-bottom:2px solid #000;

　　}

　　ul{

　　margin:20px;

　　margin-bottom:0;

　　padding-left:20px;

　　list-style-type:none;

　　font-size:12px;

　　position:absolute;

　　}

　　ul li{

　　float:left;

　　margin-right:5px;

　　}

　　ul li a{

　　display:block;

　　width:100px;

　　line-height:25px;

　　text-align:center;

　　color:#999;

　　background-color:#FC0;

　　border:2px solid #000;

　　}

　　ul li a:hover{

　　height:27px;

　　background-color:#F60;

　　border-bottom:none;

　　}

　　#nav01 ul li a#nav001,

　　#nav02 ul li a#nav002,

　　#nav03 ul li a#nav003{

　　width:100px;

　　height:27px;

　　color:#FFF;

　　background-color:#F60;

　　border:2px solid #000;

　　border-bottom:none;

　　}

　　.con{

　　margin:0 20px;

　　padding:20px;

　　color:#FFF;

　　background-color:#F60;

　　border:2px solid #000;

　　border-top:none;

　　}

复制代码代码如下:

　　<ul>

　　</ul>

　　</div>

　　其实这其中的关键点是ul中的position:absolute命令，由于使用了这个CSS属性，ul导航的内容变成了层显示，就相当于浮在了浏览器上面。而为了不让下面的内容填补ul部分的内容，在ul外还套了个div，起到了帮助ul占位的作用。而这个div也同时起到了充当ul背景的作用，标签导航的关键就是底部border了。全看完之后你会发现其实很简单，但关键还是要有构思。好了！继续学习吧！

教程首页更多教程