-div+css入門教程完整篇

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

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

3、一個(gè)標(biāo)尺?，F(xiàn)在我可以告訴大家，凡是有著這種行為的，都學(xué)得不咋樣，很皮毛！用了Table頁面就不標(biāo)準(zhǔn)了!純粹無稽之談，那什么才是標(biāo)準(zhǔn)頁面呢？先看一個(gè)專業(yè)概念，WEB標(biāo)準(zhǔn)，然后我會問三個(gè)問題，你來回答：WEB標(biāo)準(zhǔn)不是某一個(gè)標(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)格最好一個(gè)月?lián)Q一種，如果遇到這種老板，提出這種要求，并且你的頁面是用Table布局的，那么你會崩潰的，工作量那是大大滴~，如果不相信的話，你們自己可以找個(gè)頁面，用Table布局出來，然后變換板塊和風(fēng)格，你就會體會到Table布局的不靈活性，這是為什么呢，因?yàn)門able的誕生是為存儲數(shù)據(jù)用的，功能和Execel差不多，不是用來布局用的，只不過后來大家發(fā)現(xiàn)用Table可以把想放的頁面元素，比如圖片，放到任何自己想放的地方，且做出

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

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

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