本例參考了網(wǎng)上的例子，唯一不一樣的是，我這里的操作是一步一步講解，網(wǎng)上僅是源碼。

一、我們先創(chuàng)建一張空白的網(wǎng)頁，網(wǎng)頁要自適應(yīng)手機(jī)。

二、我們再創(chuàng)建網(wǎng)頁的頭部。

三、做出來的網(wǎng)頁頭部太丑了，我們要去掉盒子與瀏覽器的間隙，還有給頭部加內(nèi)部距離。

四、給網(wǎng)頁頭部添加一些內(nèi)容。

五、接下來開始做導(dǎo)航條了。

六、發(fā)現(xiàn)沒，導(dǎo)航條居然看不見，沒有東西在里面自然是看不見的，我們加三個鏈接吧。

七、這回是看見了，不過樣式太丑，我們改改樣式。

八、加上內(nèi)部距離，就好看了許多，即然是鏈接，我們加點動態(tài)吧，當(dāng)鼠標(biāo)在鏈接上面時，鏈接塊變色。

九、開始做網(wǎng)頁內(nèi)容，網(wǎng)頁內(nèi)容我分為三塊，左右兩邊是側(cè)欄，中間是主要內(nèi)容。

十、我想讓它橫著排，它卻是豎著排，改改各個塊的樣式。

十一、給主體的各個塊加點內(nèi)容。

十二、內(nèi)容是有了，但你會發(fā)現(xiàn)各塊之間沒有間隙，貼得太近了，我們改一下樣式，加個內(nèi)部距離。

十三、距離是有了，但有一個側(cè)欄跑到了另一行，怎么回事？原來padding是會改變盒子的整體寬度，我們原本是100%，現(xiàn)在多了padding的寬度，自然就換行了，解決一下吧。

十四、這回終于在一行了，接下來可以做網(wǎng)頁底部了。

十五、改改樣式，讓底部好看一點。

十六，這個時候，網(wǎng)頁的整體版面就完成了，再補充一個小內(nèi)容，讓網(wǎng)頁瀏覽器在小于600像素寬的時候，主體內(nèi)容的三個塊由橫變豎。