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