* { 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”,是方便在不同页面有个默认样式。