* {
padding:0;
margin:0;
background:#333;
}
ul,li {
list-style:none;
}
ul {
width:850px;
zoom:1;
position:relative;
margin:50px auto 0;
}
li {
width:170px;
height:30px;
line-height:30px;
color:#ffffff;
text-align:center;
float:left;
background:#2d8cf0;
opacity:0.8;
}
ul:after {
display:block;
content:"";
clear:both;
visibility:hidden;
height:0;
transition:.5s;
}
i {
width:170px;
height:2px;
content:"";
background:#ffad33;
position:absolute;
bottom:0;
left:0;
z-index:9;
transition:.5s;
}
首先考虑到代码精简以及SEO,所以HTML页面,只运用了"ul"标签。效果的兼容性可以到ie9,如果不考虑滑动的话,ie8也没有问题。HTML中有个样式名“active”,是方便在不同页面有个默认样式。