纯CSS实现标签导航制作

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

nav02

绿夏网01
绿夏网02
绿夏网03

绿夏网 www.gimoo.net

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