勵志

勵志人生知識庫

div排版

Div排版主要涉及以下幾個方面:

布局設計。使用div來劃分頁面,保持整體性,避免內容分散。對於非彩色延伸部分,使用固定寬度100%。保持布局的直線型,無論是垂直還是水平方向。

頁面居中。使用最外層div的左右邊界自動。

界面圖片處理。使用背景表示界面圖片,每個圖片加上ALT說明。按鈕和標誌使用圖片。

浮動布局。左右使用浮動,三欄使用兩個左浮動,或右浮動加一個左或右浮動。

清除浮動。如果DIV垂直無法自動張開,使用清除浮動。無法解決時,使用1%高度,溢出使用自動或inherit,或隱藏。

使用!important。解決IE與FF兼容問題。

圖片與DIV對齊。如果圖片使用浮動,DIV高度應調整為和圖片一樣高。

定義樣式。使用ID定義樣式,使用CLASS定義全局樣式。

列表樣式。多個形狀相似、列表式的內容使用LI。

清除浮動。無法定位時嘗試清除浮動。

絕對定位。避免在居中的情況下使用絕對定位,因為這可能會導致解析度大時出現移位。

兩列布局。左邊固定寬度,右邊自適應。

設計內容塊位置。根據內容本身考慮布局,如兩欄或三欄。

使用CSS定位。對設計的內容塊進行定位,添加內容。

div橫向排列。確保div在超出父級寬度時能自動換行,保持左對齊,每行div之間留固定間距。

這些技巧有助於創建整潔、回響式的網頁布局。