web前端之微信官網導航欄滑動門
微信官網
導航欄無視文字大小實現效果
<!--
@author：Scen
@date：2018/10/31 11:54
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
body {
background: url(wx.jpg) repeat-x;
}
.nav li {
float: left;
margin: 20px;
}
.nav .home a {
/*1. a 左邊放 左圓角 但是文字需要往右走 15px*/
height: 33px;
line-height: 33px;
color: #FFFFFF;
text-decoration: none;
background: url(to.png) no-repeat;
display: inline-block;
padding-left: 15px;
}
.nav .home span {
/*2. span 右邊放右圓角 但是文字需要往左走 15px*/
background: url(to.png) no-repeat right;
display: inline-block;
height: 33px;
padding-right: 15px;
}
.nav .faq a {
height: 33px;
line-height: 33px;
color: #FFFFFF;
text-decoration: none;
display: inline-block;
padding-left: 15px;
}
.nav .faq span {
display: inline-block;
height: 33px;
padding-right: 15px;
}
.nav .faq a:hover {
background: url(ao.png) no-repeat;
}
.nav .faq a:hover span {
font-weight: lighter;
background: url(ao.png) right;
}
</style>
</head>
<body>
<ul class="nav">
<li class="home">
<a href="javascript:;">
<span>首頁</span>
</a>
</li>
<li class="faq">
<a href="javascript:;">
<span>幫助與反饋</span>
</a>
</li>
<li class="faq">
<a href="javascript:;">
<span>公衆平臺</span>
</a>
</li>
<li class="faq">
<a href="javascript:;">
<span>表情開放平臺</span>
</a>
</li>
</ul>
</body>
</html>
資源：
wx.jpg
to.png
ao.png
ps：也可以在微信官網自己爬