靜態網頁製作教材：[3]網頁頭部細分?

主體我們設置好後，下面看看頭部是怎麼細分的吧

工具/原料

代碼

電腦

方法/步驟

頭部一般我們會放一個logo，和導航，下面我們開始製作吧。這裡我們需要在頭部的div裡面加入新的div

baidu1_3，baidu1_2，baidu1_1這個是可以隨便寫的，你愛叫什麼就叫什麼叫我的名字chenhubin都沒有關係

下面我們給它定義屬性。我給它定義了寬高顏色，向左對齊方式

*{background:#FF3399}

#baidu{background:#6633CC; height:700px; width:1000px; margin-left:auto; margin-right:auto}

#baidu1{background:#FF6666; height:100px; width:1000px;}

#baidu2{background:#FFCCFF; height:400px; width:1000px}

#baidu3{background:#66FFCC; height:200px; width:1000px}

#baidu1_1{background:#0033FF; height:80; width:80px; float:left}

#baidu1_2{background:#FF33CC; height:80px; width:920px; float:left}

#baidu1_3{background:#6600FF; height:20px; width:1000px; float:left}

這裡像素需要計算，大家注意。

一般我頭部會放個logo和動畫加導航，下面我們就看看怎麼做吧

baidu1_2這裡本來想放一個動畫的，這裡我就不放了，大家可以自己添加

下面我們在去定義一下屬性

*{background:#FF3399}

#baidu{background:#6633CC; height:700px; width:1000px; margin-left:auto; margin-right:auto}

#baidu1{background:#FF6666; height:100px; width:1000px;}

#baidu2{background:#FFCCFF; height:400px; width:1000px}

#baidu3{background:#66FFCC; height:200px; width:1000px}

#baidu1_1{background:#0033FF; height:80; width:80px; float:left}

#baidu1_2{background:#FF33CC; height:80px; width:920px; float:left; font-size:36px; line-height:80px}

#baidu1_3{background:#6600FF; height:20px; width:1000px; float:left}

這裡我只是把字號和行高設置了下

下面我們看看今天的效果吧，打開index。現在一個網頁的效果就出來點了。今天我們使用到的代碼就是 QQ圖片20141212170400.jpg這個是你圖片的地址，你的圖片在哪src=““就連接到哪就可以了。{font-size:36px; line-height:80px}這個是字體和行高

注意事項

代碼一定要輸入正確

每寫完一段屬性需要用;隔開