【正文】 在HTML標簽中間加入大量的設計代碼，如width=100%，border=0等，表格布局的混合代碼就這樣編寫的。盡管使用DW等網頁制作工具進行可視化操作，但不可能幫助縮減代碼或刪除重復的代碼。 　　二、CSS布局 　　使用CSS布局可以從根本上解決表格布局帶來的問題。DIV可以理解為層或者是塊。DIV的功能僅僅是將一段信息標記出來用于后期樣式的定義。 　　DIV在使用時不再需要像表格一樣通過單元格來組織版式，通過CSS強大的樣式定義功能可以比表格更簡單更自由地來控制頁面版式和樣式。CSS布局就是將原來用table的地方用DIV來替代，原來是表格嵌套，現在是DIV嵌套。 　　使用WEB標準的目的是分離內容和表現。通過CSS樣式定義每一塊中的內容，才表現出來。這樣才能在手機、PDA上閱讀，才能隨時修改CSS實現改版。我們知道內容都是有結構的，理解表現和結構相分離，相同的結構的內容我們可以用同一個樣式來定義，比如相當級別的標題、正文和圖片。 　　四、CSS網頁布局分類 　　1．一列固定寬度。DIV在默認狀態(tài)下，寬度將占據整行的空間，因此當設置了寬度屬性后，DIV寬度將變?yōu)樵O置的寬度。自適應布局是網頁設計中常見的布局形式。良好的自適應布局網站對不同分辨率的顯示器都能提供最好的顯示效果。一列自適應布局只需要將寬度由固定值改為百分比的形式即可完成。Width（寬度）屬性也不例外。 　　3．一列固定寬度居中。DIV本身也支持該屬性，但在CSS布局中為了實現表格與內容分離，因此在設置居中屬性時，通過margin屬性來控制對象的上下左右四個方向的外邊距。如果將左右邊距設置為auto，瀏覽器就會將DIV左右邊距設置為相同，從而實現居中效果。我們知道DIV用于對某一個區(qū)域的標識，兩列的布局需要采用兩個DIV。該屬性用來控制對象浮動布局方式。也是理解CSS布局的關鍵問題所在。 　　浮動是一種非常先進的布局方式，它能夠改變頁面中對象的前后流動順序，這樣可以使內容的排版變得簡單而且具有良好的伸縮性。使用left時，表示右側對象將流到當前對象左側。 　　要實現兩列的布局的話，定義左欄和右欄中的float屬性都為“l(fā)eft”。 　　浮動式布局使得頁面的大部分內容都可以由瀏覽器來自動調試之間的關系，使我們能夠專注于樣式設計而非其相互之間的浮動關系，我們只需要簡單地設置浮動方向便可以完成對象的布局分布。如果要求左欄和右欄固定寬度，中間欄需要在左欄和右欄中間，并根據左右欄的寬度自動調整間距。 　　將左欄的position設置為absolute，并將top和left設置為0px。將中間欄設置margin屬性中l(wèi)eft和right設置104px（該參數根據左右欄的寬度設置，只要略大于左右欄寬度即可），用于實現兩邊自適應寬度。IE6 專用_height: 100px。IE7 專用*+height: 100px。一、CSS HACK以下兩種方法幾乎能解決現今所有HACK.1, !important (不是很推薦，用下面的一種感覺最安全)隨著IE7對!important的支持, !important 方法現在只針對IE6的HACK.(.)代碼:stylewrapper {width: 100px!important。 /* IE6 */}/style2, IE6/IE77對FireFox from 針對firefox ie6 ie7的css樣式*+html 與 *html 是IE特有的標簽, firefox *+html 又為 IE7特有標簽.代碼:stylewrapper { width: 120px。} /* ie6 fixed */*+html wrapper { width: 60px。display:block。clear:both。}.clearfix {display:inlineblock。}/* End hide from IE Mac *//* end of clearfix *//style三、其他兼容技巧(相當有用)1, FF下給 div 設置 padding 后會導致 width 和 height 增加, 但IE不會.(可用!important解決)2, 居中問題.1). lineheight 設置為 當前 div 相同的高度, 再通過 verticalalign: middle.( 注意內容不要換行.)2).水平居中. margin: 0 auto。(常見于導航標簽)4, FF 和 IE 對 BOX 理解的差異導致相差 2px 的還有設為 float的div在ie下 margin加倍等問題.5, ul 標簽在 FF 下面默認有 liststyle 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見于導航標簽和內容列表)6, 作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: .7, 關于手形光標. cursor: pointer. 而hand 只適用于 :兼容代碼:hack最推薦的模式。width: 40px。margintop: 24px。}/* IE6 */*html .submitbutton {margintop: 21px。}什么是瀏覽器HACK：當我們使用不同的瀏覽器（Firefox IE7 IE6）訪問同一個網站，或者頁面的時候，會出現一些不兼容的問題，有的顯示出來正常，有的顯示出來不正常，我們在編寫CSS的時候會很惱火，剛修復了這個瀏覽器的問題，結果另外一個瀏覽器卻出了新問題。這下就和諧了。暫時還沒找到IE7專用的HACK。有一點邏輯思想的人都會知道可以用IE和FF的HACK結合起來使用，下面介紹三個HACK，例如：（適合新手，呵呵，高手就在這里路過吧。第二個HACK IE6專用_height:100px。介紹完了這三個HACK了，下面我們再來看看如何在一個樣式里分別給一個屬性定義IE6 IE7 FF專用的HACK，看下面的代碼，順序不能錯哦：程序代碼height:100px。_height:150px。在IE7下，第三個屬性IE7不認識，所以它讀第2個屬性，又因為第二個屬性覆蓋了第一個屬性，所以IE7最終讀出的是第2個屬性 *height:120px。1 針對firefox ie6 ie7的css樣式現在大部分都是用!important來hack，對于ie6和firefox測試可以正常顯示，但是ie7對!important可以正確解釋，會導致頁面沒按要求顯示！找到一個針對IE7不錯的hack方式就是使用“*+html”，現在用IE7瀏覽一下，應該沒有問題了現在寫一個CSS可以這樣：1 { color: 333。 } /* IE6 */*+html 1 { color: 999。2 css布局中的居中問題主要的樣式定義如下：body {TEXTALIGN: center。 MARGINLEFT: auto。這個的意思就是在父級元素內的內容居中；對于IE這樣設定就已經可以了。解決辦法就是在子元素定義時候設定時再加上“MARGINRIGHT: auto。 ”需要說明的是，如果你想用這個方法使整個頁面要居中，建議不要套在一個DIV里，你可以依次拆出多個div，只要在每個拆出的div里定義MARGINRIGHT: auto。 就可以了。//for w\idth:500px。//for ff+width /**/:500px。 width:100px。 //這種情況之下IE會產生200px的距離 display:inline。Inline元素的特點是:和其他元素在同一行上,…不可控制(內嵌元素)。 //可以為內嵌元素模擬為塊元素 display:inline。5 IE與寬度和高度的問題IE不認得min這個定義，但實際上它把正常的width和height當作有min的情況來使。比如要設置背景圖片，這個寬度是比較重要的。 height: 35px。 height: auto。 minheight: 35px。但IE不認得這個，而它實際上把 width當做最小寬度來使。width:e?xpression( 600? “600px”: “auto” )。它實際上通過Javascript的判斷來實現最小寬度。//將對象作為塊元素級的表格顯示}或者.hackbox{clear:both。這種的最麻煩的……box:after{content: “.”。height: 0。visibility: hidden。width:800px。width:50%。}*html left{marginright:3px。有些內容顯示不出來，當鼠標選擇這個區(qū)域是發(fā)現內容確實在頁面。頁面結構盡量簡單。例：div id=”box”pp對象中的內容/p/divCSS：box {backgroundcolor:eee。marginbottom: 20px。 }解決方法：在P對象上下各加2個空的div對象CSS代碼：.1{height:0px。}或者為DIV加上border屬性。} /*FF,OP可見*/select:empty {font:12px !important。第二句是MAC上safari瀏覽器獨有的。IE6及IE6以下識別* html {…}。html/**/ body select {……}這句與上一句的作用相同。}這里主要是通過CSS注釋分開一個屬性與值，流釋在冒號前。}這里與上面一句不同的是在選擇符與花括號之間多了一個CSS注釋。}這一句是在上一句中去掉了屬性區(qū)的注釋。 voicefamily :}。 width:正確寬度。這點要明確。 display:block。 clear:both。}在Firefox中，當子級都為浮動時，那么父級的高度就無法完全的包住整個子級，那么這時用這個清除浮動的HACK來對父級做一次定義，那么就可以解決這個問題 。 textoverflow:ellipsis。 overflow:hidden。只是目前Firefox并不支持。以上都是寫CSS中的一些HACK，建議遵循正確的標簽嵌套(div ul li 嵌套結構關系)，這樣可以減少你使用Hack的頻率，不要進入理解誤區(qū)，并不是一個頁面就需要很多的hack來保持多瀏覽器兼容)，很多情況下也許一個Hack都不用也可以讓瀏覽器工作得非常好，這些都是用來解決局部的兼容性問題，如果希望把兼容性的內容也分離出來，不妨試一下下面的幾種過濾器。，media tty {i{content:。39。}}/* */IE5/MAC的過濾器，一般用不著/**//*/import 。把需要hack的地方單獨放到一個文件里面，當瀏覽器版本符合的時候就可以調用那個被Hack的樣式，這樣不僅使用起來非常方便，而且對于制作這個CSS本身來講，可以更嚴格的觀察到是否有必要使用hack，很多情況下，當我本人寫CSS如果把全部代碼包括Hack都寫到一個CSS文件的時候的時候會很隨意，想怎么Hack就怎么Hack，而你獨立出來寫的時候，你就會不自覺的考慮是否有必要Hack，是先Hack CSS？還是先把主CSS里面的東西調整到盡可能的不需要Hack？當你僅用很少的Hack就讓很多瀏覽器很乖很聽話的時候，你是不是很有成就感呢？你知道怎么選擇了吧～～呵呵IE的if條件Hack 自己可以靈活使用參看這篇IE條件注釋Only IE 所有的IE可識別Only IE