我來告訴你什么是DIV+CSS
我來告訴你什么是DIV+CSS
聲明一點:DIV+CSS只限于網(wǎng)頁布局 不等同與 W3C標(biāo)準(zhǔn).Web2.0 (DIV+CSS)是指-----提倡使用DIV代替表格布局,然后利用CSS單獨來控制各種布局元素的顯示樣式--------------------------------------而DIV只不過是 一種能用來"布局"的元素,Table以及我們經(jīng)常用到的 層 都可以用來布局頁面, WEB2.0 并不是說不使用table 而是提倡用DIV來實現(xiàn)頁面整體‘布局"然后什么元素合適就用什么元素 ----布局不等同于 整個頁面全部使用DIV
Web標(biāo)準(zhǔn)的目的其實只是創(chuàng)建一個統(tǒng)一的,用于WEB表現(xiàn)層的技術(shù)標(biāo)準(zhǔn),,以便通過不同瀏覽器,或網(wǎng)絡(luò)終端設(shè)備向用戶展示信息.
既然是新的技術(shù)標(biāo)準(zhǔn),我們就應(yīng)該看看這個新標(biāo)準(zhǔn)是否有值得我們學(xué)習(xí)的地方,最重要的是是否能讓我們更方便,更科學(xué)合理的,為我們的網(wǎng)站提供實質(zhì)性的幫助,提高~做站的目的不在于是否能通過所謂的W3C標(biāo)準(zhǔn)! 對自己用用的東西,我們才考慮去利用!
首先簡單說說DIV與TABLE的屬性:
1:Table 簡單的說就是" 表格",我們可以方便的將它劃分為N個單元格,甚至每個單元也可以繼續(xù)劃分,是一種比較靈活,操作也相對簡單的元素,因為表格的這種特有屬性,尤其在列表方面,幾乎就是Table的強(qiáng)項,我們可以非常方便的將內(nèi)容整齊的排列.再加上tr td ,完全能滿足一般網(wǎng)頁布局的需求,------------這里請大家先注意一點: Table也是Web2.0元素.全部使用Table布局,只要語法,樣式.屬性書寫符合規(guī)范,照樣能通過W3C標(biāo)準(zhǔn)檢測.但是我們也應(yīng)該清楚的知道一點,表格最優(yōu)秀的地方其實還是‘列表"~~~~~~~~~~所以Table在相當(dāng)長的一段時間都被網(wǎng)頁設(shè)計,制作者所鐘愛,一個簡單的頁面用Table來布局其實是一個比較合適的方法,(還有一個原因可能是因為早期的網(wǎng)站主要是以 個人主頁....之類的形式出現(xiàn),全站也就那么幾個簡單頁面,空間100M已經(jīng)是相當(dāng)富裕了.. 然而我們看看現(xiàn)在:空間似乎在以G為單位轉(zhuǎn)變,而且相當(dāng)一部分個人站長早開始起用 服務(wù)器! 那么一個哪怕是小站的頁面也開始以千,萬,開始計算,這時候似乎就可以發(fā)現(xiàn)Table布局已經(jīng)開始出現(xiàn)不足!
雖然表格,乃至單元格的背景,邊框,全部可以定義特定樣式,通過DW等網(wǎng)頁編輯軟件的 屬性欄就可以隨意定義,但是不要忘記了一點,那就是相當(dāng)一部分樣式代碼全部是包含在網(wǎng)頁代碼當(dāng)中, 再加上我們?yōu)榱酥谱鞒鎏囟ㄐЧ?strong onmouseout="javascript:isShowAds = false;isshowads2 =" false;""="" onmouseover="‘isShowAds"=="" true;isshowads2=" true;ads.move(this," http://rad.17luntan.com/uploadimage/19/633087917338281250.jpg","%u4fca%u624d%uff0c%u4ee5%u8d85%u9038%u4e4b%u667a%uff0c%u8fbe%u535a%u5955%u4e4b%u9053%uff01","22759","風(fēng)格","%u5546%u9053%b7%u4fca%u9038","http%3a//adclk.thinkmedia.cn/adclick/pid%3d879/media%3dbokee.cn/place%3dpwin/size%3d50x50")‘"="" style="color: blue; font-weight: normal; text-decoration: underline;">風(fēng)格,經(jīng)常需要將表格層層鑲套,然后按照需要劃分出N個單元, 最后呈現(xiàn)在瀏覽者面前的也是一個相當(dāng)完美的頁面,但是當(dāng)你需要修改頁面的時候就會非常遺憾的發(fā)現(xiàn)這些頁面的代碼相當(dāng)復(fù)雜,而且雜亂,HTML 加上N多 tr td 再加上我們定義的樣式代碼...... 的確是一件腦袋大的事情...... 而且并不是修改完一頁就完成的,如果考慮到整體風(fēng)格,我們可能需要逐一修改N多頁面........ (當(dāng)然了,用CSS控制樣式也會比較方便)只不過與DIV相比,表格的優(yōu)勢也只是 體現(xiàn)列表性質(zhì)的地方 布局嘛.我們還是看看下面的 DIV (元素)
2IV我只能說他是一個 容器,一個比Table更簡單的元素. 代碼形式也就是 <div>.... </div>無法象Table一樣 隨意劃分為幾行幾列,N個單元格,單獨一個DIV在頁面其實是一個沒有什么多大意義的 塊狀元素而已....所以如果說它有什么優(yōu)秀的地方,那么 一: 它夠簡潔,代碼量少 二: 它適合.也只能用于 頁面整體布局,因為當(dāng)你插入一個DIV以后它甚至連邊框,背景,都無法顯示 ,完全依賴 CSS 來實現(xiàn) ,至于我們需要劃分出幾列,顯示內(nèi)容,加上美化圖片..... 也是依賴 比如 ul ol li h1 <P> ....之類的元素來實現(xiàn), 這就是 為什么用DIV 布局的原因: 因為它比table更簡潔,更適合,甚至也只適合布局: 然后充分發(fā)揮其他網(wǎng)頁元素的特有屬性來實現(xiàn)我們想達(dá)到的效果, 換句話說,這就叫 發(fā)揮每一種元素最優(yōu)秀的特性, 然后把它用到最適合它用的地方,包括table , 然后再發(fā)揮CSS能將內(nèi)容與 樣式分離 控制的優(yōu)勢來實現(xiàn)一個 ,代碼簡潔,便于維護(hù),改版,利于收錄,搜索,解析的,科學(xué),合理的優(yōu)秀頁面-------------大家應(yīng)該能看出了吧: DIV 沒有什么了不起.在web2.0.W3C這些概念,標(biāo)準(zhǔn)....它不過就是一個比表格更合適布局的 元素-------------而已
Web標(biāo)準(zhǔn)是一個比較復(fù)雜,也比較深奧的東西,但是它核心的內(nèi)容也就那么幾點,下面我說說自己認(rèn)為WEB能對網(wǎng)站帶來切實幫助的重要幾點:
一:表現(xiàn)與行為的分離:
這一點應(yīng)該是Web2.0的最核心目的, 如果說CSS1.0還不能從實質(zhì)上使內(nèi)容與表現(xiàn)分離,那么WEB2.0已經(jīng)完全有能力實現(xiàn)這一目的:一個網(wǎng)站有幾十,幾百,甚至幾萬甚至幾十萬..... 頁面.傳統(tǒng)的布局方法,樣式與代碼往往全部包含在頁面當(dāng)中,如果我們改版的話,可以想象需要多少時間?那是一件比較復(fù)雜,煩瑣的事情,而且由于樣式獨立,分散,我們需要找到自己想修改的地方逐一修正.(注意了.這是在沒有使用CSS的情況下,如果你用DW之類的網(wǎng)頁編輯軟件,那么你已經(jīng)不知不覺的開始應(yīng)用了Web2.0技術(shù)).如果我們把全站的樣式表文件全部放到一個獨立文件夾,然后與頁面鏈接,會不會更方便維護(hù),更便于修改.同時也減少了我們的整站數(shù)據(jù)量?而且一個沒有任何樣式代碼(應(yīng)該是只有少量代碼在頁面存在)的頁面對于搜索引擎來說是不是更便于收錄,抓取?也更便于瀏覽器解析?----------------至少提高了我們的頁面質(zhì)量,減少了我們寶貴的維護(hù)時間,節(jié)省了寶貴的空間資源.而且能大幅度提高瀏覽器的解析速度
二:使用DIV布局,而非Table布局
Table和DIV一樣其實都是Web2.0元素,也都是一種容器,就其實結(jié)構(gòu)來說,表格布局是 <table><td><tr>.....<tr><td><table>而DIV的結(jié)構(gòu)更為簡潔<div>...<div>,Table能讓我們方便的拆分無數(shù)個單元格,而且能方便的列出規(guī)則,不規(guī)則的標(biāo)題,內(nèi)容,版塊,但是遺憾的是最后呈現(xiàn)給我們的是一個相當(dāng)復(fù)雜的頁面...... 而DIV加上WEB2.0提倡的 UL(無序列表元素) OL(有序列表元素),以及文本,標(biāo)題元素 h1 h2.... <P> 再加上 CSS2.0 .幾乎完全取代了 <td><tr> 這些單元格 代碼清晰,簡潔 .而且頁面沒有樣式代碼(class)除外
<div id="...">
<ul id="...">
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
</ul>
</div>
如果使用Table那么大家應(yīng)該知道至少需要劃分N個單元格, 如果需要插入img之類就更多,再加上樣式代碼....絕對的不簡潔,維護(hù)起來,表格需要在頁面修改,而使用DIV+CSS只需要修改style.css樣式文件就可以了,不需要逐頁修改.牽一發(fā)而動全身..... 方便,實在是方便
本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請
點擊舉報。
