一.  定位：

定位中的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;}
５  開始進行開發：
通欄：默認占瀏覽器的一整行。
版心：頁面中用來存放內容的部分的固定寬度。