Div排版主要涉及以下幾個方面:
布局設計。使用div來劃分頁面,保持整體性,避免內容分散。對於非彩色延伸部分,使用固定寬度100%。保持布局的直線型,無論是垂直還是水平方向。
頁面居中。使用最外層div的左右邊界自動。
界面圖片處理。使用背景表示界面圖片,每個圖片加上ALT說明。按鈕和標誌使用圖片。
浮動布局。左右使用浮動,三欄使用兩個左浮動,或右浮動加一個左或右浮動。
清除浮動。如果DIV垂直無法自動張開,使用清除浮動。無法解決時,使用1%高度,溢出使用自動或inherit,或隱藏。
使用!important。解決IE與FF兼容問題。
圖片與DIV對齊。如果圖片使用浮動,DIV高度應調整為和圖片一樣高。
定義樣式。使用ID定義樣式,使用CLASS定義全局樣式。
列表樣式。多個形狀相似、列表式的內容使用LI。
清除浮動。無法定位時嘗試清除浮動。
絕對定位。避免在居中的情況下使用絕對定位,因為這可能會導致解析度大時出現移位。
兩列布局。左邊固定寬度,右邊自適應。
設計內容塊位置。根據內容本身考慮布局,如兩欄或三欄。
使用CSS定位。對設計的內容塊進行定位,添加內容。
div橫向排列。確保div在超出父級寬度時能自動換行,保持左對齊,每行div之間留固定間距。
這些技巧有助於創建整潔、回響式的網頁布局。