CSS+DIV頁面機(jī)關(guān)中HTML結(jié)構(gòu)化
    您正在進(jìn)修WEB標(biāo)準(zhǔn)CSS網(wǎng)頁機(jī)關(guān)嗎？是不是還不能完全把握純CSS機(jī)關(guān)？凡是有兩種必要您出格仔細(xì)：
第一:年夜概是你還沒有理解理睬CSS措置賞罰賞罰頁面的事理。
    在你思量你的頁面團(tuán)體默示下場前，你理當(dāng)先思量內(nèi)容的語義和結(jié)構(gòu)，然后再針對語義、結(jié)構(gòu)添加CSS。這篇文章將講述你應(yīng)該若何把HTML結(jié)構(gòu)化。
第二:你對那些很是熟習(xí)的默示層屬性束手無策。
譬喻：cellpadding,、hspace、align="left"等等，不知道該轉(zhuǎn)換成對應(yīng)的什么CSS語句。當(dāng)你辦理了第一種題目，知道了怎樣結(jié)構(gòu)化你的HTML，再給出一個列表，注重列出原本的默示屬性用什么CSS來代替。
    結(jié)構(gòu)化HTML
我們在剛進(jìn)修網(wǎng)頁建造時，老是先思量怎么計劃，思量那些圖片、字體、顏色、以及機(jī)關(guān)方案。然后我們用Photoshop可能Fireworks畫出來、切割成小圖。末了再經(jīng)由過程編纂HTML將悉數(shù)計劃還原默示在頁面上。
    要是你但愿你的HTML頁面用CSS機(jī)關(guān)(是CSS-friendly的)，你必要轉(zhuǎn)頭重來，先不思量“外不美觀”，要先思慮你的頁面內(nèi)容的語義和結(jié)構(gòu)。外不美觀并不是最緊張的。一個結(jié)構(gòu)精采的HTML頁面可以以任何外不美觀默示出來，CSS Zen Garden是一個規(guī)范的例子。CSS Zen Garden輔佐我們終極止解到CSS的強年夜力年夜舉量。
    HTML不只僅只在電腦屏幕上閱讀。你用photoshop全心計劃的畫面年夜概不能表如今PDA、移動電話和屏幕閱讀機(jī)上。可是一個結(jié)構(gòu)精采的HTML頁面可以經(jīng)由過程CSS的差別定義，表如今任哪里所，任何收集配置上。
    起頭思慮
首先要進(jìn)修什么是“結(jié)構(gòu)”，也稱之為“語義”。這個術(shù)語的意思是你必要剖析你的內(nèi)容塊，以及每塊內(nèi)容處事的目的，然后再按照這些內(nèi)容目的成立起響應(yīng)的HTML結(jié)構(gòu)。要是你坐下來細(xì)心剖析和籌劃你的頁面結(jié)構(gòu)，你年夜概獲得近似這樣的幾塊：
標(biāo)識表記標(biāo)幟和站點名稱
主頁面內(nèi)容
站點導(dǎo)航(主菜單)
子菜單
搜索框
成果區(qū)(譬喻購物車、收銀臺 留言)
頁腳(版權(quán)和有關(guān)法令聲明)
我們凡是授與DIV元向來將這些結(jié)構(gòu)定義出來，近似這樣：
＜div id="header"＞＜/div＞
＜div id="main"＞＜/div＞
＜div id="content"＞＜/div＞
＜div id="nav"＞＜/div＞
＜div id="subnav"＞＜/div＞
＜div id="search"＞＜/div＞
＜div id="footer"＞＜/div＞
這不是機(jī)關(guān)，是結(jié)構(gòu)。這是一個對內(nèi)容塊的語義聲名。當(dāng)你理解理睬了你的結(jié)構(gòu)，就可以加對應(yīng)的ID在DIV上。DIV容器中可以搜羅任何內(nèi)容塊，也可以嵌套另一個DIV。內(nèi)容塊可以搜羅恣意的HTML元素---問題、段落、圖片、表格、列表等等。
按照上面講演的，你已經(jīng)知道怎樣結(jié)構(gòu)化 HTML，此刻你可以舉辦結(jié)閑談樣式定義了。每一個內(nèi)容塊都可以放在頁面上任哪里所，再指定這個塊的顏色、字體、邊框、背景以及對齊屬性等等。
    實踐一下結(jié)構(gòu)化
上面說的只是最根基的結(jié)構(gòu)，實際應(yīng)用中，你可以按照必要來調(diào)解內(nèi)容塊。常常會呈現(xiàn)DIV嵌套的情形，你會看到"container"層中又有其余層，結(jié)構(gòu)近似這樣：
＜div id="header"＞
＜div id="logo"＞
＜h3＞＜/h3＞
＜ul＞a list＜/ul＞
＜/div＞
＜div id="nav"＞
＜ul＞nav list＜/ul＞
＜form＞search＜/form＞
＜/div＞
＜/div＞
嵌套的div元素許可你定義更多的CSS軌則來節(jié)制默示，譬喻：你可以給#header一個軌則讓它們都居右，可能居中，再給#logo一個軌則讓它居左，而給#nav的list與form另一個完全差此外默示。
總之css的機(jī)關(guān)方面是有很多的,年夜家必然要專心研究方可通. --供應(yīng)本文 轉(zhuǎn)載請注明