|
(2) 定義各個(gè)塊的寬度，和高度
#wrapper{ width:760px; margin:10px auto; } /* 這是外圍容器 */
#content{ width:760px; height:378px; } /* 這是內(nèi)容容器 */
#leftbar{width:180px; height:378px; float:left; border:1px solid #DEDFDE;margin:0 10px 0 0;} /* 這是左列的樣式 */
#rightbar{ float:left; width:560px; } /* 這是右列的樣式 */
這里我是用的浮動(dòng)布局，當(dāng)然，你也可以用別的方法.具體各個(gè)屬性代表什幺意思，我就不多說了，同學(xué)們可以仔細(xì)的查看css手冊(cè).
(3) 完善左列的樣式。。
#leftbar{width:180px; height:378px; float:left; border:1px solid #DEDFDE;margin:0 10px 0 0;} /* margin:0 10px 0 0; 代表距離右邊的列有10px的空隙 */
ul li{ font-size:14px; list-style:none; text-align:center; margin:20px;}
寫完后。。左列的效果應(yīng)該就出來了，屬性都很簡單，請(qǐng)各位同學(xué)查找一下css手冊(cè)，對(duì)應(yīng)著理解。。。
(4) 完善右列的樣式
先定義#rightnews_a和#rightnews_b 的樣式，然后再寫完里面的細(xì)節(jié)，請(qǐng)同學(xué)們跟著我的思路一步一步的寫出來，千萬不要手懶，不動(dòng)手，Css是一種實(shí)踐性很強(qiáng)的技術(shù)，不動(dòng)手是很難學(xué)會(huì)的。。
#rightnews_a{ border:1px solid #DEDFDE; margin:0 0 10px;height:178px; overflow:hidden;} /* overflow:hidden是為了把子內(nèi)容超出的部分隱藏 */
#rightnews_b{ border:1px solid #DEDFDE; height:188px; }
（5）完善右列的細(xì)節(jié)樣式
先定義 dl的樣式 ，這里我依然采用的 浮動(dòng) 來定位，有一點(diǎn)請(qǐng)注意，一個(gè)標(biāo)簽浮動(dòng)以后，最好給它定義一個(gè)合適的寬度。。浮動(dòng)具體的原理，限于篇幅，就不細(xì)講了，這里主要是提供一種利用web標(biāo)準(zhǔn)來搭建網(wǎng)頁的思路，和讓同學(xué)們對(duì)Css有一個(gè)感性的認(rèn)識(shí)，所以我不想頒出一大堆的理論來解釋，免得讓大家喪失了學(xué)習(xí)的信心。
#rightbar dl{ text-align:center;}
#rightbar dt{ float:left; font-weight:bold; font-size:14px; line-height:26px;}
#rightbar .t1{ width:100px;padding:0 5px;}
#rightbar .t2{ width:280px;padding:0 5px;}
#rightbar .t3{ width:148px;padding:0 5px;}
#rightbar dd{ line-height:26px;font-size:14px; }
#rightbar .dd1{ width:100px;padding:0 5px;float:left; }
#rightbar .dd2{ width:280px;padding:0 5px;float:left; }
五，總結(jié)：
Web標(biāo)準(zhǔn)的核心思想：
- 用合適的標(biāo)簽來搭建頁面結(jié)構(gòu)：比如頁面中的一個(gè)段落，就可以用P標(biāo)簽，而不要用div來代替。。導(dǎo)航條可以用ul等，請(qǐng)不要把看起來是什幺的結(jié)構(gòu)，用其它意義的標(biāo)簽來表達(dá)，這樣是不太合理的。
- 表現(xiàn)方面的內(nèi)容 ，請(qǐng)用css來控制，比如：本教程中的font-size ，background 等，這樣就可以實(shí)現(xiàn)表現(xiàn)和結(jié)構(gòu)相分離了。
- 請(qǐng)不要過多的使用hack ，同學(xué)們?cè)诳幢窘坛痰臅r(shí)候，有沒有發(fā)現(xiàn)我一個(gè)Hack都沒有寫？是的，標(biāo)準(zhǔn)的本意是不推薦使用hack的，因?yàn)椤跋蚝蠹嫒荨钡目赡苄苑浅Ｐ�，比如你現(xiàn)在可以兼容ie6.7 ff3.0，但是ie8 ,ff4可能就可能會(huì)給你的頁面找點(diǎn)麻煩了，所以當(dāng)你要用Hack的時(shí)候，不妨換個(gè)思路，改改結(jié)構(gòu)，或者改css，能避免就盡量避免。
怎幺樣？？用Web標(biāo)準(zhǔn)來“重構(gòu)”一個(gè)頁面，不是那幺困難吧？ 自己動(dòng)手試試了嗎 ？
如果你仔細(xì)看了這篇教程，還是有地方不理解的話，可以在論壇留言 ，或者電子郵件給我 ，我會(huì)盡力幫助你，本人的水平也有限，如果路過的高手有什幺看法或者意見，請(qǐng)發(fā)封郵件給我 ，不甚感激，最后祝愿大家在“標(biāo)準(zhǔn)”的路上一帆風(fēng)順 。
My-email: huangpengan@qq.com
本教程的Word版下載(包括所有源文件)
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2918259-1-1.html
本文鏈接：http://m.95time.cn/tech/web/2009/6544.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 利用CSS布局到底有多難? [3] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 4 頁 利用CSS布局到底有多難? [4]
