2 精灵图
2.1 什么是精灵图
CSS Sprites 也称之为精灵图或雪碧图，是一种背景图片的应用处理方式，将很多小图片合并到到一张大图中去。把整个大图作为背景图，然后通过 background-position 属性讲合适的图片显示到元素上。
2.2 精灵图的优点
多个元素使用的只一张背景图像，减少图片的请求次数，图片只需下载一次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
display: inline-block;
background: url(images/abcd.jpg) no-repeat;
}
.aa{
width: 108px;
height: 110px;
background-position: 0 -9px;
}
.nn{
width: 112px;
height: 110px;
background-position: -255px -276px;
}
.dd{
width: 97px;
height: 107px;
background-position: -363px -8px;
}
.yy{
width: 110px;
height: 110px;
background-position: -367px -556px;
}
</style>
</head>
<body>
<div class="aa"></div>
<div class="nn"></div>
<div class="dd"></div>
<div class="yy"></div>
</body>
</html>
2.4 background-position
background-position 可以调整背景图像的位置，三种方式可以设置位置
使用关键字：
background-position: left top;
background-position: right;
background-position: top;
/* left right center*/
/* top bottom center*/
通过长度设置图像左上角在元素上的坐标：
background-position: 100px 20px;
background-position; 20px; /* 20px center */
使用百分比设置背景图像位置：
background-position: 30% 30%;
/* 背景图像上 30%，30%的点 与 元素上 30%，30% 的点重合 */
3 页面布局
3.1 样式重置
1. reset.css
2. normalize.css
3.2 版心
.container {
margin: 0 auto;
width: 1000px;
}
4 favicon 图标
<link rel="shortcut icon" href="favicon.ico">
ico 制作工具：
- 在线工具 http://www.ico51.cn/
- 在线工具 http://www.bitbug.net/
3155
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
