CSS 常用布局

2021-08-26 09:11:38 字數 988 閱讀 2253

1.寬度100%,自適應視窗寬度

#content

#content 只是定義了寬度為100%,背景為白色與body色加以區分

#footer

#footer

2.寬度100%,最小定寬780px

#content

#content 只是定義了寬度為100%,背景為白色與body色加以區分 這個布局中我們使用了min-width:780px來限制最小寬度,對於ie瀏覽器我們則使用了js: width:expression(document.body.clientwidth*0.99<780?"780px":"100%"); 意思就是當文件的body在客戶端顯示寬度小於780px的時候就把width值固定為780px,當超過這個值就把width值設定為100%寬。

#footer

#footer

#content

#content 只是定義了寬度為780px,背景為白色與body色加以區分

#footer

#footer

780px固定寬,靠左

780px固定寬,靠右

三行(兩列:邊欄+內容)

寬度100%,自適應視窗寬度(非float,偽框架)

#content

#content

跟在bar的後面左浮動,也可以設定為右浮動,在這裡沒有什麼區別。

#footer

加個clear:both做保險,或者加個float

寬度100%,最小定寬780px

780px固定寬,居中

780px固定寬,靠左

780px固定寬,靠右

三行(三列:內容+2邊欄)

100%寬,bar| content | bar

780px寬,bar| content | bar

內容處於兩邊欄下方(100%)

內容處於兩邊欄上方(100%)

其它常用布局

固定垂直邊欄

css常用布局

單列布局長這個樣子,主要有兩種 普通單欄,通欄的單欄布局 比較簡單,設定 定寬 水平居中即可 頭部 內容尾部 執行結果鏈結描述 瀏覽器寬度超過960px時,外margin出現。當收縮瀏覽器寬度,小於960px時,margin為0,出現滾動條。執行結果鏈結描述 在header 和footer上再包裹一...

css常用布局

以下居中布局均以不定寬為前提,定寬情況包含其中 1 水平居中 a inline block text align tips 此方案相容性較好,可相容至ie8,對於ie567並不支援inline block,需要使用css hack進行相容 b table margin tips 此方案相容至ie8,...

CSS 常用布局

div class body div class header div div class section div class left div div class right div div div class footer div div 整個父元素相對定位,導航高固定,內容區域絕對定位,通過定...