微信滑动门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: #ffffff;
}
li{
list-style: none;
}
body{
background: url(images/wx.jpg) repeat-x;
font: 14px/1.6 -apple-system-font,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Arial,sans-serif;
}
#main{
height: 75px;
}
#main>div{
width: 968px;
margin: 0 auto;
}
#main ul{
padding: 21px 0 0;
float: right;
height: 33px;
line-height: 33px;
}
#main ul li{
float: left;
}
#main ul li a{
padding: 0 0 0 10px;
display: inline-block;
cursor: pointer;
margin: 0 2px;
}
#main ul li a span{
display: inline-block;
padding: 0 10px 0 0;
font-weight: 700;
cursor: pointer;
}
.img{
width: 130px;
height: 44px;
display: block;
float: left;
background-image: url(images/weixin.png);
background-size: 130px 44px;
background-position: center;
margin: 14px 0 0 ;
cursor: pointer;
}
#main ul li a span.active{
background-image: url(images/ao2.png);
background-attachment: scroll;
background-position: center right;
background-repeat: no-repeat;
}
#main ul li a.open{
background-image: url(images/ao2.png);
background-attachment: scroll;
background-repeat: no-repeat;
background-position: center left;
}
#main ul li:hover span{
background-image: url(images/ao2.png);
background-attachment: scroll;
background-position: center right;
background-repeat: no-repeat;
}
#main ul li:hover a{
background-image: url(images/ao2.png);
background-attachment: scroll;
background-repeat: no-repeat;
background-position: center left;
}
</style>
</head>
<body>
<div id="main">
<div>
<a class="img" href=""></a>
<ul>
<li><a class="open" href=""><span class="active">首页</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>
<li><a href=""><span>微信网页版</span></a></li>
</ul>
</div>
</div>
</body>
</html>
