滑动门的写法理解

最新推荐文章于 2021-06-03 03:04:44 发布

呼吸哥

最新推荐文章于 2021-06-03 03:04:44 发布

阅读量702

点赞数 1

分类专栏： CSS

CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在说明方法之前，先看一下效果图：

在border-radius出现之前，实现圆角效果使用的是滑动门。滑动门是利用背景图像的可层叠性，并允许他们在彼此之上进行滑动，以创造一些特殊的效果。

要想让滑动门适用于多种场合，左右两个角必须透明，以此露出背景颜色，若是左右压中间，左右角的透明部分露出的是中间的颜色，所以只能改成中间压左右，中间部分可以重叠，已达到宽度自适应的效果。

切图技巧，可以将按钮的背景图分为三个部分，一个部分是左边带有圆角的部分，一个部分是中间的，最后一个部分是右边带有圆角的部分，然后将三个部分的图拼接成雪碧图，这样可以直接通过定位实现图片的选择。注意：因为要将三个图拼成一张图，所以除了高度一致外，最好宽度也是一样的，效果图如下：

接下来讲解代码的实现部分：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>huadonmen</title>
	<style>
		body,ul,li{margin: 0;padding: 0}
		li{list-style: none;}
		a{text-decoration: none;}
		strong{font-weight: normal;}

		.box{
			width: 100%;
			margin: 100px auto;
			background-color: #970e02;
		}
		.nav{
			width: 960px;
			height: 36px;
			margin: 0 auto;
			padding-top: 8px;
		}
		.nav li{
			float: left;
			height: 28px;
			margin-right: 2px;
		}
		.nav a{
			float: left;
			color: #fff;
			line-height: 28px;
			font-size: 15px;
			font-family: Arial;
			text-align: center;
		}
		.nav strong{
			float: left;
		}
		.nav span{
			float: left;
			padding: 0 16px;
		}
		.nav a:hover{
			background: url(./img/bg.jpg) repeat-x 0 -56px;
		}
		.nav strong:hover{
			background: url(./img/bg.jpg) no-repeat;
		}
		.nav span:hover{
			background: url(./img/bg.jpg) no-repeat right -28px;
		}
	</style>
</head>
<body>
	<div class="box">
		<ul class="nav">
			<li class="cative"><a href=""><strong><span>HOME</span></strong></a></li>
			<li><a href=""><strong><span>LATEST ARRIVALS</span></strong></a></li>
			<li><a href=""><strong><span>MEN'S</span></strong></a></li>
			<li><a href=""><strong><span>BRANDS</span></strong></a></li>
			<li><a href=""><strong><span>FREEBIES</span></strong></a></li>
			<li><a href=""><strong><span>GIFT CARDS</span></strong></a></li>
		</ul>
	</div>
</body>
</html>

本案例中用滑动门实现圆角和渐变色的按钮的原理是：

　　①将标签a包围标签strong和span，因为层级的关系，a的层级是在最下面，那么当strong和span的层级可以覆盖a标签，所以就是将a标签的背景图片置为按钮中间可以重叠的部分，然后沿着x轴进行重复，strong标签的背景图片置为左边圆角的部分，span标签的背景图片置为右边圆角的部分，这样就可以左右圆角覆盖中间的部分，实现按钮的基本样式。

　　②这个过程中还有最重要的一点是，需要将a strong span的float都写成left，这样才不会出现中间有缝隙。

　　③如果span中的内容越长，那么内容就会撑开按钮的宽度，自让而然的就让按钮自适应了。除此之外，我设置了鼠标经过事件和激活事件，即当鼠标经过按钮的时候，按钮就会出现如图所示的效果。

　　另外需要说的一点是，如何定位雪碧图的位置。background的定位其实是position，这个定位的方法有两种，一种是具体的数值，一种是直接用位置的英文拼写，在之前的文章中也写到了这个属性的使用方法，详情请看HTML5基础之代码入门。position的定位是通过x和y轴的位置进行定位的。如下所示，

　　x: left center right

　　y: top center bottom

　　或者

　　x: ##px

　　y: ##px

呼吸哥

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
滑动门的写法理解

在说明方法之前，先看一下效果图：在border-radius出现之前，实现圆角效果使用的是滑动门。滑动门是利用背景图像的可层叠性，并允许他们在彼此之上进行滑动，以创造一些特殊的效果。要想让滑动门适用于多种场合，左右两个角必须透明，以此露出背景颜色，若是左右压中间，左右角的透明部分露出的是中间的颜色，所以只能改成中间压左右，中间部分可以重叠，已达到宽...
复制链接

扫一扫