复杂滑动门
2017-06-21 本文已影响0人
Yuann
结果图
背景1
背景2
上面的滑动门是由下面的两个图片组成的,当鼠标移动上去的时候是要文字变色的,说明是由a标签组成的,a的背景是左边的图片,a里面有一个span,span里面放着文字,和右边的背景图片,注意设置display和padding值;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
float: left;
}
li a{
text-decoration: none;
background-image: url(images/bg_r1_c1.png);
background-repeat: no-repeat;
height: 35px;
display: inline-block;
padding-left: 7px;
}
li span{
background-image: url(images/bg_r1_c2.png);
background-position: right;
height: 35px;
display: inline-block;
padding-right: 24px;
line-height: 35px;
}
</style>
</head>
<body>
<ul>
<li><a href="#"><span>我是大美女</span></a></li>
<li><a href="#"><span>丽丽</span></a></li>
<li><a href="#"><span>天下是我的,我是大王</span></a></li>
</ul>
</body>
</html>
