滑动门

时松

于 2019-08-30 08:42:36 发布

阅读量131

点赞数

分类专栏：基础文章标签：滑动门

本文链接：https://blog.csdn.net/ice_yr/article/details/100147917

版权

基础专栏收录该内容

79 篇文章 1 订阅

订阅专栏

使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强，常见于各种导航栏的滑动门
核心技术利用的是css精灵（主要是背景位置）和盒子padding撑开宽度，来适应不同字数的导航栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		a {
			margin: 100px;
			display: inline-block;  /*因为a没有大小所以转换为块级元素*/
			height: 33px;
			/*一定不能给宽 否则无法自由缩放*/
			background: url(bg.png) no-repeat;
			padding-left: 15px;
			color: #fff;
			text-decoration: none;  /*取消下划线*/
			line-height: 33px;
			font-size: 9px;
		}
		a span {
			display: inline-block;
			height: 31px;
			background: url(bg.png) no-repeat right; 
			/*span 不能给宽度 利用padding挤开 需要右边圆角 所以背景 右对齐*/
			padding-right: 15px; 
		}
	</style>
</head>
<body>
	<a href="#">
		<span>首页</span>
	</a>
	<a href="#">
		<span>领取奖励</span>
	</a>
	<a href="#">
		<span>简介</span>
	</a>
	<a href="#">
		<span>设计规划</span>
	</a>
</body>
</html>

1.设置背景左侧，padding撑开合适宽度，注意不要给宽度
2.span设置背景右侧，padding撑开合适宽度剩下由文字继续撑开宽度
3.a包含span则整个导航都可以点击

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
	ul {
		list-style: none;
	} 
	body {
			 background: url(wx.jpg) repeat-x;
		}
	.nav li {
		float: left;
		margin: 0 10px;
		padding-top: 21px;
	}
	.nav {
		height: 75px;
		/*background-color: pink; */
	}
	.nav li a {
		display: block;
		/*height: 33px;  其实有了行高就不用高！！！*/
		background: url(bg.png) no-repeat;
		color: #fff;
		line-height: 33px;
		text-decoration: none;
		font-size: 14px;
		padding-left: 15px;
	}
	.nav li a:hover {
		background-image: url(ao.png); 
	}
	.nav li a:hover span {
		background-image: url(ao.png);
		
	}
	.nav li a span {
		display: block;
		line-height: 31px;
		background: url(bg.png) no-repeat right center;
		padding-right: 15px; 
	}
	</style>
</head>
<body>
	<div class="nav">
		<ul>
			<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>
</body>
</html>