学习CSS Sprite雪碧图-大灰牛博客

说明:为了减少http请求数量，加速网页内容显示，很多网站的导航栏图标、登录框图片等，使用的并不是标签，而是CSS Sprite雪碧图。本课程分析了CSS Sprite雪碧图的实现原理，详细讲解制作方法，实现完整效果，让你快速掌握CSS Sprite雪碧图技术。
课程学习链接:https://www.imooc.com/learn/93

学习文件存放github地址: https://github.com/wanghuiwiki/Learning-notes

课程目录

第1章 CSS Sprite雪碧图介绍及实现原理
第2章 CSS Sprite雪碧图实现方式
第3章 CSS Sprite雪碧图的应用
第4章编程挑战

第1章 CSS Sprite雪碧图介绍及实现原理

1-1CSS Sprite雪碧图使用场景

1.静态图片,不随用户信息的变化而变化
2.小图片,图片容量比较小
3.一些大图不建议拼成雪碧图{加载量比较大]
有效减少http请求数量
加速内容显示
每请求一次,就会和服务器链接一次
建立链接是需要额外时间的.

1-2CSS Sprite雪碧图实现原理

主要运用css属性background-position,调取对应的坐标/如下图:

由上可得|控制一个层,可显示的区域范围大小,通过一个窗口,进行背景图的滑动.

第2章 CSS Sprite雪碧图实现方式

2-1 CSS Sprite雪碧图实现方式

介绍使用PS手动拼图和使用sprite工具自动生成雪碧图的方法
CssGaga-从下载安装到使用(内附下载地址)

第3章 CSS Sprite雪碧图的应用

通过简单的导航实例，完成静态页面,讲解如何设置background-position属性来使用css sprite雪碧图

3-1 静态页面实现

3-2 编程练习代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			ul{
				list-style: none;
			}
			h3{
				margin: 0;
			}
			li h3{
				font-size: 14px;
				font-weight: 400;
			}
			li{
				height: 31px;
				line-height: 31px;
				border-bottom: 1px solid #dedede;
			}
			.cat{
				width: 150px;
				border:1px solid #f8f8f8;
				background: #fafafa;
			}
		</style>
	</head>
	<body>
		<ul class="cat">
			<li class="cat-1"><i></i><h3>服装内衣</h3></li>
			<li class="cat-2"><i></i><h3>鞋包配饰</h3></li>
			<li class="cat-3"><i></i><h3>运动户外</h3></li>
			<li class="cat-4"><i></i><h3>珠宝手表</h3></li>
			<li class="cat-5"><i></i><h3>手机数码</h3></li>
			<li class="cat-6"><i></i><h3>家电办公</h3></li>
			<li class="cat-7"><i></i><h3>护肤彩妆</h3></li>
			<li class="cat-8"><i></i><h3>母婴用品</h3></li>
		</ul>
		<!-- 以下为可删除部分 -->
		<hr>
		<blockquote>
		任务<br>
		一、准备一个空白的HTML页面，同时完成css reset样式<br>
		
		  提示:<br>
		  1.reset样式可以参考别的大型网站的reset规则。<br>
		  2.要添加utf-8的meta标签<br>
		二、完成页面当中的展示列表HTML的结构代码<br>
		
		  提示:<br>
		  1.注意标签的语义化，无序列表需使用ul和li。<br>
		  2.标题部分要使用h3标签。<br>
		  3.每个li结构当中会有一个i标签用来展示icon。<br>
		三、为列表的容器添加class和样式，同时reset列表本身的容器<br>
		
		提示:<br>
		  1.注意要reset H3的默认样式。<br>
		  2.li和ul要去掉默认的样式。<br>
		  3.为ul的容器div增加class，并设置样式。<br>
		</blockquote>
	</body>
</html>

3-3 CSS Sprite 应用

3-4 编程练习代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			ul{
				list-style: none;
				margin: 0;
				padding: 0;
			}
			h3{
				margin: 0;
			}
			li h3{
				font-size: 14px;
				font-weight: 400;
			}
			li{
				height: 31px;
				line-height: 31px;
				border-bottom: 1px solid #dedede;
			}
			.cat{
				width: 150px;
				border:1px solid #f8f8f8;
				background: #fafafa;
			}
			/*以下为新增代码\css雪碧图样式*/
			li i{
				background: url(images/sidebar.png);
				float: left;
				display: inline;
				width: 30px;
				height: 25px;
				margin: 3px 10px 0 0;
			}
			.cat-1 i{
				background-position: 0 0;
			}
			.cat-2 i{
				background-position: 0 -24px;
			}
			.cat-3 i{
				background-position: 0 -48px;
			}
			.cat-4 i{
				background-position: 0 -72px;
			}
			.cat-5 i{
				background-position: 0 -96px;
			}
			.cat-6 i{
				background-position: 0 -120px;
			}
			.cat-7 i{
				background-position: 0 -144px;
			}
			.cat-8 i{
				background-position: 0 -168px;
			}
			.cat-9 i{
				background-position: -40px 0;
			}
		</style>
	</head>
	<body>
		<ul class="cat">
			<li class="cat-1"><i></i><h3>服装内衣</h3></li>
			<li class="cat-2"><i></i><h3>鞋包配饰</h3></li>
			<li class="cat-3"><i></i><h3>运动户外</h3></li>
			<li class="cat-4"><i></i><h3>珠宝手表</h3></li>
			<li class="cat-5"><i></i><h3>手机数码</h3></li>
			<li class="cat-6"><i></i><h3>家电办公</h3></li>
			<li class="cat-7"><i></i><h3>护肤彩妆</h3></li>
			<li class="cat-8"><i></i><h3>母婴用品</h3></li>
			<!-- 修改X轴坐标 -->
			<li class="cat-9"><i></i><h3>其他分类</h3></li>
		</ul>
		<!-- 以下为可删除部分 -->
		<hr>
		<blockquote>
			一、完成列表的结构后开始为列表中li i添加雪碧图样式<br>
			提示:<br>
			  1.首先为li添加不同的class，因为他们的background position值是不同的<br>
			  2.根据li上添加的class，书写响应的样式<br>
			  3.注意position的值为负数，因为雪碧图使用的坐标系是第四象限
		</blockquote>
	</body>
</html>

第4章编程挑战

要实现一个这样登陆框的效果，需要写出完整的HTML和CSS代码

1.注意标签语义化，按钮要使用Button，同时要reset button 默认样式。
2.表单使用form，输入框使用input，表单要使用css美化，例如背景色和边框等。
3.按钮样式要使用雪碧图完成。

编程挑战代码

<!--
来源网址https://img1.sycdn.imooc.com/down/539a9c2300018a2d00000000.rar
-->
<html>
	<head>
		<style>
			blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {
				margin: 0;
				padding: 0;
			}

			.container {
				width: 220px;
				margin-right: 35px;
				background: #ebf2fa;
				border: 1px solid #d4d4d4;
				border-bottom-color: #AAA;
				border-top: 0;
				height: 692px;
				box-shadow: 0 1px 1px #CCC;
				background: #ebf2fa url(images/sidebar-bg.png) left top no-repeat;
				margin-top: -2px;
			}
			.login-form {
				padding: 35px 15px 15px;
			}
			.login-form dl {
				line-height: 20px;
			}
			.login-form dl.pwd {
				margin: 15px 0 0;
			}
			.bottom {
				margin-top: 15px;
			}
			.top dd,.pwd dd{
				width: 186px;
				background: #FFF url(images/bg.png) 0 -76px no-repeat;
				border: 1px solid #adb6c9;
				border-radius: 3px;
				height: 32px;
				box-shadow: 0 0 1px #FFF;
				padding: 1px;
			}
			.login-form .input-text {
				background: transparent;
				font-size: 14px;
				height: 32px;
				line-height: 32px;
				padding: 0;
				margin: 0 0 0 30px;
				width: 155px;
				border: 0;
			}

			.login-btn {
				width: 190px;
				height: 38px;
				text-indent: -9999em;
				border: 0;
				background: url(images/sp.png) no-repeat;
				cursor: pointer;
			}

			.regnow {
				margin: 0 15px;
				padding: 17px 0 15px;
				
			}

			.regnow input{
				background-position: 0 -38px;
				border: 0;
				padding: 0 0 3px 0;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<form method="post" class="login-form">
				<dl class="top clearfix">
					<dd>
						<input type="text" name="email" class="input-text">
					</dd>
				</dl>
				<dl class="pwd clearfix">
					<dd>
						<input type="text" name="email" class="input-text">
					</dd>
				</dl>
				<dl class="bottom">
					<input type="submit" class="input-submit login-btn" value="登录">
				</dl>
			</form>
			<div class="regnow">
				<input type="button" class="input-button login-btn" value="注册" >
			</div>
		</div>
	</body>
</html>

转载请注明：大灰牛博客 » 学习CSS Sprite雪碧图

第1章 CSS Sprite雪碧图介绍及实现原理

第2章 CSS Sprite雪碧图实现方式

第3章 CSS Sprite雪碧图的应用

第4章 编程挑战

与本文相关的文章

第4章编程挑战