最簡(jiǎn)單的cssdiv布局_第1頁(yè)
最簡(jiǎn)單的cssdiv布局_第2頁(yè)
最簡(jiǎn)單的cssdiv布局_第3頁(yè)
最簡(jiǎn)單的cssdiv布局_第4頁(yè)
全文預(yù)覽已結(jié)束

下載本文檔

版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、樓主 發(fā)表于: 2009-08-01 20:38 只看樓主 | 小 中 大 0 一個(gè)簡(jiǎn)單的css+div布局實(shí)例,讓你很明了的了解怎么布局! 分析它的結(jié)構(gòu),有以下幾個(gè)部分:黑色的頭部,藍(lán)色的主體,拆分成紅色的變藍(lán),和右邊的導(dǎo)航及主體部分,最下面的黃色是底部,結(jié)構(gòu)相當(dāng)簡(jiǎn)單,現(xiàn)在開(kāi)始寫它的css了,定義最上面的黑色為header: 復(fù)制代碼 1. #headermargin:0px;clear:both;background:black;width:800px;height:100px;text-align:center;padding-top:12px; 然后中間的藍(lán)色主體叫mainbox吧,那

2、么樣式表可以寫: 復(fù)制代碼 1. #mainboxmargin:auto 0px;width:800;background:blue;height:410px;以此定義其他如下:復(fù)制代碼 1. #sidebarmargin:12px 2px 5px 12px;float:left;background:red;width:200px;height:400px;clear:right; /*上右下左*/ 2. #menumargin:12px 2px 5px 12px;float:right;background:red;width:550px;height:30px; 3. #contentf

3、loat:right;margin:4px 2px 2px;12px;width:550px;height:361;background:#000; padding-left:0px; 4. #footermargin-rop:0px;width:800px;height:40px;background:#fff000;說(shuō)明:margin右邊的四個(gè)值分別對(duì)應(yīng)上右下左,比如menu距下是5px,content距上是4px,所以中間有9px的間距了,而先定義了menu的高位30px,所以content若想和sidebar對(duì)齊,則應(yīng)該定義高度為400-30-4-5=361.上面完成了部分的內(nèi)容,下面把對(duì)應(yīng)的div放到body中就可以了, 復(fù)制代碼 1. 2. 家園中文網(wǎng)站長(zhǎng)站演示文檔 3. 4. 5. 6. 4323434 7. 8. 9. 10. 11. 這里是foot部分,放置版權(quán)啥的 12. 刷新發(fā)現(xiàn),是如圖效果,但是,所有的div都是靠左邊,怎么才能居中呢?原因是我們沒(méi)有定義body里元素的位置,所以css里加上: 復(fù)制代碼 1. bodytext-align:center;這樣就大功告成了!完整的頁(yè)面就是:復(fù)制代碼 1. 2. 3. 4. 5. 14. 15. 16. 17. 家園中文網(wǎng)站長(zhǎng)站演示文檔 18. 19.

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論