【正文】 個(gè)建議。這個(gè)工作組開(kāi)始討論第一版中沒(méi)有涉及到的問(wèn)題，其結(jié)果是1998年5月出版的第二版要求。波斯（Bert Bos）當(dāng)時(shí)正在設(shè)計(jì)一個(gè)叫做Argo的瀏覽器，他們決定一起合作設(shè)計(jì)CSS。1996年底，CSS已經(jīng)完成。 提高頁(yè)面瀏覽速度 對(duì)于同一個(gè)頁(yè)面視覺(jué)效果，采用CSS+DIV重構(gòu)的頁(yè)面容量要比TABLE編碼的頁(yè)面文件容量小得多，前者一般只有后者的1/2大小。示例如下：view plaincopy to clipboardprint?head title文檔標(biāo)題/title link rel=stylesheet href= type=text/css /head headtitle文檔標(biāo)題/titlelink rel=stylesheet href= type=text/css/head而在XML中，你應(yīng)該如下例所示在聲明區(qū)中加入： 　　? xmlstylesheet type=text/css href= ? 定義內(nèi)部樣式塊對(duì)象 (Embedding a Style Block) 你可以在你的HTML文檔的HTML和BODY標(biāo)記之間插入一個(gè)STYLE.../STYLE塊對(duì)象。 color: blue} 　　p {font: 10pt/12pt Arial。 　　一、傳統(tǒng)表格布局的缺陷 　　傳統(tǒng)表格布局方式實(shí)際上是利用表格元素具有無(wú)邊框的特性。DIV可以理解為層或者是塊。 　　使用WEB標(biāo)準(zhǔn)的目的是分離內(nèi)容和表現(xiàn)。 　　四、CSS網(wǎng)頁(yè)布局分類 　　1．一列固定寬度。一列自適應(yīng)布局只需要將寬度由固定值改為百分比的形式即可完成。如果將左右邊距設(shè)置為auto，瀏覽器就會(huì)將DIV左右邊距設(shè)置為相同，從而實(shí)現(xiàn)居中效果。 　　浮動(dòng)是一種非常先進(jìn)的布局方式，它能夠改變頁(yè)面中對(duì)象的前后流動(dòng)順序，這樣可以使內(nèi)容的排版變得簡(jiǎn)單而且具有良好的伸縮性。如果要求左欄和右欄固定寬度，中間欄需要在左欄和右欄中間，并根據(jù)左右欄的寬度自動(dòng)調(diào)整間距。IE7 專用*+height: 100px。display:block。(常見(jiàn)于導(dǎo)航標(biāo)簽)4, FF 和 IE 對(duì) BOX 理解的差異導(dǎo)致相差 2px 的還有設(shè)為 float的div在ie下 margin加倍等問(wèn)題.5, ul 標(biāo)簽在 FF 下面默認(rèn)有 liststyle 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見(jiàn)于導(dǎo)航標(biāo)簽和內(nèi)容列表)6, 作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: .7, 關(guān)于手形光標(biāo). cursor: pointer. 而hand 只適用于 :兼容代碼:hack最推薦的模式。}什么是瀏覽器HACK：當(dāng)我們使用不同的瀏覽器（Firefox IE7 IE6）訪問(wèn)同一個(gè)網(wǎng)站，或者頁(yè)面的時(shí)候，會(huì)出現(xiàn)一些不兼容的問(wèn)題，有的顯示出來(lái)正常，有的顯示出來(lái)不正常，我們?cè)诰帉慍SS的時(shí)候會(huì)很惱火，剛修復(fù)了這個(gè)瀏覽器的問(wèn)題，結(jié)果另外一個(gè)瀏覽器卻出了新問(wèn)題。第二個(gè)HACK IE6專用_height:100px。1 針對(duì)firefox ie6 ie7的css樣式現(xiàn)在大部分都是用!important來(lái)hack，對(duì)于ie6和firefox測(cè)試可以正常顯示，但是ie7對(duì)!important可以正確解釋，會(huì)導(dǎo)致頁(yè)面沒(méi)按要求顯示！找到一個(gè)針對(duì)IE7不錯(cuò)的hack方式就是使用“*+html”，現(xiàn)在用IE7瀏覽一下，應(yīng)該沒(méi)有問(wèn)題了現(xiàn)在寫一個(gè)CSS可以這樣：1 { color: 333。這個(gè)的意思就是在父級(jí)元素內(nèi)的內(nèi)容居中；對(duì)于IE這樣設(shè)定就已經(jīng)可以了。//for w\idth:500px。Inline元素的特點(diǎn)是:和其他元素在同一行上,…不可控制(內(nèi)嵌元素)。 height: 35px。width:e?xpression( 600? “600px”: “auto” )。height: 0。}*html left{marginright:3px。marginbottom: 20px。第二句是MAC上safari瀏覽器獨(dú)有的。}這里與上面一句不同的是在選擇符與花括號(hào)之間多了一個(gè)CSS注釋。這點(diǎn)要明確。 textoverflow:ellipsis。，media tty {i{content:。不要你認(rèn)為發(fā)現(xiàn)了hack的辦法，你就掌握了一切，我們并不是Hack的奴隸。liststyle:none?！　∫?、若有疑問(wèn)立即檢測(cè)　　在出錯(cuò)時(shí)若能對(duì)原始代碼做簡(jiǎn)單檢測(cè)可以省去很多頭痛問(wèn)題。有些方法可以解決此問(wèn)題，但如果母元素需要指定高度與寬度時(shí)，最好能夠在母元素之內(nèi)的子元素套用margin,或者當(dāng)子元素需要指定高度與寬度時(shí)，在母元素套用padding以達(dá)效果?！　“?、只要不是零的值，都要指定單位第二章詳述CSS+DIV網(wǎng)頁(yè)布局第一節(jié) HTML CSS基礎(chǔ)知識(shí)文檔類型 語(yǔ)言編碼 html標(biāo)簽 css樣式 css優(yōu)先級(jí) css盒模型組成 1）文檔類型當(dāng)我們用dreamweaver新建一下html格式文檔時(shí)，查看源代碼，會(huì)發(fā)現(xiàn)代碼最上部有如下這句話：!DOCTYPE html PUBLIC //W3C//DTD XHTML Transitional//EN 這句話標(biāo)明本文檔是過(guò)渡類型，另外還有框架和嚴(yán)格類型，目前一般都采用過(guò)渡類型，因?yàn)闉g覽器對(duì)XHTML的解析比較寬松，但必須符合XHTML的語(yǔ)法。成對(duì)的標(biāo)簽以“/標(biāo)簽名”結(jié)束，有些單一的標(biāo)簽在本身的結(jié)尾打上/來(lái)結(jié)束，這是xhtml代碼編寫的規(guī)范。p style=fontsize:18px。學(xué)習(xí)web標(biāo)準(zhǔn)，首先要弄懂的就是這個(gè)盒模型，這就是DIV排版的核心所在。二． 運(yùn)用PHOTOSHOP對(duì)網(wǎng)站背景以及相關(guān)圖片的處理。amp。 var i,j=,a=。amp。amp。i。 for(i=0。images/39。images/39。Image239。39。images/39。Image639。 for(i=0。}function MM_preloadImages() { // var d=document。 if(!d) d=document。 for (i=0。amp。}function MM_swapImage() { // var i,j=0,x,a=。images/39。二． CSS代碼部分(1)歡迎頁(yè)CSS代碼：charset utf8。 width:99px。 margin:0 auto。 float:left。 height:470px。 margin:0 auto。 } (2) 首頁(yè)CSS代碼如下：charset utf8。 width:99px。 border:1px 333 solid。 float:right。 float:left。 } main ul li a:hover{ background:000。 textalign:center。 background:url(../images/)。所得收獲：論文是闡述CSS+DIV在網(wǎng)頁(yè)的布局中的優(yōu)越性，在對(duì)基礎(chǔ)知識(shí)有一定了解的基礎(chǔ)上來(lái)進(jìn)而對(duì)CSS+DIV這種當(dāng)今流行的網(wǎng)頁(yè)布局進(jìn)行學(xué)習(xí)，在這個(gè)過(guò)長(zhǎng)中，就我本身來(lái)時(shí)學(xué)習(xí)到了很多知識(shí)，不僅對(duì)CSS+DIV的基礎(chǔ)知識(shí)有了更深的理解而且對(duì)CSS對(duì)網(wǎng)站的開(kāi)發(fā)過(guò)程中的遇到的困難有了一定的解決能力，更對(duì)這種先進(jìn)的知識(shí)有了更深的理解，所以在這篇論文的寫作過(guò)程中，自己受益匪淺。 borderright:1px 333 solid。 } navigation{ width:698px。 height:470px。 display:inlineblock。 lineheight:35px。 margintop:20px。 height:766px。 margin:0 auto。 }right{ width:99px。 float:left。 } ap5{ width:100px。 height:470px。 height:766px。 } body{ width:900px。39。i+=3) if ((x=MM_findObj(a[i]))!=null){[j++]=x。 if(!x amp。i++) x=[i][n]。 n=(0,p)。 i。amp。images/39。39。Image439。images/39。39。images/39。 =a[i+2]。 ) x=(n)。!xamp。amp。 [j++].src=a[i]。amp。第二節(jié) 操作一． HTML代碼部分(1) 歡迎頁(yè)代碼如下：!DOCTYPE html PUBLIC //W3C//DTD XHTML Transitional//EN html xmlns=headmeta equiv=ContentType content=text/html。我們可以把它想像成現(xiàn)實(shí)中上方開(kāi)口的盒子，然后從正上往下俯視，邊框相當(dāng)于盒子的厚度，內(nèi)容相對(duì)于盒子中所裝物體的空間，而填充呢，相當(dāng)于為防震而在盒子內(nèi)填充的泡沫，邊界呢相當(dāng)于在這個(gè)盒子周圍要留出一定的空間，方便取出。import url(/css/)的形式鏈接全局樣式，這樣就使代碼達(dá)到很好的重用性。styleh2 { color:f00。就像我們平時(shí)所說(shuō)的漢語(yǔ)、英語(yǔ)一樣。這時(shí)請(qǐng)嘗試將這些值改為49%，%。如果您遇到浮動(dòng)元素延伸到外圍容器的邊框或者其他不正常情況，請(qǐng)先確定您的做法是正確的。嘗試一下吧，再也不要亂嵌套了，雖然在Div+CSS的方式下你幾乎可以想怎么嵌套就怎么嵌套，但是按照上面的規(guī)律你將輕松很多，從而事半功倍！ 第四節(jié) 個(gè)人總結(jié)的關(guān)于CSS+DIV布局的八條學(xué)習(xí)方法CSS網(wǎng)頁(yè)布局，說(shuō)難，其實(shí)很簡(jiǎn)單。當(dāng)你符合這樣的規(guī)則的時(shí)候，那些倒霉的，不聽(tīng)話的間隙就不會(huì)在里面出現(xiàn)了，當(dāng)你僅僅是div里面放li，而不用ul的時(shí)候，你會(huì)發(fā)現(xiàn)你的間隙十分難控制，一般情況下，IE6和IE7會(huì)憑空多一些間距。}}/* */IE5/MAC的過(guò)濾器，一般用不著/**//*/import 。只是目前Firefox并不支持。 clear:both。 voicefamily :}。html/**/ body select {……}這句與上一句的作用相同。}或者為DIV加上border屬性。頁(yè)面結(jié)構(gòu)盡量簡(jiǎn)單。width:800px。//將對(duì)象作為塊元素級(jí)的表格顯示}或者.hackbox{clear:both。 minheight: 35px。5 IE與寬度和高度的問(wèn)題IE不認(rèn)得min這個(gè)定義，但實(shí)際上它把正常的width和height當(dāng)作有min的情況來(lái)使。 width:100px。 ”需要說(shuō)明的是，如果你想用這個(gè)方法使整個(gè)頁(yè)面要居中，建議不要套在一個(gè)DIV里，你可以依次拆出多個(gè)div，只要在每個(gè)拆出的div里定義MARGINRIGHT: auto。2 css布局中的居中問(wèn)題主要的樣式定義如下：body {TEXTALIGN: center。_height:150px。暫時(shí)還沒(méi)找到IE7專用的HACK。margintop: 24px。}.clearfix {display:inlineblock。 /* IE6 */}/style2, IE6/IE77對(duì)FireFox from 針對(duì)firefox ie6 ie7的css樣式*+html 與 *html 是IE特有的標(biāo)簽, firefox *+html