1、XHTML+CSS頁(yè)面布局教程一、知識(shí)篇你必須知道的知識(shí)知識(shí)一DIV+CSS的叫法是不準(zhǔn)確的在整個(gè)教程的最前面必須先給大家糾正一個(gè)錯(cuò)誤，就是“DIV+CSS”！“DIV+CSS”這種叫法其實(shí)是一種不準(zhǔn)確的叫法，是國(guó)人給這種布局標(biāo)準(zhǔn)頁(yè) 面的方法起的名字，是對(duì)技術(shù)理解不夠透徹導(dǎo)致的，而標(biāo)準(zhǔn)的叫法是什么呢？呵呵，沒(méi)錯(cuò)，是xHTML+CSS為什么國(guó)人將這種布局標(biāo)準(zhǔn)頁(yè)面的方法叫做DIV+CSS？因?yàn)榈谝粋€(gè)將這種技術(shù)引進(jìn)中國(guó)的人，對(duì)這門(mén)技術(shù)理解不夠透徹，單純從代 碼上辨別過(guò)去的頁(yè)面布局方法和現(xiàn)在流行的頁(yè)面布局方法，認(rèn)為過(guò)去布局頁(yè)面用 的是Table，稱之為“Table+CSS”，而現(xiàn)在布局頁(yè)面呢，用DIV

2、，所以叫DIV+CSS。聽(tīng)起來(lái)也挺合理，豈不知這種叫法誤導(dǎo)了絕大部分的網(wǎng)頁(yè)開(kāi)發(fā)者，認(rèn)為這樣 布局出來(lái)的頁(yè)面也就是標(biāo)準(zhǔn)頁(yè)面，就是符合W3C標(biāo)準(zhǔn)的頁(yè)面，更甚者走了極端， 看到網(wǎng)站上用到Table，就會(huì)嘲笑頁(yè)面做的不夠標(biāo)準(zhǔn)，結(jié)果用不用Table成為了 判定頁(yè)面是否標(biāo)準(zhǔn)的關(guān)鍵點(diǎn)。還有另外一種極端，將頁(yè)面中用到的標(biāo)簽全部換做 DIV，那就更是大錯(cuò)特錯(cuò)了。知識(shí)二DIV+CSS將你引入誤區(qū)“DIV+CSS”叫法將網(wǎng)頁(yè)制作者引入兩大誤區(qū)【誤區(qū)一】網(wǎng)頁(yè)中用了 Table，頁(yè)面就不標(biāo)準(zhǔn)，甚至覺(jué)著用Table丟人，Table 成為了判定頁(yè)面是否標(biāo)準(zhǔn)的關(guān)鍵點(diǎn)。【誤區(qū)一】認(rèn)為網(wǎng)頁(yè)中的DIV標(biāo)簽用的越多越好，甚至有人將頁(yè)

3、面中所有 的標(biāo)簽都替換為DIV，DIV的多少，決定頁(yè)面標(biāo)準(zhǔn)的程度。為了能夠避免大家進(jìn)入誤區(qū)，必須要了解“Table”和“DIV”這兩個(gè)網(wǎng) 頁(yè)元素誕生的目的，首先Table誕生的目的是為了存儲(chǔ)數(shù)據(jù)，而DIV誕生的目 的就是為了架設(shè)頁(yè)面結(jié)構(gòu)，兩者有不同的工作職能，當(dāng)我們存儲(chǔ)數(shù)據(jù)的時(shí)候用1 / 15Table是最方便快捷的，比如W3C的一個(gè)主題頁(yè)面“瀏覽器大全”，地址是：/portal.php8mod二topic&topicid=6,這個(gè)時(shí)候肯定用Table最合適了，而表格外面組成頁(yè)面結(jié)構(gòu)的部分當(dāng)然用 DIV 了，這是由他們兩個(gè)誕生的目的決定的，也是符合W3C標(biāo)準(zhǔn)的，那么這 個(gè)頁(yè)面就是標(biāo)準(zhǔn)頁(yè)面。既然

4、是標(biāo)準(zhǔn)頁(yè)面，標(biāo)簽各干各的活“各司其職”，Table就用來(lái)存儲(chǔ)數(shù)據(jù)， 怎么用Table就丟人了呢？怎么就不標(biāo)準(zhǔn)了呢？ DIV就用來(lái)構(gòu)架頁(yè)面結(jié)構(gòu)，怎么 會(huì)用的越多越標(biāo)準(zhǔn)呢？歸根結(jié)底就是“DIV+CSS”的叫法導(dǎo)致。知識(shí)三什么是W3C？我們平時(shí)說(shuō)的W3C，其實(shí)是World Wide Web Consortium的縮寫(xiě)，中文 是W3C組織或者萬(wàn)維網(wǎng)聯(lián)盟，W3C這個(gè)組織做什么的呢？很簡(jiǎn)單，就是出網(wǎng) 頁(yè)標(biāo)準(zhǔn)的。那么有W3C組織出的標(biāo)準(zhǔn)就被稱為W3C標(biāo)準(zhǔn)，那么符合W3C標(biāo) 準(zhǔn)的頁(yè)面就是標(biāo)準(zhǔn)頁(yè)面了，好，問(wèn)題來(lái)了什么是W3C標(biāo)準(zhǔn)？【注意】下面對(duì)W3C標(biāo)準(zhǔn)的解釋?zhuān)枰斫庖幌?，因?yàn)樵诤芏郬eb前端 開(kāi)發(fā)工程師面試

5、的時(shí)候會(huì)遇到這方面的問(wèn)題，很多企業(yè)在面試一些Web前端技 術(shù)人員的時(shí)候，認(rèn)為如果連什么是W3C都不知道，那做出來(lái)的頁(yè)面肯定就不能 夠符合W3C標(biāo)準(zhǔn)，所以要求大家留意下！W3C標(biāo)準(zhǔn)不是一個(gè)標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合，包含三部分的標(biāo)準(zhǔn)：結(jié) 構(gòu)標(biāo)準(zhǔn)、表現(xiàn)標(biāo)準(zhǔn)和動(dòng)作標(biāo)準(zhǔn)。與結(jié)構(gòu)標(biāo)準(zhǔn)對(duì)應(yīng)的代表語(yǔ)言是xHTML，與表現(xiàn) 標(biāo)準(zhǔn)對(duì)應(yīng)的代表語(yǔ)言是CSS，與動(dòng)作標(biāo)準(zhǔn)對(duì)應(yīng)的代表語(yǔ)言是JavaScript。當(dāng)我們將一個(gè)成品的網(wǎng)頁(yè)設(shè)計(jì)制作成一個(gè)靜態(tài)頁(yè)面的時(shí)候，就要符合前面兩 種標(biāo)準(zhǔn)，結(jié)構(gòu)標(biāo)準(zhǔn)和表現(xiàn)標(biāo)準(zhǔn)，那么制作出來(lái)的頁(yè)面就是標(biāo)準(zhǔn)頁(yè)面，用他們相對(duì) 應(yīng)的語(yǔ)言來(lái)描述這種制作標(biāo)準(zhǔn)頁(yè)面的技術(shù)我們就稱之為“xHTML+CSS” ！

6、【總結(jié)】知識(shí)一、知識(shí)二、知識(shí)三是大家必須知道的，知道了這些無(wú)論去面 試還是和其他人溝通，都會(huì)讓對(duì)方感覺(jué)你這個(gè)人很專(zhuān)業(yè)，對(duì)技術(shù)理解很透徹！二、 基礎(chǔ)篇你必須掌握的基礎(chǔ)本節(jié)主要講解，兩個(gè)內(nèi)容：第一：CSS如何控制頁(yè)面樣式，有幾種樣式；第二：這些樣式出現(xiàn)在同一個(gè)頁(yè)面時(shí)的優(yōu)先級(jí)。使用xHTML+CSS布局頁(yè)面，其中有個(gè)很重要的特點(diǎn)就是結(jié)構(gòu)與表現(xiàn)相分離， 結(jié)構(gòu)指xHTML頁(yè)面代碼，表現(xiàn)就是CSS代碼了，如果把一個(gè)網(wǎng)頁(yè)看成穿著衣服 的人的話，人就是xHTML，是結(jié)構(gòu)，而衣服呢就是CSS，是表現(xiàn)，現(xiàn)在出現(xiàn)的 問(wèn)題是，如何讓CSS去控制頁(yè)面？或者說(shuō)，如何讓衣服穿在人身上；不同的CSS 就可以使頁(yè)面出現(xiàn)不同的風(fēng)

7、格適用不同的網(wǎng)站，而不同的衣服，人穿上后就會(huì)體 現(xiàn)出不同的職業(yè)。知識(shí)一CSS如何控制頁(yè)面第一：如何讓CSS去控制HTML頁(yè)面？有4種樣式（方式），行內(nèi)樣式、內(nèi)嵌樣式、鏈接樣式、導(dǎo)入樣式1）行內(nèi)樣式行內(nèi)樣式是4種樣式中最直接最簡(jiǎn)單的一種，直接對(duì)HTML標(biāo)簽使用style二二 例如：雖然這種方法比較直接，在制作頁(yè)面的時(shí)候需要為很多的標(biāo)簽設(shè)置style屬 性，所以會(huì)導(dǎo)致HTML頁(yè)面不夠純凈，文件體積過(guò)大，不利于搜索蜘蛛爬行，從 而導(dǎo)致后期維護(hù)成本高。2）內(nèi)嵌樣式內(nèi)嵌樣式就是將CSS代碼寫(xiě)在之間，并且用 進(jìn)行聲明，例如：W3CF:打造中國(guó)Web前端開(kāi)發(fā)人員最專(zhuān)業(yè)的貼心社區(qū)！ body,div,a,im

8、g,pmargin:0; padding:0;acolor:#FFF;imgfloat:left;#containerwidth:500px; height:350px;background:url( HYPERLINK /static/image/cm/demo/2d121/w3cBg /static/image/cm/demo/2d121/w3cBg. jpg) no-repeat; position:relative; margin:0 auto;#container pwidth:380px; height:40px; position:absolute; left:60px; bot

9、tom:60px; color:#fff; font-size:12px; line-height:18px;text-align:center; font-family:微軟雅黑，Verdana, Geneva, sans-serif;#regdisplay:block; width:114px; height:27px; position:absolute;left:191px; bottom:28px;全國(guó)的Web前端開(kāi)發(fā)工程師歡聚于罰href= HYPERLINK / / target=_blankW3CF我們的口號(hào)是“打造中國(guó)Web前端開(kāi)發(fā)人員 最專(zhuān)業(yè)的貼心社區(qū)！ ”內(nèi)嵌樣式，大家也

10、許已經(jīng)意識(shí)到，即使有公共CSS代碼，也是每個(gè)頁(yè)面都 要定義的，如果一個(gè)網(wǎng)站有很多頁(yè)面，每個(gè)文件都會(huì)變大，后期維護(hù)難度也大， 如果文件很少，CSS代碼也不多，這種樣式還是很不錯(cuò)的。3）鏈接樣式鏈接樣式是使用頻率最高，最實(shí)用的樣式，只需要在之 間加上就可以了，如下：舉個(gè)例子：W3CF:打造中國(guó)Web前端開(kāi)發(fā)人員最專(zhuān)業(yè)的貼心社區(qū)！ 全國(guó)的Web前端開(kāi)發(fā)工程師歡聚于罰href= HYPERLINK / / target=_blankW3CF我們的口號(hào)是“打造中國(guó)Web前端開(kāi)發(fā)人員最專(zhuān)業(yè)的貼心社區(qū)！ ”這種樣式將HTML文件和CSS文件徹底分成兩個(gè)或者多個(gè)文件，實(shí)現(xiàn)了頁(yè) 面框架HTML代碼與表現(xiàn)CSS代

11、碼的完全分離，使得前期制作和后期維護(hù)都十 分方便，并且如果要保持頁(yè)面風(fēng)格統(tǒng)一，只需要把這些公共的CSS文件單獨(dú)保 存成一個(gè)文件，其他的頁(yè)面就可以分別調(diào)用自身的CSS文件，如果需要改變網(wǎng) 站風(fēng)格，只需要修改公共CSS文件就OK 了，相當(dāng)?shù)姆奖?，這才是我們 xHTML+CSS制作頁(yè)面提倡的樣式。4）導(dǎo)入樣式導(dǎo)入樣式和鏈接樣式比較相似，采用import樣式導(dǎo)入CSS樣式表，在HTML 初始化時(shí)，會(huì)被導(dǎo)入到HTML文件中，成為文件的一部分，類(lèi)似第二種內(nèi)嵌樣式。 具體導(dǎo)入樣式和鏈接樣式有什么區(qū)別，可以參看這篇文章CSS:import與link 的具體區(qū)別，不過(guò)我還是建議大家用鏈接樣式！第二：四種樣式的優(yōu)

12、先級(jí)如果這上面的四種樣式中的兩種用于同一個(gè)頁(yè)面后，就會(huì)出現(xiàn)優(yōu)先級(jí)的問(wèn)題， 這里我就不再舉例子來(lái)說(shuō)明了，大家在下面自己證明一下下面的結(jié)論：四種樣式的優(yōu)先級(jí)按照“就近原則”：行內(nèi)樣式 內(nèi)嵌樣式 鏈接樣式 導(dǎo)入樣式。知識(shí)二CSS選擇器上節(jié)課我們講了一下CSS通過(guò)什么方式去控制頁(yè)面，如果不記得，我來(lái)幫 大家回憶一下，總共有四種樣式（方式）行內(nèi)樣式、內(nèi)嵌樣式、鏈接樣式、導(dǎo)入樣 式，大家通過(guò)這四種樣式（方式）就可以實(shí)現(xiàn)CSS對(duì)HTML頁(yè)面樣式的控制，如果 要讓這些樣式對(duì)HTML頁(yè)面中的元素實(shí)現(xiàn)一對(duì)一，一對(duì)多或者多對(duì)一的控制，這 就需要用到CSS選擇器，HTML頁(yè)面中的元素就是通過(guò)CSS選擇器進(jìn)行控制的。C

13、SS選擇器最基本的有四種：標(biāo)簽選擇器、ID選擇器、類(lèi)選擇器、通用選擇器?！緲?biāo)簽選擇器】一個(gè)完整的HTML頁(yè)面是有很多不同的標(biāo)簽組成，而標(biāo)簽選擇器，則是決定 哪些標(biāo)簽采用相應(yīng)的CSS樣式，比如，在style.css文件中對(duì)p標(biāo)簽樣式的聲明 如下：p（font-size:12px;background:#900;color:090;這么做，會(huì)使頁(yè)面中所有p標(biāo)簽的背景都是#900（紅色），文字大小均是12px,顏色為#090（綠色），這在后期維護(hù)中，如果想改變整個(gè)網(wǎng)站中p標(biāo)簽背 景的顏色，只需要修改background屬性就可以了，就這么容易!當(dāng)然你也可以 設(shè)置整個(gè)頁(yè)面中所有的div的屬性、a鏈接的

14、屬性、span的屬性，這么做方便 是方便，但是不夠靈活，如果頁(yè)面中除了某個(gè)p標(biāo)簽背景不是紅色外，其他的 都是紅色，就不能用這種方法定義了?！綢D選擇器】ID選擇器在某一個(gè)HTML頁(yè)面中只能使用一次，就像只有一個(gè)身份證（ID） 一樣，不重復(fù)！在頁(yè)面中使用ID選擇器更具有針對(duì)性，如：先給某個(gè)HTML頁(yè)面中的某個(gè)p標(biāo)簽起個(gè)ID,代碼如下：W3CF:打造中國(guó)Web前端開(kāi)發(fā)人員最專(zhuān)業(yè)的貼心社區(qū)！ 在CSS中定義ID為one的p標(biāo)簽的屬性，就需要用到“#”，代碼如下：#one12. font-size:12px;3. background:#900;4. color:090;這樣頁(yè)面中的某個(gè)p就會(huì)是CSS

15、中定義的樣式。針對(duì)“頁(yè)面中除了某個(gè)p標(biāo) 簽背景不是紅色外，其他的都是紅色的”情況，我們就可以用ID選擇器單獨(dú)定 義那個(gè)背景不為紅色的p標(biāo)簽，這樣問(wèn)題就解決了?！绢?lèi)選擇器】這種選擇器更容易理解了，就是使頁(yè)面中的某些標(biāo)簽（可以是不同的標(biāo)簽）具有相 同的樣式，就像國(guó)慶某個(gè)方陣中，肯定都是不同的人，卻均穿紅色衣服，手中高 舉花環(huán)，樣式都是一樣的，如果想讓這一類(lèi)人都有共同的樣式，該怎么做呢呵 呵，和ID選擇器的用法類(lèi)似，只不過(guò)把id換做class，如下：此處為p標(biāo)簽內(nèi)的文字如果我還想讓div標(biāo)簽也有相同的樣式，怎么辦呢？加上同樣的class就可以了， 如下：此處為DIV標(biāo)簽內(nèi)的文字7 / 15這樣頁(yè)面中

16、凡是加上class=one的標(biāo)簽，樣式都是一樣的了CSS定義的時(shí)候和ID選擇器差不多，只不過(guò)把#換成.，如下:-one(font-size:12px;background:#900;color:090;補(bǔ)充：一個(gè)標(biāo)簽可以有多個(gè)類(lèi)選擇器的值，不同的值用空格分開(kāi)，如：一個(gè)標(biāo)簽可以有多個(gè)類(lèi)選擇器的值這樣我們可以將多個(gè)樣式用到同一個(gè)標(biāo)簽中，當(dāng)然也可以，ID和class 一塊用ID 和 class 可同時(shí)應(yīng)用到同一個(gè)標(biāo)簽【通用選擇器】到這里，前三種基本的選擇器說(shuō)完了，但是還需要給大家介紹一個(gè)CSS選 擇器中功能最強(qiáng)大但是用的最少的一種選擇器“通用選擇器”，就是“*”星號(hào)。*此處為CSS代碼強(qiáng)大之處是因?yàn)?/p>

17、他對(duì)整個(gè)網(wǎng)頁(yè)中所有HTML標(biāo)簽進(jìn)行樣式定義，這種功能類(lèi) 似“標(biāo)簽選擇器”，覆蓋的對(duì)象更加廣泛，是整個(gè)HTML的所有標(biāo)簽，功能是強(qiáng) 大，但是這樣反而限制了它的靈活性。對(duì)于通用選擇器還有一個(gè)不得不提的用法，就是為了保證作出的頁(yè)面能夠兼 容多種瀏覽器，所以要對(duì)HTML內(nèi)的所有的標(biāo)簽進(jìn)行重置，會(huì)將下面的代碼加到 CSS文件的最頂端：*margin:0; padding:。；為什么要這么用呢，因?yàn)槊糠N瀏覽器都自帶有CSS文件，如果一個(gè)頁(yè)面在 瀏覽器加載頁(yè)面后，發(fā)現(xiàn)沒(méi)有CSS文件，那么瀏覽器就會(huì)自動(dòng)調(diào)用它本身自帶 的CSS文件，但是不同的瀏覽器自帶的CSS文件又都不一樣，對(duì)不同標(biāo)簽定義 的樣式不一樣，如果

18、我們想讓做出的頁(yè)面能夠在不同的瀏覽器顯示出來(lái)的效果都 是一樣的，那么我們就需要對(duì)HTML標(biāo)簽重置，就是上面的代碼了，但是這樣也8 / 15有不好的地方，因?yàn)镠TML4.01中有89個(gè)標(biāo)簽，所以相當(dāng)于在頁(yè)面加載CSS的 時(shí)候，先對(duì)這89個(gè)標(biāo)簽都加上了margin:0; padding:。;，在這里我不建議大 家這么做，因?yàn)?9個(gè)標(biāo)簽中需要重置的標(biāo)簽是很少數(shù)，沒(méi)有必要將所有的標(biāo)簽 都重置，用到哪些標(biāo)簽就定義哪些標(biāo)簽，如下：body,div,p,a,ul,limargin:0; padding:。；如果還需要dl、dt、dd標(biāo)簽重置，那就在上面加上就可以了，如下：body,div,p,a,ul,li

19、,dl,dt,ddmargin:0; padding:0;用到哪些就寫(xiě)哪些，這點(diǎn)也可以看做衡量頁(yè)面重構(gòu)師制作頁(yè)面水平的高低， 以及是否專(zhuān)業(yè)的一個(gè)方面。OK!選擇器的內(nèi)容大家應(yīng)該都明白了，如果不能完全理解也沒(méi)有關(guān)系，到 實(shí)戰(zhàn)篇的時(shí)候使用一下就清楚了，但是這些選擇器的格式應(yīng)該記住，也是為后面 實(shí)戰(zhàn)做準(zhǔn)備的，只有按照老師的要求，整個(gè)教程學(xué)下來(lái)才能達(dá)到相應(yīng)的效果。下面就繼續(xù)講解一下“選擇器的集體聲明”和“選擇器的嵌套”【選擇器的集體聲明】在我們使用選擇器的時(shí)候，有些標(biāo)簽樣式是一樣的，或者某些標(biāo)簽都有共同 的樣式屬性，我們可以將這些標(biāo)簽集體聲明，不同的標(biāo)簽用“，”分開(kāi)，比如：h1,h2,h3,h4,h5

20、,h6color:#900;還有像上面剛剛講的標(biāo)簽重置，就是利用的選擇器的集體聲明：body,div,p,a,ul,li,dl,dt,ddmargin:0; padding:0;再舉個(gè)例子，無(wú)論什么樣的選擇器，“標(biāo)簽選擇器”，“ID選擇器”，“類(lèi)選擇 器”，只要是選擇器，只要有公共的CSS代碼，就可以用“選擇器的集體聲明”， 起到精簡(jiǎn)代碼的作用，有一段代碼如下：#headerfont-size:14px; background:#ccc;divfont-size:14px; width:960px;.bluefont-size:14px; color:#009;.h1font-size:14p

21、x; font-weight:normal;我們就可以將上面的代碼進(jìn)行精簡(jiǎn)，把公共的CSS代碼用選擇器的集體聲 明提取出來(lái)，有點(diǎn)類(lèi)似小學(xué)的“提取公因式”似的，如下：#header,div,.blue,h1font-size:14px;#headerbackground:#ccc;divwidth:960px;.bluecolor:#009;.h1font-weight:normal;這是選擇器的集體聲明的經(jīng)典應(yīng)用，把共同的部分提取出來(lái)，這么做的好處， 相同的部分共同定義，不同的部分單獨(dú)定義，保證風(fēng)格統(tǒng)一，樣式修改靈活，這 也是優(yōu)化CSS代碼的一塊，要記?。　具x擇器的嵌套】選擇器也是可以嵌套的，

22、如：#div1 p acolor:#900;/*意思是在ID為div1內(nèi)的p標(biāo)簽內(nèi)的鏈接a標(biāo)簽的文字顏色為紅色*/這樣的好處就是不需要在單獨(dú)的為ID為divl的標(biāo)簽內(nèi)的p標(biāo)簽內(nèi)的a 標(biāo)簽單獨(dú)定義class選擇器或者ID選擇器，CSS代碼不就少了嘛同樣也是CSS 代碼優(yōu)化的一塊。好，這節(jié)課主要講解了四種CSS代碼選擇器、選擇器的集體聲明、選擇器 的嵌套三塊知識(shí)，要掌握好，掌握牢固了，再?gòu)?qiáng)調(diào)一遍，這節(jié)也是為后面章節(jié)的 實(shí)戰(zhàn)做準(zhǔn)備的，如果后面學(xué)習(xí)過(guò)程中對(duì)這節(jié)知識(shí)有遺忘，那就趕緊回來(lái)翻翻！下 課！【知識(shí)三】CSS選擇器命名及常用命名規(guī)范的命名也是Web標(biāo)準(zhǔn)中的重要一項(xiàng)，標(biāo)準(zhǔn)的命名可以使代碼更加易讀，

23、而且利于搜索引擎搜索，比如定義了兩個(gè)div，一個(gè)id命名為“divl”，另外一 個(gè)命名為“News”，肯定第二個(gè)比較易讀，而且搜索引擎抓取率要高，在團(tuán)隊(duì) 合作中還可以大大提高工作效率。為了達(dá)到這種效果我們就要規(guī)范化命名（語(yǔ)義 化命名）！說(shuō)個(gè)題外話，規(guī)范化命名的代碼，會(huì)顯著你更加專(zhuān)業(yè)！關(guān)于CSS命名法，和其他的程序命名差不多，主要有三種：駱駝命名法，帕斯卡命名法，匈牙利命名法?？此麄兊拿滞Σ缓美斫獾?，不要被嚇到了，其 實(shí)很容易，不信的話繼續(xù)往下看【駱駝命名法】說(shuō)到駱駝大家肯定會(huì)想到它那明顯的特征，背部的隆起，一高一低的，我們 的命名也要這樣一高一低，怎么才能這樣，就用大小寫(xiě)字母唄，大寫(xiě)的英文就

24、 相當(dāng)于駱駝背部的凸起，小寫(xiě)的就是凹下去的地方了，但是這個(gè)也是有規(guī)則的， 就是第一個(gè)字母要小寫(xiě)，后面的詞的第一個(gè)字母就要用大寫(xiě)，如下：#headerBlock第一個(gè)單詞（header）的第一個(gè)字母（h）用小寫(xiě)，第二個(gè)單詞（block） 的第一個(gè)字母用大寫(xiě)（B），如果第二個(gè)單詞后面還有單詞呢？那就是下面這種情 況.navMenuRedButton第一個(gè)單詞（nav）的第一個(gè)字母（n）用小寫(xiě)，第二個(gè)單詞（menu）的 第一個(gè)字母用大寫(xiě)（M），第三個(gè)單詞（red）的第一個(gè)字母也用大寫(xiě)（R），第 四個(gè)單詞（button）的第一個(gè)字母還是用大寫(xiě)（B），同樣后面所有單詞的首字 母都要大寫(xiě)?！九了箍ā?/p>

25、這種命名法同樣也是大小寫(xiě)字母混編而成，和駱駝命名法很像，只有一點(diǎn)區(qū) 別，就是首字母要大寫(xiě)，如下：#HeaderBlock和駱駝命名法只有一點(diǎn)區(qū)別，就是所有單詞的首字母都要大寫(xiě)，當(dāng)然也包括 第一個(gè)單詞（header）的首字母（h）T，也要大寫(xiě)。.NavMenuRedButton如果有多個(gè)，也是全部單詞的首字母均要大寫(xiě)。題外話，如果說(shuō)“駱駝命名法”是單峰駝的話，那么“帕斯卡命名法”就是 雙峰駝了【匈牙利命名法】匈牙利命名法，是需要在名稱前面加上一個(gè)或多個(gè)小寫(xiě)字母作為前綴，來(lái)讓 名稱更加好認(rèn)，更容易理解，比如：#head_navigation.red_navMenuButton以上三種，前兩種（駱駝

26、命名法、帕斯卡命名法）在命名CSS選擇器的時(shí) 候比較常用，當(dāng)然這三種命名法可以混合使用，只需要遵守有一個(gè)原則“容易理 解，方便協(xié)同工作”就OK了，或者說(shuō)“即使不懂代碼的人看了代碼也知道這塊 起什么作用”，沒(méi)有必要強(qiáng)調(diào)是哪種命名法，根據(jù)個(gè)人喜好使用就行。以下為頁(yè)面模塊的常用命名：頭：header頁(yè)面主體：main內(nèi)容：content/container熱點(diǎn)：hot尾：footer新聞：news導(dǎo)航：nav下載：download側(cè)欄：sidebar子導(dǎo)航：subnav欄目：column菜單：menu頁(yè)面外圍控制整體布局寬度：wrapper搜索：search友情鏈接：friendlink左右中：le

27、ft right center頁(yè)腳：footer登錄條：loginbar版權(quán)：copyright標(biāo)志：logo滾動(dòng)：scroll廣告：banner小技巧：tips【知識(shí)四】盒子模型盒子模型，是XHTML+CSS布局頁(yè)面中的核心！要想學(xué)會(huì)用CSS布局頁(yè)面， 就首先要理解盒子模型！什么是盒子模型?對(duì)于初學(xué)者來(lái)說(shuō)，不容易理解，但是對(duì)于生活中的盒子大家應(yīng)該熟悉，大到 集裝箱，小到鉛筆盒，盒子模型你完全可以理解成現(xiàn)實(shí)生活中的盒子就可以了， 不然怎么能起個(gè)名字叫“盒子模型”呢？好！既然和現(xiàn)實(shí)生活中的盒子一樣，那我們想一下，生活中的盒子內(nèi)部是不 是空的好用來(lái)存放東西，而里面存放東西的區(qū)域我們給他起個(gè)名字叫“content（內(nèi)容）”，而盒子的盒子壁給他起個(gè)名字叫“border（邊框）”，如果盒 子內(nèi)部的東西比如是一塊硬盤(pán)，但是硬盤(pán)怕震動(dòng)，所以我