一.  定位：

定位中的z-index:

作用：设置页面中元素的层级关系。

取值：

正整数。

二.  html中标签的嵌套规则：

行内元素：

块级元素：

标签之间是不能够随意嵌套的。

如果一定要嵌套，要满足下面几条：

1.0行内元素只能包含行内元素

2.0块级元素可以包含所有的行内元素和部分块级元素。

3.0p标签，h标签都不能包含块级元素

三.  精灵图：

１  什么是精灵图：

就是将页面上一些较小的图片放在一张大图上。

２  为什么要有精灵图：

最早的时候网速十分有限，为了提升用户的体验我们会将一张大图分解成为多张小图来提高页面的打开速度。但是网速得到提升，为了能够让服务器承载更多的请求，我们要减少浏览器对服务器的请求，最直接的方式，就是将多张小的图片放在一张大图上。从而减轻服务器的压力。而将多张小图放在一张大图上的操作就叫做精灵图，也可以叫做雪碧图，雪碧技术。CSS sPRite.

３  精灵图的使用：

一张大的图片上有很多小的图片，那么如何将这个小的图片拿出来呢？

1.0如果我们需要的一张图片在精灵图，必须要了解这个图片的大小，以级在精灵图上的位置。

比如：我们要淘宝上面的阿里旺旺的图标，得到了宽高为60*60,得到图标所在的位置：0 * 133.

2.0在页面上将这个图片显示出来，在显示的时候一定要注意我们容器的大小一定要和这个图标的大小一样：

比如：我们要html页面上放了一个div，宽高为60*60

3.0将精灵图设置为容器的背景图片，并且根据图片所在的位置将背景图片进行平移：

４  制作精灵图：

1.0精灵图必须是一些小的图片。

2.0精灵图的多个小图之间一定要留有足够的间隙

3.0精灵图的大小一定要大于所有图片中最大小的那个

4.0完成精灵图以后一定要在精灵图的下方留足够的空隙，方便将来再次添加其它的精灵图。

5.0如果是页面上一个像素的背景图片不要放在精灵图上面

四.  综合练习：梅兰商贸（整站的练习）

１  设计师设计出来的图片。

准备元素

２  确定网站的结构：

meiBuy:将来这个凡是与这个网站相关的文件都放在一个叫meiBuy的文本夹中

css:所有的css文件放在css文件夹中

js：所有的js文件都放在js文件夹中

index:网站的首页是index.html;

３  决定页面的开发方式：

 从上到下依次编写：符合我们的认知。（选择）

 从模块化的角度来分析：符合有经验的开发人员。

４  css的初始化：（css reset）

           每个浏览器有自己不同解析标签的方式：为了能够让不同的浏览器显示的页面效果是一样的，我们需要清除浏览器的默认样式:

* {margin: 0; padding: 0;}//我们让你成为历史

css的初始化：

1.0清除标签的margin和padding:

html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img{margin:0;padding:0}
         2.0清除img的边框
                img { border: 0};
         3.0清除li标签之前的小点
                ul{list-style: none;}
         4.0给页面设置一个统一的字体大小和颜色，还要设置body的背景颜色。
                body {font-size: 12px;color: #434343;font-family: "宋体";background-color: “#ffffff”}
         5.0清除浮动
                .clearfix:after {content: "";height: 0;line-height: 0;display: block;visibility: hidden;clear: both;
}
                .clearfix {zoom: 1;}
                6.0a标签设置字体颜色，去掉下划线，以及a:hover
                           a {color: #434343;text-decoration: none;}
                           a:hover {color: green;}
7.0设置浮动：
.fl {float: left;}
.fr {float: right;}
５  开始进行开发：
通栏：默认占浏览器的一整行。
版心：页面中用来存放内容的部分的固定宽度。