CSS基础(滑动门，雪碧图，网页布局）

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样式了，要新建一个页面样式，实现三层分离。

 

大概就是这些啦，好好学习，天天向上！