特效描述:div+css菜单 导航条布局 自适应宽度。div+css布局制作导航菜单,设置导航条自适应宽度效果,导航匹配自定义宽度大小。
代码结构
1. HTML代码
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
.demo{width:645px;margin:50px auto;}
/* navbox */
.navbox{height:35px;padding:0 10px;}
.navbox .navleft,.navbox .navright,.navbox .navcon,.navbox .navcon li a{background:url(images/navbg.png) no-repeat;height:35px;overflow:hidden;}
.navbox .navleft,.navbox .navright{width:10px;display:inline;}
.navbox .navleft{background-position:0 0;float:left;margin:0 0 0 -10px;}
.navbox .navright{background-position:100% -70px;float:right;margin:0 -10px 0 0;}
.navbox .navcon{float:left;width:100%;background-position:0 -35px;background-repeat:repeat-x;}
.navbox .navcon li{float:left;width:104px;}
.navbox .navcon li a{background-position:0 -35px;line-height:35px;color:#fff;display:block;text-align:center;font-size:12px;text-decoration:none;}
.navbox .navcon li a:hover,.navbox .navcon li a.current{background-position:0 -105px;}
首页jquery 特效javascript特效flash特效div+css教程html5教程