首先，根據事先設計好的圖片對頁面進行模塊劃分 “回”字原理（自我總結）

然後，開始使用Html+css進行架構

頁面實現知識要點：

第一，頁面元素分為塊級元素與行內元素

第二， 元素位置

1）塊級元素會在文檔中單獨占有一行 ----------------在文檔流中 在位置 即從上到小排列

2）行內元素不單獨占一行 -----------------------------------即從左到右排列

3）

第三，改變元素的位置的方法-------浮動

何謂浮動？

html 的樣式使用float使塊級元素脫離文檔流（ 使之從左到有一個跟隨一個，若要其中某一個A不跟隨之前的可對A的樣式進行clear設置 ）

clear的取值有三種：

left：清除該元素A左邊的浮動

right:清除該元素A右邊的浮動

both:清除該元素A兩邊的浮動

特技：誰浮動引起則在本元素中使用清除，並且是清除誰。

第四，順序

行內元素與塊級元素遵循從上到下，從左到右的順序依次渲染在頁面上，所有在設計是需註意元素順序

第五，盒子模型-------針對塊級元素

例如：

（1）padding：10px 表示以內容為中心從上右下左個擴展10px （只有1個值)

（2）padding:10px 5px 表示以內容為中心從上下各擴展10px, 左右各擴展5px （只有2個值)

（3）padding:10px 5px 10px 表示以內容為中心從上10px 左右各5px 下10px （有3個值)。

（4）padding:10px 9px 1px 7px 表示以內容為中心從 上10px, 右9px, 下1px, 左7px （有4個值)

設置padding會擴大boder的大小，若要使boder保持原樣大小， 原則是：以內為準 上邊，左邊的相對位置不變，右邊，下邊變化

margin:由於隔開塊元素與塊元元素

（5）控制div的外框： 使用boder padding margin

第六：CSS定位----------position

1.absolute ：絕對定位

特點:

（1）脫離文檔流，不會單獨占滿一行

（2）方位受top ,left,right,bottom影響

*1：一個塊的top ,left,right,bottom是相對於什麽呢？

1）如果它的父元素做定位，則相對於最近的一個父元素。

2）父元素沒有定位則相對於body

2.相對定位：relativ

特點：

（1）相對定位沒有脫離文檔流，會單獨占一行，

（2）方位受top ,left,right,bottom影響。

（3）相對定位的top ,left,right,bottom相對於塊的最近的一個父元素

3.固定定位 fixed

特點：（1）脫離文檔流，不單獨占一行 （2）top ,left,right,bottom的值相對於body

top ,left,right,bottom只有設置了定位（絕對，相對，固定）的時候才可以用

頁面布局規劃