如下图所示,每个导航栏目的文字个数不一样多，有的长，有的短,如何用一张背景图片，适应不同字数”的导航条,“滑动门”设计的非常巧妙，采用两个相同的背景图像，一左一右，一个负责提供左边框，一个负责提供右边框。如下图所示，当需要容纳较多文字时，重叠就少一些，而需要较少文字时，重叠就多一些。两个图像可以滑动，重叠的部分的宽度会根据里面的文字的字数而自动调整，就像两扇推拉门一样，因此这种技术就叫做“滑动门”。(鼠标经过有凹凸感)
图片准备如下:
html结构:
<body> <div class="wrap"> <div class="head"> <ul> <li><a href="#"><span>首页</span></a></li> <li><a href="#"><span>帮助与反馈</span></a></li> <li><a href="#"><span>公众平台</span></a></li> <li><a href="#"><span>开放平台</span></a></li> <li><a href="#"><span>微信支付</span></a></li> <li><a href="#"><span>微信网页版</span></a></li> <li><a href="#"><span>表情开放平台</span></a></li> <li><a href="#"><span>微信广告</span></a></li> </ul> </div> </div> </body>
css样式
<style> *{ margin: 0; padding: 0; } .wrap{ background: url("wx2.jpg") repeat-x;(背景颜色图片) } .head{ width: 1000px;/*甚至高度宽度,盒子居中,文字居中*/ height: 50px; line-height: 50px; margin: 0 auto; } .head li { list-style:none;/*浮动,调整距离*/ float: left; margin: 0 10px; } .head li a { /* a 里面放置左圆角 设置左padding值 */ text-decoration: none; color: #fff; display: inline-block; height: 33px; line-height: 33px; padding-left: 15px; background: url(ao.png) no-repeat; } .head li span{ /* span 里面放置右圆角 设置右padding值 */ display: inline-block; height: 33px; line-height: 33px; background: url(ao.png) no-repeat right; padding-right: 15px; } .head li a:hover, .head li a:hover span{ /* 鼠标经过a 和鼠标经过a 里面的span 的背景图像变化 */ background-image: url(to.png); } </style>