| 1）成塊布局，盡量不要拆散一塊一塊的內容，用DIV保持整體，DIV外層非色彩延伸的，使用固定寬度1003，否則使用100%後，裡面再包含1003固定寬度，布局的時候能成一直線的保持一直（垂直和水平盡量保持直線型） 2）要置中，使用最外層DIV左右邊界自動；
3）介面圖片用背景表示，按鈕、標誌用圖片，每個圖片加上ALT說明；
4）左右使用浮動，三欄使用兩個左浮動，或右浮動加一個右或左浮動。
5）DIV垂直無法自動張開，使用清除浮動後，無法解決就使用辦法一：1%高度，溢出使用自動或inherit，沒有辦法的時候使用隱藏；辦法2：在撐開表格的最底層插入一個DIV，行高字大小都為0px，清除兩者，顯示為塊。
6）!important;使用之來解決IE與FF相容
7)圖片與DIV裂開的解決思路：1.把DIV和IMG的標籤放成一行 2.刪除無用的CSS樣式 3.改變布局策略
8）圖片在DIV中混排的時候，如果圖片使用浮動之類的後，就沒有辦法自動撐開DIV的，這個時候可以把DIV高度調整為和圖片一樣的高。注意，調DIV高度的時候要合適，太小了在IE中可能顯示很好，但是在FF中有可能顯示只顯示一半的。
9）定義全域樣式和局部樣式的方法。ID樣式不允許重複使用，要在同一個頁面中重複使用一個樣式請使用CLASS定義
10）多個形狀相似、列表式的內容使用LI
11）UL 、Form、P等標籤預設有邊界和填充之類的，如果不要的話要定義為0即可。
12）新聞日期的排版請在LI中使用span標籤，把日期放到其中，定義SPAN右浮動，然後再把SPAN代碼提到新聞前面。注意li之中不允許有<div>標籤。
13）li前面的小表徵圖請使用背景不重複來定位，因為背景有定位功能。
14）絕對位置的時候把要定位的DIV提到BODY後面，所有本文代碼前面，然後再調整置入來定位，要注意有其他的辦法的時候盡量不要採用絕對位置，絕對位置並不是完美的布局方法。頁面內容是靠左邊或者是右邊的話使用絕對位置倒可以，如果是置中的話採用絕對位置就會出現解析度大的時候的移位
15）無法定位的時候請嘗試清除浮動。
16）產品排列的時候樣式盡量採用CLASS，這樣有利於複製。簡單的圖片列表可以使用LI，複雜的、內容很多很難排版的就使用DIV，我們的原則是：用最少的DIV來達到最好的效果。每個產品是一個單獨的LI或者DIV封裝，這樣利於複製，每行又用一個大的DIV封裝。
17）如果LI中有表徵圖，又有下虛線的時候，不能使用LI定義兩個背景，單獨定義一個LI的背景也不顯示，這樣的解決的辦法是在文字前後加<SPAN>標籤，定義表徵圖到<SPAN>中，虛線定義到LI中。這個時候如果也有日期的話，那麼他們的浮動要注意了，文字帶表徵圖就左浮動，日期右浮動，按照常規排列代碼。只有其中一個的時候就要反常規放置，在右邊的，放到左邊最前面。如果出現LI列表裂開，請嘗試清除浮動和把顯示設定為塊。
18）頁內的描點的使用：先插入描點，命名好。然後在需要連結的地址用#號加上命名的名字。例如：我命名的描點：header，那麼在需要點擊返回頭部的地方做連結地址：#hearder 19）內頁的布局主要是注意CSS的應用不能影響到首頁，我們可以採用雙CSS的方法，但是要注意不要每個頁面都建立一個CSS樣式啊，那樣就很多樣式表了，除非你的內頁沒有一點類同的地方。一般內頁有類同的地方，就和其他內頁那樣共用一個樣式，內頁如果相同的話可以使用模板的。建議內頁的樣式加一個首碼，例如首頁是main，簡介就可以ab_main這樣就不會覆蓋了。做的時候先備份CSS樣式表。放到垃圾桶中先。做到新聞的時候就可以考慮採用模板了。 20）頁面中使用邊界的時候，IE和FF解釋的結果有可能不一樣，有可能IE中邊界很遠，FF中邊界很小，這個時候可以把邊界改為同值填充就可以解決。
21）
1.文字框和文本不對齊時候先嘗試設定input的vertical-align:middle屬性來解決。不行，先嘗試完垂直對齊中所有的對齊樣式，還不行就去掉vertical-align:middle這些樣式，改為邊界填充，再不行就縮小文字框的高度為16PX左右。
2.調整文字框和圖片按鈕對齊：網上看到別人經常使用： align="absmiddle"，但是這個樣式是無法通過W3C的驗證的，所以我們盡量不要採用，我們先嘗試完垂直對齊中所有的對齊樣式，不行的時候先調整文字框和圖片按鈕的邊界，如果還不行，就用樣式控制文字框和按鈕到垂直頂部對齊，再用PS把圖片按鈕的高度縮小或者放大，並且，切割圖片的時候上下不要切到太多的無用的邊。
建議：盡量不要採用圖片來做按鈕，比較難控制。另外，為了美觀，實在沒有辦法的時候可以採用DIV將文字與表單元素分離。文字的DIV的高度與最外的DIV一樣的高，行高也是一樣的高。表單元素很難用垂直的邊界和填充來控制。
文字框的行高會影響文字輸入的位置。行高與文字框一樣的高，文本就垂直置中在文字框。 注意：包含住所有表單元素的大的DIV的行高也可能會影響到FF中的表單的內容的垂直排列 22）本文的文字內容和圖片地區盡量不要採用DIV之類大標籤了，盡量採用小型標籤，比如：P、Span、h1、h2、ul、li等的，這樣給人的感覺是排版有層次，標籤大小有區分，結構清晰。
P差不多是最小的標籤了，他裡面不要包含h1、UL之類的了，但可以包含span 23）圖文混排的一些好的經驗：盡量不用DIV來排版圖文。（圖片列表中的圖片和新聞列表不屬於此範圍）
A.文字和一張圖片的混排是很容易的，設定圖片的左右浮動就可以達到圖文的融合。
B.文字和多張圖片排列的時候：
情況一：，這種情況呢，三張圖片排列在左邊，這三張圖片我們可以用UL方法定義於浮動在左邊，右邊用一個大的P定義浮動在右邊，這兩個都要定義寬度，高度不用，圖片的垂直距離定義一個IMG即可。這是一種解決辦法，就是左邊用一個P封裝三個img，然後定義這個P浮動於左邊。右邊大的一塊也採用一個P裝住所有的東西，浮動在右邊，P的寬度一樣要定義，左邊的三個圖片通過定義P的小寬度來把圖片換行伸展下來。推薦使用這種方法。右邊的圖片是直接放到文字當中，然後用BR換行即可。 情況二：這中情況和一張圖片混排差不多，直接把圖片拉到想要的位置設計浮動即可。對於幾個像幾個圖片這樣的有相似地方的元素，我們可以採用定義一個局部樣式來一次性應用，這樣代碼比較少，應用方便，修改容易。 23）一個大的標籤中包含的單列標籤的定義樣式的時候不要定義浮動，因為在它的左右沒有東西和它浮動，有時候就因為沒有必要的浮動而導致DIV裂開。 |
