-div+css入門教程完整篇

1、第一章：應(yīng)知道第一章：應(yīng)知道1.1DIVCSS的叫法是不準(zhǔn)確的我想凡是來到“這個專題”的同學(xué)，很大部分是沖著DIVCSS來的，目的就是學(xué)習(xí)DIVCSS的，說的再直接一些就是學(xué)習(xí)如何用DIVCSS布局頁面，如何從一張圖片制作成標(biāo)準(zhǔn)的DIVCSS頁面。如果你看完第一段還沒有發(fā)現(xiàn)錯誤的話，那你就很有必要，接著往下看。DIVCSS這種叫法其實是一種很錯誤的叫法，這是國人一廂情愿的叫法，而標(biāo)準(zhǔn)的叫法是什么呢？呵呵，沒錯，是xHTMLCSS，不理解

2、吧，我來細(xì)細(xì)給你說，如果下面的你能理解，保證面試的時候會有很大的幫助，同時也可以讓你后面的學(xué)習(xí)更輕松。為什么國人將這種頁面布局的方法叫做DIVCSS？因為過去布局頁面基本上都是用Table布局，也可以說是TableCSS，而現(xiàn)在布局頁面呢，用DIV，所以叫DIVCSS，聽起來也挺合理，認(rèn)為這樣布局出來的頁面也就是標(biāo)準(zhǔn)頁面，甚至有些人走了個極端，看到其他網(wǎng)站用到Table，就會嘲笑頁面做的不夠標(biāo)準(zhǔn)，好似用不用Table成為了頁面是否標(biāo)準(zhǔn)的

3、一個標(biāo)尺。現(xiàn)在我可以告訴大家，凡是有著這種行為的，都學(xué)得不咋樣，很皮毛！用了Table頁面就不標(biāo)準(zhǔn)了!純粹無稽之談，那什么才是標(biāo)準(zhǔn)頁面呢？先看一個專業(yè)概念，WEB標(biāo)準(zhǔn)，然后我會問三個問題，你來回答：WEB標(biāo)準(zhǔn)不是某一個標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁主要由三部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavi）。對應(yīng)的標(biāo)準(zhǔn)也分三方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語言主要包括XHTML和XML，表現(xiàn)標(biāo)準(zhǔn)語言主要包括CS

4、S，行為標(biāo)準(zhǔn)主要包括對象模型（如W3CDOM）、ECMript等。這些標(biāo)準(zhǔn)大部分由W3C起草和發(fā)布，也有一些是其他標(biāo)準(zhǔn)組織制訂的標(biāo)準(zhǔn)，比如ECMA（EuropeanComputerManufacturersAssociation）的ECMript標(biāo)準(zhǔn)?？疵靼琢藳]有？問題來了~先不要看答案，從上面的概念中找出問題一：WEB標(biāo)準(zhǔn)有幾部分組成？問題二：結(jié)構(gòu)化標(biāo)準(zhǔn)語言是什么？問題三：表現(xiàn)標(biāo)準(zhǔn)語言是什么？模塊放到右邊，還是放到左邊，通知板塊放到右

5、側(cè)去，頁面風(fēng)格最好一個月?lián)Q一種，如果遇到這種老板，提出這種要求，并且你的頁面是用Table布局的，那么你會崩潰的，工作量那是大大滴~，如果不相信的話，你們自己可以找個頁面，用Table布局出來，然后變換板塊和風(fēng)格，你就會體會到Table布局的不靈活性，這是為什么呢，因為Table的誕生是為存儲數(shù)據(jù)用的，功能和Execel差不多，不是用來布局用的，只不過后來大家發(fā)現(xiàn)用Table可以把想放的頁面元素，比如圖片，放到任何自己想放的地方，且做出

6、來的頁面可以兼容多種瀏覽器，于是Table就承擔(dān)起了布局頁面的重?fù)?dān)，這一做就是好幾年......直到Web2.0時代的到來，Table才從布局頁面的工作中逐漸解脫，專心的去存儲數(shù)據(jù)^_^既然Table是為存儲數(shù)據(jù)誕生的，那誰的誕生是為了頁面布局呢？答案就是:DIV，DIV就是為布局頁面而誕生的，只不過一直不被人認(rèn)同，原因就是DIV去布局頁面需要CSS的配合，使用比較繁瑣，還不如Table拖拖拽拽頁面就布局OK了，感覺還不如Table方便

7、，從而DIV被人們放置在一個無人問津的昏暗角落里，暗暗的等待著伯樂的出現(xiàn)，直到2003年美國加州ScottDesign公司參加了在舊金山舉辦的有關(guān)網(wǎng)頁排版和設(shè)計的一個研討會上的演講，使DIV看到了陽光，走出了陰霾.....說了那么多，我們對比一下Table布局頁面和DIV布局頁面的優(yōu)缺點使用表格進行頁面布局會帶來很多問題：把格式數(shù)據(jù)混入你的內(nèi)容中。這使得文件的大小無謂地變大，而用戶訪問每個頁面時都必須下載一次這樣的格式信息帶寬并非免費。

8、這使得重新設(shè)計現(xiàn)有的站點和內(nèi)容極為消耗勞力(且昂貴)。這還使我們保持整個站點的視覺的一致性極難，花費也極高?；诒砀竦捻撁孢€大大降低了它對殘疾人和用手機或PDA瀏覽者的親和力。而使用CSS進行網(wǎng)頁布局，它會：使你的頁面載入得更快降低你的流量費用讓你在修改設(shè)計時更有效率而代價更低幫助你的整個站點保持視覺的一致性讓你的站點可以更好地被搜索引擎找到使你的站點對瀏覽者和瀏覽器更具親和力在世界上越來越多人采用Web標(biāo)準(zhǔn)時，它還能提高你的職場競爭實