html导航条布局 div+css菜单导航条布局自适应宽度

特效描述：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教程

如果觉得《html导航条布局 div+css菜单导航条布局自适应宽度》对你有帮助，请点赞、收藏，并留下你的观点哦！