一. 定位：
定位中的z-index:用的比较少
作用：设置页面中元素的层级关系。
取值：
正整数。
二标签的嵌套关系
元素分为：行内元素 块级元素
标签之间是不能随意嵌套的，如果一定要嵌套就要满足下面几条。
*1 行内元素只能包含行内元素。
2 块级元素可以包含行内元素，部分块级元素。
3 p，h都不能包含块级元素。*
精灵图
什么是精灵图呢？
页面上较小的图片放在大图片上面。
为什么要有精灵图呢？
最早的时候网速十分有限，为了提升用户的体验我们会将一张大图分解成为多张小图来提高页面的打开速度。但是网速得到提升，为了能够让服务器承载更多的请求，我们要减少浏览器对服务器的请求，最直接的方式，就是将多张小的图片放在一张大图上。从而减轻服务器的压力。而将多张小图放在一张大图上的操作就叫做精灵图，也可以叫做雪碧图，雪碧技术。css sprite.
精灵图的使用：
一张大的图片有很多晓得图片，那么怎么把小的图片拿出来。
1.如果我们需要的一张图片在精灵图上，那么我们必须了解这个图在精灵图的位置和大小。我们用Firework可以知道图片的宽高。
比如：我们要淘宝精灵图上的阿里旺旺图标，利用fw知道了大小60*60，也知道位置是：（0，133）
2.在页面上将这个图片显示出来，一定要注意我们容器的大小一定要和图片的大小一样。比如我们在html文件上放了一个div宽和高都是60*60。
3.将精灵图设置为容器的背景图片，并且根据图片所在的位置将背景图片进行平移：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0px;
padding: 0px;
}
.one{
width: 146px;
height: 156px;
background: url(1.png) no-repeat 0px -338px;
}
</style>
</head>
<body>
<div class="one"></div>
</body>
</html>注意：向下平移是负，向右平移也是负。
制作精灵图
1.精灵图必须是一些小图。
2.精灵图上面的多个小图要留有足够的间隙。
3.精灵图大小一定要大于所有图片中最大的那个。
4.完成精灵图之后要在精灵图的下方留有足够的空间，方便以后加图。
5.如果是1px的背景图片最好不要放在精灵图上面。
利用fw就可以制作了！放完之后找到画布按符合画布。
172
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
