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