主體我們設置好後,下面看看頭部是怎麼細分的吧
工具/原料
代碼
電腦
方法/步驟
頭部一般我們會放一個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和動畫加導航,下面我們就看看怎麼做吧
![](https://img.yamab2b.com/20170923/18/QQ圖片20141212170400.jpg)
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}這個是字體和行高
注意事項
代碼一定要輸入正確
每寫完一段屬性需要用;隔開