HTML学习笔记

斯人已远，尤赖余温

于 2018-05-24 23:32:06 发布

阅读量102

点赞数

分类专栏： HTML基础文章标签： HTML

本文链接：https://blog.csdn.net/qq_20901663/article/details/80445426

版权

HTML基础专栏收录该内容

13 篇文章 0 订阅

订阅专栏

sprite技术和sprite应用--滑动门

sprite--雪碧技术小妖精（没学会sprite技术，学会它的几个称呼，尴尬）。sprite技术是一种背景的处理方式已达到一定的效果，不需要借助script，就能拥有好的效果，而滑动门技术是雪碧技术的升级。

都是背景处理技术。

下面实战：

<HTML lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<title>小妖精</title>
		<link href="css/main.css" rel="stylesheet" type="text/css"/>
		
	</head>
	
	<body>
		<span class="textf"></span>
		<span class="texta"></span>
		<span class="textn"></span>
		<span class="textg"></span>
		<span class="textt"></span>
		<span class="texte"></span>
		<span class="textn"></span>
		<span class="textg"></span><br />
		<div class="nav">
			<ul>
				<li>
					<a href="#"><span>首ssss页</span> </a>
				</li>
				<li>
					<a href="#"><span>首页</span> </a>
				</li>
			</ul>
		</div>
	</body>
</html>

*{
	margin: 0;
	padding: 0;
}
body{
	background:#fff;
}
span{
	
	display:inline-block;
	vertical-align:middle;
}
span.texta{
	width:107px;
	height:109px;
	background:url(../img/abcd.jpg) no-repeat 0 -8px;
}
span.textf{
	width:93px;
	height:109px;
	background:url(../img/abcd.jpg) no-repeat 0 -139px;
}
span.textn{
	width:112px;
	height:111px;
	background:url(../img/abcd.jpg) no-repeat -256px -276px;
}
span.textg{
	width:107px;
	height:109px;
	background:url(../img/abcd.jpg) no-repeat -98px -142px;
}
span.textt{
	width:100px;
	height:111px;
	background:url(../img/abcd.jpg) no-repeat -368px -416px;
}
span.texte{
	width:107px;
	height:109px;
	background:url(../img/abcd.jpg) no-repeat -483px -9px;
}
.nav{
	height:33px;
	background:#212020;
}
.nav li{
	float:left;
}
 a{
	display:inline-block;
	height:33px;
	background:url(../img/ao.png) no-repeat 0;
	padding-left:15px;
	line-height:33px;
}
a span{
	display: inline-block;
	height: 33px;
	background: url(../img/ao.png) no-repeat right;
	padding-right: 15px;
}
a:hover{
	background:url(../img/to.png) no-repeat 0;
	color:#f00;
}
a:hover span{
	background:url(../img/to.png) no-repeat right;
	
}

上面就是背景处理技术的运用，刚开始做的时候会遇到这样或是那样的错误，遇到一个门槛就是滑动门技术的运用上，怎么说呢，就是在给span加css代码时，css的背景会被挤下来，就是挤到下一行，，火来发现是各种代码的打错。可以理解为是对雪碧技术的精髓理解不够，光只知道：用a标签去包裹span标签，不清楚深层次底层运作是padding与盒模型的结合物。讲完这段话感觉好像理解很透彻。一切似乎返璞归真一般。回到了过去盒子模型的讲解；巴拉巴拉。。。。。

斯人已远，尤赖余温

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记

sprite技术和sprite应用--滑动门 sprite--雪碧技术小妖精（没学会sprite技术，学会它的几个称呼，尴尬）。sprite技术是一种背景的处理方式已达到一定的效果，不需要借助script，就能拥有好的效果，而滑动门技术是雪碧技术的升级。都是背景处理技术。下面实战：&lt;HTML lang="zh-CN"&gt; &lt;head&gt; &lt;meta c...
复制链接

扫一扫

专栏目录