|
2.一步步的完善頁面整體結(jié)構(gòu)：
上面的圖是左列#leftbar的具體內(nèi)容和結(jié)構(gòu)。。其中定義了一個(gè) .left_subnav，代表左列所包含的子導(dǎo)航條。。導(dǎo)航條一般都是用ul無序列表來搭建的，這種做法是符合Web標(biāo)準(zhǔn)的，所以不用擔(dān)心，怎幺樣。。有了良好的命名習(xí)慣是不是看起來更加容易了呢？？其它的我就不解釋了。。很簡(jiǎn)單。。同學(xué)們應(yīng)該自己思考一下，這些標(biāo)簽是什幺含義。。
這幅圖就是 第二列 上半部分的頁面結(jié)構(gòu)，這里在新聞的部分我用了釋義列表（dl）來做，當(dāng)然，你改成其它的結(jié)構(gòu)我也沒什幺意見，其中dt是標(biāo)題，有三個(gè)標(biāo)題，所以這里就是三個(gè)dt來代表了其中dd嵌套了三個(gè)span，因?yàn)闆]有其它合適的標(biāo)簽來表示這里的結(jié)構(gòu)，所以可以用span 。
下半部分的結(jié)構(gòu)是一樣的。。這里我就不貼圖了。。各位同學(xué)可以直接Copy.
3.“地基”已經(jīng)建好，“裝修”正式開始
首先在寫css之前，同學(xué)們可以用瀏覽器，看看這個(gè)沒有任何渲染的效果，是不是感覺很樸素？但是頁面的內(nèi)容依然完整，可以很好的瀏覽？這就是標(biāo)準(zhǔn)的優(yōu)勢(shì)。。
(1).通用樣式的編寫
由于IE和其它的符合標(biāo)準(zhǔn)的瀏覽器（比如firefox、Opera）等，對(duì)標(biāo)準(zhǔn)和Css的理解不一樣，所以我們寫css的時(shí)候一般都需要重置瀏覽器的默認(rèn)樣式，這樣它們才不會(huì)給我們“顏色”看 。
這是我寫的通用樣式：
body,div,dl,dt,dd,ul,li,h3,p{ padding: 0; margin: 0; border: 0; }
body{ background:#fff; color:#333; font:12px 宋體,微軟雅黑,Arial; }
a:link, a:visited{ text-decoration: none; }
a:hover{ text-decoration: underline; }
h3{background:#7BAEEF;color:#fff;font-size:14px;padding-left:10px;line-height:26px; }
有同學(xué)可能會(huì)有疑問了，“誒，我經(jīng)�？匆姷亩际怯玫耐ㄅ浞� * 來定義啊，這里寫的怎幺不一樣呢？？” 我解釋一下：
* 代表選擇了所有的標(biāo)簽 ，好比我們要做的網(wǎng)頁是一張白紙，現(xiàn)在某些地方我要刷黑，但是用了*就代表全部都被刷黑了，但是我在制作的過程中，又希望有的地方刷成別的顏色，怎幺辦呢？這時(shí)又要重新定義樣式。而瀏覽器的解析過程是先刷黑，當(dāng)你某些地方要刷紅色的時(shí)候，就會(huì)把黑顏色給清洗掉，然后再刷成紅色。。這樣就造成了資源的浪費(fèi)和速度的減慢，雖然這對(duì)于小站來說沒有什幺大問題，但是當(dāng)你做的網(wǎng)站屬于門戶性質(zhì)的時(shí)候，就可以感受到了。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 利用CSS布局到底有多難? [2] 下一頁 利用CSS布局到底有多難? [4]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 3 頁 利用CSS布局到底有多難? [3]
