滑动门
2017-06-21 本文已影响0人
Yuann
效果是下面的图片组成的,同样是li里面有a里面放左边背景图,a里面有个span,span放文字和右边的背景图 ,a和span要改成inline-Block,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
height: 74px;
background-image: url(images1/weixin_bg1d20af.jpg);
padding-left: 300px;
}
li{
list-style: none;
float: left;
margin-right: 20px;
margin-top: 20px;
}
li a{
height: 33px;
display: inline-block;
background-image: url(images1/bg.png);
background-position: 0 -192px;
line-height: 33px;
padding-left: 17px;
color: white;
text-decoration: none;
}
li span{
height: 33px;
display: inline-block;
background-image: url(images1/bg.png);
background-position: right -192px;
padding-right: 17px;
}
li a:hover{
color: green;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><a href="#"><span>我是大美女</span></a></li>
<li><a href="#"><span>丽丽</span></a></li>
<li><a href="#"><span>蓝蓝的白云天,悠悠水边流</span></a></li>
</ul>
</div>
</body>
</html>
