滑动门原理

制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<style type="text/css">
	body {
		background: url(images/wx.jpg)  repeat-x; 
	}
	.nav li {
		float: left;
		list-style: none;
		margin-right: 15px;
	}
	.nav a{
		text-decoration: none;
		color: #fff;
		display: inline-block;
		background: url(images/to.png) no-repeat;
		height: 33px;
		line-height: 33px;
		padding-left: 15px;
	}
		
	.nav span{	
		display: inline-block;
		background: url(images/to.png) no-repeat right;
		padding-right: 15px;
	}
	/* 此处注意，换a同时也要换span */
	.nav a:hover,.nav a:hover span{
		background-image: url(images/ao.png);
	}
</style>
<body>
	<ul  class="nav">
		<li>
			<a href="">
				<span>首页</span>
			</a>
		</li>
		<li>
			<a href="">
				<span>新闻客户端</span>
			</a>
		</li>
		<li>
			<a href="">
				<span>小程序</span>
			</a>
		</li>
	</ul>
</body>
</html>

因此，这种方法有效解决了字数问题导致页面不美观。