类似日常生活中的滑动门,根据a链接不同的文字宽度,自动撑开相应的背景宽度。
HTML代码如下:
<div>
<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>
</ul>
</div>
CSS代码如下:
* {
margin: 0;
padding: 0;
}
body {
background: url(images/weixin/Jv3K6jD.jpg) repeat-x;
}
ul {
list-style: none;
}
div {
width: 1190px;
height: 75px;
margin: 0 auto;
}
ul {
padding-top: 21px;
}
li {
float: left;
margin: 0 30px;
}
a {
color: #fff;
line-height: 33px;
text-decoration: none;
background: url(images/weixin/lTcb_ve.png) no-repeat;
display: block;
padding-left: 15px;
}
a span {
display: block;
line-height: 33px;
background: url(images/weixin/lTcb_ve.png) right no-repeat;
padding-right: 15px;
}
a:hover {
background: url(images/weixin/ao.png) no-repeat;
}
a:hover span{
background: url(images/weixin/ao.png) right no-repeat;
}
效果图如下: