css滑动门技术

18648165727

发布于 2019.04.11 08:12 阅读 1461 评论 0

       为了使各种特殊形状的背景能够自适应元素内容的多少,出现了css滑动门技术。它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动。以适应元素内部的文本内容,可用性更强。最常用于各种导航栏的滑动门。

 

      核心技术是利用css精灵技术(背景位置)和盒子padding撑开宽度。以便适应不同字数的导航栏。

<li>
	<a href="#">
		<span>导航栏内容</span>
	</a>
</li>

   

   其中存在三个特别注意的地方:

    (一)a标签中设置背景的左侧,padding撑开合适宽度。

    (二)span标签设置背景的右侧,padding撑开合适的宽度,剩下的文字继续撑开宽度。

    (三)之所以a包含着span就是因为整个导航栏都是可以点击的。

 

 

    下面就以一个简单的小例子来说明一下

<a href="#">
		<span>首页</span>
	</a>
	a {
		margin: 100px;
		display: inline-block;
		height: 33px;
		/* 千万不能给宽度 写死宽度是不对滴,我们要推拉门 自由缩放*/
		background: url(images/ao.png) no-repeat;
		padding-left: 15px;
		color: #fff;
		text-decoration: none;
		line-height: 33px;
	}
	a span {
		display: inline-block;
		height: 33px;
		background: url(images/ao.png) no-repeat right; 
		/* span 不能给宽度 利用padding挤开  要我要span 右边的圆角  所以 背景位置 右对齐 */
		padding-right: 15px;
	}

    在执行上面的代码后会发现,在没有文字的时候也只是一个width30px的盒子而已,当添加进去了文字之后,盒子会随着字数而自己扩张。