3.11.2017
这一篇主要是关于滑动门技术的学习，还有雪碧图（sprite），也就是精灵图，还有一点昨天的css可见性的回顾，下面先来回顾下吧
CSS可见性（元素可见性）
overflow： hidden； 将超出部分隐藏（部分隐藏）
display: none; 元素隐藏（全部隐藏）（隐藏元素不占位置）
display: block; 显示元素
visibility： hidden； 隐藏元素（全部隐藏）（隐藏元素占位置）
然后就是关于滑动门的讲解，现在的页面中好多地方都会用到滑动门，一般用作于导航背景。
滑动门：根据文本自适应大小，根据背景的层叠性制作，并允许他们在彼此之上进行滑动，以创造出一些特殊的效果。
滑动门有两个部分：
li -- 左边固定不动的部分，背景左对齐
a -- 右边随着内容变宽的部分，背景右对齐
li {
float: left;
height: 33px;
line-height: 33px;
padding-left: 14px;
background: url("weixin.png") left -192px;}
a {
float: left;
height: 33px;
padding-right: 14px;
background: url("weixin.png") right -192px;}
li:hover {
background-position: left -144px;
}
li:hover a {
background-position: right -144px; }
雪碧图（sprite）也称精灵图
由来：因为网页上有可能有很多小的图片用来做效果，页面上每一张图片都会需要向服务器请求一次，服务器压力很大。把小图集合在一张大图上，将来用到的时候，一次性把小图全都拿过来，这样就会减轻服务器的压力。
雪碧图的使用：用大图作为背景图片，再使用background-position属性控制要显示的区域。
.btn {
width: 86px;
height: 34px;
background: url("qq.png") no-repeat -350px -110px;
}
然后就是CSS初始化，这个的目的是为了控制所有的浏览器显示的结果一致，重置掉所有的默认样式，可以更加灵活地控制每一个标签的样式。
不推荐使用 *{margin：0；padding：0；} 因为通配符选择器会对页面中的所有标签产生样式设置，大大的增加了服务器的请求次数，也让样式设置不灵活了。
Css初始化一般是单独写在一个css文件中，然后在HTML页面中的head里使用link标签引用。
最后就是关于网页布局的思路
1、 在我们要开始做一个页面的时候，要首先搭建好目录，在一个大的文件夹里面要有css文件夹，image文件夹，如果页面较多建议再建立一个html的pages文件夹，还有js文件夹等等，这样做的主要目的是为了实现三层分离，还有就是便于代码的管理，也便于后期的维护，严格准守w3c标准。
2、 准备好css初始化文件，可以先写上要常用到的和公用代码，后面如果有需要可以后续添加，初始化文件要独立分开，不能和其他的css文件混合。需要使用时再引用。
3、 准备好这些之后，拿到设计图，要开始分析页面结构，一般是纵向排列，像是堆积木一样一个一个的块搭建的，不同的是页面的搭建是从上往下。
4、 分析完成后开始搭建页面，一块一块的来，在给元素使用选择器命名的时候要有意义，这也是为了代码的整洁和写样式的时候不会发生命名重复（除非是公共样式之类的），还要定好版心，一般页面的版心是固定的，不会改变。版心就是页面的中间部分。
5、 页面搭建好之后就可以开始写css样式了，要新建一个页面样式，实现三层分离。
大概就是这些啦，好好学习，天天向上！