在熟悉那些常用的軟體、工具後，我們正式開始開發，在前期準備工作之後，我們要做的事情是寫頁面，也就是網頁佈局。在w3c、菜鳥、慕課網等等網站上都有基礎的 HTML+CSS 知識講解，在初期學習中，跟著教程全部過一遍就差不多了。剛開始寫頁面的時候我們會迷糊，那麼多的標籤、屬性，我該用哪個，有什麼區別等等，然後寫出來的幾個頁面都是亂七八糟的，分不動定位和浮動等很多屬性，接下來我介紹一些我對網頁佈局的理解。

一、入門

1、盒子模型在寫網頁的最開始，我們需要清楚記住一個東西：盒子模型。這是從瀏覽器上截圖下來的一個盒子模型的圖，我們可以清晰的看到從內到外依次是content（內容）、padding（內填充）、border（邊框）、margin（外邊距），看起來很簡單，但是總有新手會記不住，至少我學生時代老師第一次講我是聽不明白的。

2、頁面結構隨便開啟一個網站，都可以清晰的看到網站大致有頭部、中間、底部三部分構成，這樣我們就知道一個網頁首先可以分成三個部分，我的建議是先寫頭部、底部最後寫中間內容。頭部、底部一般都是公共的，整個網站共用一個，那麼，就可以單獨建一個檔案header.html、footer.html分開來寫頭部、底部，然後用一個模組外掛在每個頁面對應的位置引入。

頭部主要是一個導航欄，整個網站根據這個導航欄開發細緻功能，而底部主要是開發這個網站公司的資訊和備案號等。中間內容：這裡就是整個網站的主要內容，展示給使用者看的資料，根據不同類別網站有不同程度複雜的佈局，還有編寫習慣，我建議把網頁分成頭部、底部、Banner、內容幾個大塊去寫，寫完一塊看下效果再繼續寫。

3、推薦幾個入門例項一開始寫頁面新建的專案資料夾大致是這樣的目錄：demo資料夾 > css資料夾 + images資料夾 + index.html

31、百度一下首頁網站地址：https://www.baidu.com/這是一個很簡單的頁面，頁面元素比較少，是我入門的第一個靜態頁面。

32、企業類首頁（貓咪領養網）網站地址：http://www.maomilingyang.com/這型別的網站首頁比較簡潔，功能不多，中間內容一般是兩列布局。

33、電商類網站首頁（蘑菇街）網站地址：http://www.mogujie.com/這型別的網站佈局複雜，功能繁多，最重要的是在寫頁面的時候要細緻，要有耐心，在目前熱門的電商網站有很多，我建議是選擇比較複雜的網站首頁去寫佈局。

二、常用佈局

經過以上3個例項的練習，基本上把學習過的HTML+CSS語法都過一遍，平時會用到的大多數屬性都用上了，下面就來分析常用的佈局。

1、預設佈局（已省略Banner）

<div id="Page">
    <div id="Header" class="bg">我是頭部內容</div>
    <div id="Content">
        <div class="cont-left">我是內容1</div>
        <div class="cont-right">我是內容2</div>
    </div>
    <div id="Footer" class="bg">我是底部內容</div>
</div>

#Page{
    text-align: center;
}
.bg{
    background-color: pink;
}
#Header{
    width: 100%;
    height: 60px;
    line-height: 60px;
}
#Content{}
#Content div{
    /*高度不是寫死，內容撐開*/
    min-height: 500px;
    line-height: 500px;
}
#Footer{
    width: 100%;
    height: 200px;
    line-height: 200px;
}

2、單列布局該佈局比較簡單，大多用於功能不多的網站首頁，該佈局通常有固定的寬度，並且居中，高度由內容撐開，有以下兩個應用場景：

21、需求：上下固定，中間滾動，這種佈局移動端使用的更多。只需要給頭部和底部加上絕對定位，再新增內容標籤（注意：父元素不能有定位）PS：固定可以使用Fixed，但是有相容性問題

#Header{
    position: absolute;
    top: 0;
}
#Content{
    position: absolute;
    top: 60px;
    bottom: 200px;
    width: 100%;
    overflow-y: scroll;
}
#Footer{
    position: absolute;
    bottom: 0;
}

22、需求：內容過少時底部固定，過多時正常排列。有時候頁面內容很少，高度不滿一屏看起來就很不舒服，版面很醜，主要是因為高度不夠，所以最重要就是要設定html,body的高度。

html{
    height: 100%;
}
body{
    min-height: 100%;
    position: relative;
}
#Footer{
    position: absolute;
    bottom: 0; 
}

3、兩列布局多用在後臺管理系統和分欄展示內容的頁面，這裡講解的是後臺上的兩列布局，一邊導航一邊內容的。大多是左/右邊固定寬度，右/左邊寬度自適應，或者左右寬度都自適應的情況。實現的方法有很多種，這裡以左邊導航右邊內容為例。

#Page{
    text-align: center;
}
.bg{
    background-color: pink;
}
#Header{
    width: 100%;
    height: 60px;
    line-height: 60px;
}
#Content div{
    height: 500px;
    line-height: 500px;
}
#Footer{
    width: 100%;
    height: 200px;
    line-height: 200px;
}

31、Float + BFC利用左側浮動，右側盒子通過overflow: auto;形成了BFC。（注意：父元素要清浮動）

#Content{
    width: 100%;
    overflow: hidden;
}
.cont-left{
    float: left;
}
.cont-right{
    overflow: auto;
    background-color: skyblue;
}

32、Flex: 彈性佈局的方法，相容性有些不足，很好的一個方法。

#Content{
    display: flex;
    /*高度自動*/
    align-items: flex-start;
}
.cont-left{
    /*固定寬度才設定，自適應不設*/
    width: 100px;
    flex: 0 0 auto;
}
.cont-right{
    flex: 1 1 auto;
    background-color: skyblue;
}

33：Grid：柵格佈局，相容性有些不足。

#Content{
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: start;
}
.cont-left{
    box-sizing: border-box;
    grid-column: 1;
}
.cont-right{
    box-sizing: border-box;
    grid-column: 2;
    background-color: skyblue;
} 

3、三列布局這是比較複雜的佈局，適合有複雜操作功能的網頁，如各大電商網站。實現的方法同樣有很多種，如Float、BFC、聖盃、雙飛翼、Flex、絕對定位。31、BFC(塊格式化上下文)規則規定：BFC不會和浮動元素重疊

<div id="Page">
    <div id="Header" class="bg">我是頭部內容</div>
    <div id="Content">
        <div class="cont-left">我是內容1</div>
        <div class="cont-right">我是內容2</div>
        <div class="cont-middle">我是內容0</div>
    </div>
    <div id="Footer" class="bg">我是底部內容</div>
</div>

.cont-left{
    float: left;
    width: 100px;
}
.cont-right{
    float: right;
    width: 100px;
}
.cont-middle{
    overflow: hidden;
    background-color: skyblue;
}

32、聖盃：左、中、右三欄都通過float進行浮動，然後通過負值margin進行調整

<div id="Page">
    <div id="Header" class="bg">我是頭部內容</div>
    <div id="Content">
        <div class="cont-middle">我是內容0</div>
        <div class="cont-left">我是內容1</div>
        <div class="cont-right">我是內容2</div>
    </div>
    <div id="Footer" class="bg">我是底部內容</div>
</div>

#Content{
    overflow: hidden;
}
.cont-left{
    position: relative;
    float: left;
    width: 100px;
    margin-left: -100%;
    background-color: skyblue;
}
.cont-right{
    position: relative;
    float: left;
    width: 100px;
    margin-left: -100px;
    background-color: skyblue;
}
.cont-middle{
    float: left;
    width: 100%;
}

33、絕對定位：簡單，優先載入主體。

#Content{
    height: 500px;
}
.cont-middle{
    position: absolute;
    left: 200px;
    right: 200px;
}
.cont-left{
    position: absolute;
    left: 0;
    width: 200px;
    background-color: skyblue;
}
.cont-right{
    position: absolute;
    right: 0;
    width: 200px;
    background-color: skyblue;
}

三、分享主流網站初始化

考慮到瀏覽器的相容問題，不同瀏覽器對標籤有不同的預設值，我們在每個頁面的開始會進行初始化CSS，最簡單的初始化方法是*{margin:0;padding:0;},一開始我也是這麼寫的，這樣寫最快，但是如果網站很大，就不建議這樣寫，這樣網站載入需要很久，會把所有標籤初始化一遍。我們先看一下網上能找到的主流網站的初始化方案：

[預設效果]

<div class="box">
    <ul>
        <li>小幸運</li>
        <li>原來你是我最想留住的幸運</li>
        <li>原來我們和愛情，曾經靠得那麼近</li>
        <li>那為我對抗世界的決定</li>
        <li>那陪我淋的雨，一幕幕都是你</li>
        <li>一塵不染的真心，與你相遇 好幸運</li>
    </ul>
</div>

1、網易官網

html {overflow-y:scroll;} 
body {margin:0; padding:29px00; font:12px"\5B8B\4F53",sans-serif;background:#ffffff;} 
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;} 
table,td,tr,th{font-size:12px;} 
li{list-style-type:none;} 
img{vertical-align:top;border:0;} 
ol,ul {list-style:none;} 
h1,h2,h3,h4,h5,h6{font-size:12px; font-weight:normal;} 
address,cite,code,em,th {font-weight:normal; font-style:normal;} 

2、騰訊官網

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} 
body{font:12px"宋體","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;} 
a{color:#2d374b;text-decoration:none} 
a:hover{color:#cd0200;text-decoration:underline} 
em{font-style:normal} 
li{list-style:none} 
img{border:0;vertical-align:middle} 
table{border-collapse:collapse;border-spacing:0} 
p{word-wrap:break-word} 

3、新浪官網

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;} 
body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋體","Arial Narrow";} 
ul,ol{list-style-type:none;} 
select,input,img,select{vertical-align:middle;} 
a{text-decoration:none;} 
a:link{color:#009;} 
a:visited{color:#800080;} 
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;} 

4、淘寶官網

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } 
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } 
h1, h2, h3, h4, h5, h6{ font-size:100%; } 
address, cite, dfn, em, var { font-style:normal; } 
code, kbd, pre, samp { font-family:couriernew, courier, monospace; } 
small{ font-size:12px; } 
ul, ol { list-style:none; } 
a { text-decoration:none; } 
a:hover { text-decoration:underline; } 
sup { vertical-align:text-top; } 
sub{ vertical-align:text-bottom; } 
legend { color:#000; } 
fieldset, img { border:0; } 
button, input, select, textarea { font-size:100%; } 
table { border-collapse:collapse; border-spacing:0; } 

5、雅虎

html {overflow-y: scroll;} 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; }
body { background:#fff; color:#555; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; }
td,th,caption { font-size:14px; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;}
a { color:#555; text-decoration:none; }
a:hover { text-decoration:underline; }
img { border:none; }
ol,ul,li { list-style:none; }
input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; }
table { border-collapse:collapse; }
.clearfix:after {content: "."; display: block; height:0; clear:both; visibility: hidden;}
.clearfix { *zoom:1; }

四、網頁開發流程

入門和學習了佈局之後，接下來就是開始正式寫頁面的準備工作，一個P端網頁在開發的時候有很多準備工作，準備工作做好了對於後面的維護也是比較簡單、友好，要爭取頁面一次寫完就很好，不要後期又反過來調整頁面，因此，在寫頁面的時候一定要專心、精準、仔細。

1、網站初始化：其實用哪個初始化方案都沒關係，重要的是對不同專案進行細微調整，我們分析一下個人的初始化方案怎麼寫：

11、重置樣式：主要有以下6點，不是寫死，按需新增標籤與屬性
    11-1、去除預設邊距（不是所有，是使用到的）
    11-2、整體（背景顏色、字型）
    11-3、標題
    11-4、列表
    11-5、表單
    11-6、超連結
    11-7、圖片
12、通用樣式：主要有字號、a的狀態、清除浮動、居中等等，其中清除浮動和居中這些方式有很多，這裡展示的是我個人喜歡用的。
13、模組樣式：即頁面每一大模組區域的共用樣式。
14、書寫順序：編輯器中有格式化工具，可以去配置表中配置成自己喜歡的格式，建議定位和自身屬性放在前面。

reset.css

/* ==========================================================================
  1、重置項
============================================================================ */
body { margin: 0; padding: 0;}
body { background-color: #fff; font: 12px"微軟雅黑";}
h1, h2, h3, h4, h5, h6 { font-weight: normal;}
ol, ul, li { list-style: none;}
select, input, button, textarea { border: 0; outline: none; background-color: #fff;}
a { text-decoration: none; color: #000;}
img { border: none; border: 0;}

/* ==========================================================================
  2、公共項
============================================================================ */
/* 頁面容器 */
#Page {}

/* 展示區域 */
.contBase { min-width: 980px; margin: 0 auto;}

/* 字號 */
.font-s { font-size: 10px;}
.font-m { font-size: 14px;}
.font-l { font-size: 16px;}
.font-xl { font-size: 18px;}

/* a的4個狀態 */
a:link {}
a:visited {}
a:hover {}
a:active {}

/* 清除浮動的2種方式 */
.clearBFC { overflow: hidden;}
.clearFix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden;}
.clearFix { zoom: 1;}

/* 水平居中的3種方式 */
.center-block{margin: 0 auto;}
.center-inline{text-align: center;}
.center-auto{position: absolute;left: 0;right: 0;margin: auto;}

2、模組程式碼：網站進行初始化之後可以寫頁面了，我建議把公共的模組抽取出來，樣式寫到同一個檔案內。

section.css
/* ==========================================================================
  1、Header
============================================================================ */
#Header{}

/* ==========================================================================
  2、Banner
============================================================================ */
#Banner{}

/* ==========================================================================
  3、Footer
============================================================================ */
#Footer{}

3、接著就是這個頁面的程式碼，如index.css，注意的是，建議在每個頁面的樣式檔案里加上適配螢幕的程式碼，1920設計圖上的效果適應大部分螢幕，但是小螢幕、大螢幕的效果還是有偏差，或者希望在手機上開啟頁面也不會是亂，就需要寫一寫簡單的適配程式碼，如單列布局的寬度等。

index.css
/* 大螢幕 */
@media (min-width:2560px){}

/* 中小螢幕 */
@media (min-width:1024px) and (max-width:1365px){}

/* 小螢幕 */
@media (min-width:980px) and (max-width:1023px){}

五、相容IE

很不幸的，如果你的網站被要求相容IE8，那麼，需要按需載入檔案，可以在head部分加判斷條件，具體相容方案在這裡就不做分析了。

<!--[if gt IE 7]><link rel="stylesheet" type="text/css" href="ie8.css"/><![endif]-->
<!--[if gte IE 8]><link rel="stylesheet" type="text/css" href="ie8.css"/><![endif]-->

<!--[if lte IE 8]>
    <div style="width:980px;margin:0 auto;text-align:center;font-size:18px;">
        建議升級您的IE瀏覽器，或使用Google Chrome、Firefox等高階瀏覽器，將會得到更好的體驗！
    </div>
<![endif]-->