【正文】 又為 IE7特有標(biāo)簽.代碼:stylewrapper { width: 120px。將中間欄設(shè)置margin屬性中l(wèi)eft和right設(shè)置104px（該參數(shù)根據(jù)左右欄的寬度設(shè)置，只要略大于左右欄寬度即可），用于實(shí)現(xiàn)兩邊自適應(yīng)寬度。 　　要實(shí)現(xiàn)兩列的布局的話，定義左欄和右欄中的float屬性都為“l(fā)eft”。該屬性用來(lái)控制對(duì)象浮動(dòng)布局方式。 　　3．一列固定寬度居中。自適應(yīng)布局是網(wǎng)頁(yè)設(shè)計(jì)中常見(jiàn)的布局形式。這樣才能在手機(jī)、PDA上閱讀，才能隨時(shí)修改CSS實(shí)現(xiàn)改版。 　　DIV在使用時(shí)不再需要像表格一樣通過(guò)單元格來(lái)組織版式，通過(guò)CSS強(qiáng)大的樣式定義功能可以比表格更簡(jiǎn)單更自由地來(lái)控制頁(yè)面版式和樣式。盡管使用DW等網(wǎng)頁(yè)制作工具進(jìn)行可視化操作，但不可能幫助縮減代碼或刪除重復(fù)的代碼。 fontweight: bold。示例如下： view plaincopy to clipboardprint? html 　　head 　　title文檔標(biāo)題/title 　　style type=text/css 　　! 　　body {font: 10pt Arial} 　　h1 {font: 15pt/17pt Arial。而最接近目標(biāo)的樣式定義優(yōu)先權(quán)越高。這個(gè)工作組開(kāi)始討論第一版中沒(méi)有涉及到的問(wèn)題，其結(jié)果是1998年5月出版的第二版要求。哈坤于1994年在芝加哥的一次會(huì)議上第一次展示了CSS的建議，1995年他與波斯一起再次展示這個(gè)建議。隨著這些功能的增加外來(lái)定義樣式的語(yǔ)言越來(lái)越?jīng)]有意義了。1996年底，CSS已經(jīng)完成。波斯（Bert Bos）當(dāng)時(shí)正在設(shè)計(jì)一個(gè)叫做Argo的瀏覽器，他們決定一起合作設(shè)計(jì)CSS。 畢業(yè)論文（設(shè)計(jì)）　　　　　　　　　　　　　　重慶信息技術(shù)職業(yè)學(xué)院校園網(wǎng)絡(luò)規(guī)劃設(shè)計(jì)摘要從1990年代初HTML被發(fā)明開(kāi)始樣式表就以各種形式出現(xiàn)了，不同的瀏覽器結(jié)合了它們各自的樣式語(yǔ)言，讀者可以使用這些樣式語(yǔ)言來(lái)調(diào)節(jié)網(wǎng)頁(yè)的顯示方式。當(dāng)時(shí)已經(jīng)有過(guò)一些樣式表語(yǔ)言的建議了，但CSS是第一個(gè)含有“層疊”的主意的。1996年12月CSS要求的第一版本被出版。1994年哈坤當(dāng)時(shí)W3C剛剛建立，W3C對(duì)CSS的發(fā)展很感興趣，它為此組織了一次討論會(huì)。到2007年為止，第三版還未完備。高優(yōu)先權(quán)樣式將繼承低優(yōu)先權(quán)樣式的未重疊定義但覆蓋重疊的定義。 fontweight: bold。 color: blue}　　p {font: 10pt/12pt Arial。 　　復(fù)雜的表格設(shè)計(jì)使得設(shè)計(jì)極為不易，修改更為復(fù)雜，最后生成的網(wǎng)頁(yè)代碼除了表格本身的代碼，還有許多沒(méi)有任何意義的圖像占位符及其他元素，文件量龐大，最終導(dǎo)致瀏覽器下載及解析速度變慢。 　　三、CSS入門(mén)的幾個(gè)誤區(qū) 　?。ㄒ唬┎灰脗鹘y(tǒng)的表格思維來(lái)嵌套DIV。 　?。ǘ┎槐貫槊繅K內(nèi)容都建立ID。自適應(yīng)的布局能夠根據(jù)瀏覽器窗口的大小，自動(dòng)改變其寬度或高度值，是一種非常靈活的布局形式。頁(yè)面整體居中是網(wǎng)頁(yè)設(shè)計(jì)中常見(jiàn)的形式，在傳統(tǒng)表格布局中，我們可以使用表格的 align屬性來(lái)實(shí)現(xiàn)。 　　Float是CSS布局非常強(qiáng)大的布局功能。這樣右欄的內(nèi)容將流入到左欄的右邊，并根據(jù)左欄的寬度，自動(dòng)流入并貼至左欄，而貼近的程度則由左欄的右邊距和右欄的左邊距來(lái)控制，不需要一欄對(duì)象本身的寬度值。第三節(jié)CSS+DIV與瀏覽器的兼容IEIEFF 與兼容性有關(guān)的特性CSS HACK代碼:所有瀏覽器 通用height: 100px。 } /* FireFox */*html wrapper { width: 80px。}/* Hide from IE Mac \*/.clearfix {display:block。marginright: 12px。除了前面那片文章，《針對(duì)firefox ie6 ie7的css樣式》中的hack方式也是很好用的。下面我簡(jiǎn)單解釋一下各瀏覽器怎樣理解這三個(gè)屬性：在FF下，第3個(gè)屬性FF不認(rèn)識(shí)，所以它讀的是 height:100px。}center { MARGINRIGHT: auto。MARGINLEFT: auto。 margin:0 0 0 100px。這樣問(wèn)題就大了，如果只用寬度和高度，正常的瀏覽器里這兩個(gè)值就不會(huì)變，如果只用minwidth和minheight的話，IE下面根本等于沒(méi)有設(shè)置寬度和高度。}6 頁(yè)面的最小寬度minwidth是個(gè)非常方便的CSS命令，它可以指定元素最小也不能小于某個(gè)寬度，這樣就能保證排版一直正確。}或者加入:after（偽對(duì)象）,設(shè)置在對(duì)象后發(fā)生的內(nèi)容，通常和content配合使用，IE不支持此偽對(duì)象，非Ie 瀏覽器支持，所以并不影響到IE/WIN瀏覽器。}left{float:left。11 高度不適應(yīng)高度不適應(yīng)是當(dāng)內(nèi)層對(duì)象的高度發(fā)生變化時(shí)外層高度不能自動(dòng)進(jìn)行調(diào)節(jié)，特別是當(dāng)內(nèi)層對(duì)象使用margin 或paddign 時(shí)。屏蔽IE瀏覽器（也就是IE下不顯示）*:lang(zh) select {font:12px !important。僅IE6不識(shí)別select { display /*IE6不識(shí)別*/:none。 voicefamily:inherit。 visibility:hidden。只有Opera識(shí)別media all and (minwidth: 0px){ select {……} }針對(duì)Opera瀏覽器做單獨(dú)的設(shè)定。/**/下面是IE的條件注釋?zhuān)瑐€(gè)人覺(jué)得用條件注釋調(diào)用相應(yīng) Hack是比較完美的多瀏覽器兼容的解決辦法。但很多情況你來(lái)到下一行，間隙就沒(méi)了，但是前面的內(nèi)容又空了很大一塊，出現(xiàn)這種情況雖然你可以改變IE的Margin，然后調(diào)整Firefox下面的Padding，以便使得兩者顯示起來(lái)得效果很相似，但是你得CSS將變得臭長(zhǎng)無(wú)比，你不得不多考慮更多可能出現(xiàn)這種問(wèn)題補(bǔ)救措施，雖然你知道千篇一律來(lái)Hack它們，但是你會(huì)煩得要命。說(shuō)它容易，往往有很多問(wèn)題困擾著新手，介紹了非常多的技巧，這些小技巧與知識(shí)能事半功倍的給大家以幫助?！　∪?、邊界重合時(shí)利用padding或border來(lái)避免　　您可能會(huì)為了一點(diǎn)不應(yīng)該出現(xiàn)的空間而焦頭爛額，或者您需要一點(diǎn)點(diǎn)空間時(shí)，怎樣都擠不出來(lái)?！　∑摺⒂涀　癟RBL”寫(xiě)法　　border，margin與padding的簡(jiǎn)寫(xiě)語(yǔ)法有特定順序，從上方開(kāi)始順時(shí)針?lè)较蜣D(zhuǎn)動(dòng)：top,right,bottom,left. 所以margin:0 1px 3px 5px。這里的gb2312告訴瀏覽器，本文檔采用簡(jiǎn)體中文編碼；還有一種常用的編碼是UTF8編碼，它是國(guó)際通用的編碼。}/style這種形式是內(nèi)部樣式表，它是以style和/style結(jié)尾，寫(xiě)在源代碼的head標(biāo)簽內(nèi)。5）css優(yōu)先級(jí)id優(yōu)先級(jí)高于class 后面的樣式覆蓋前面的 指定的高于繼承 行內(nèi)樣式高于內(nèi)部或外部樣式 總結(jié)：?jiǎn)我坏?id)高于共用的(class)，有指定的用指定的，無(wú)指定則繼承離它最近的 6）css盒模型組成css盒模型是本節(jié)教程的重點(diǎn)。是不是這樣就很容易理解盒模型了。 charset=utf8 /title個(gè)人博客/titlelink rel=stylesheet type=text/css href=Style/ /script type=text/javascript!function MM_swapImgRestore() { // var i,x,a=。i++) =。}}}function MM_findObj(n, d) { // var p,i,x。) x=[n]。amp。 return x。}}///script/headbody onload=MM_preloadImages(39。,39。,39。,1)img src=images/ name=Image2 width=100 height=468 border=0 id=Image2 //a/div div id=ap4a href= onmouseout=MM_swapImgRestore() onmouseover=MM_swapImage(39。,39。,39。,1)img src=images/ name=Image6 width=100 height=469 border=0 id=Image6 //a/div /div div id=navCopyright 2007. 169。(x=a[i])amp。 i++) if (a[i].indexOf()!=0){ [j]=new Image。} if(!(x=d[n])amp。 for(i=0。amp。 if(!) =。,39。 margin:0 auto。 float:left。 float:left。 height:470px。 } nav{ fontsize:12px。 height:766px。 background:url(../images/)。 float:left。 }main{ width:548px。 background:333。 textdecoration:none。 border:1px 333 solid。 height:80px。 float:left。結(jié)束語(yǔ)完成情況：個(gè)人認(rèn)為在這篇論文基本上達(dá)到了最初要達(dá)到的目的，論文完全運(yùn)用CSS+DIV對(duì)網(wǎng)站的整體進(jìn)行布局，而且還是適當(dāng)?shù)募右员砀竦氖褂茫怪肅SS+DIV的布局進(jìn)行對(duì)比，從而更能體現(xiàn)出CSS+DIV在網(wǎng)站網(wǎng)頁(yè)的布局中的優(yōu)點(diǎn)，但由于個(gè)人水平有限，不足之處在所難免，希望指導(dǎo)老師給予指正。 border:1px 333 solid。 } banner p{ background:333。 }main ul a{ width:93px。 height:35px。 border:1px 333 solid。 height:90px。 } left{ height:766px。 float:left。 textalign:center。 }ap6{ width:100px。 height:470px。 height:470px。 }left{ height:766px。,1)img src=images/ name=Image1 width=138 height=434 border=0 id=Image1 //a/p /div div id=main ul lia href=歡迎/a/li lia href=主頁(yè)/a/li lia href=日志/a/li lia href=相冊(cè)/a/li lia href=音樂(lè)/a/li lia href=留言/a/li /ul div id=conbottom/div /div div id=navigation/div/div /div /div div id=footer/div div id=right/div /body/html其他各頁(yè)代碼類(lèi)似。}}///script/headbody onload=MM_preloadImages(39。 return