程序代碼
程序代碼
*{margin:0;padding:0;}html, body, #wrapper {height: 100%;font-size:12px;}#wrapper{width:100%;background:#777;}body > #wrapper {height:auto; min-height:100%;}#main {padding-bottom: 54px;min-width:960px;}/* 必須使用和footer相同的高度,最小寬度ie6中加JS解決 */#header{text-align:center;color:#fff;background:#333;}#inheader{width:960px;height:110px;line-height:110px;margin:0 auto;background:#CC9933;}h3{font-size:14px;line-height:50px;}#inheader p{font-size:12px;line-height:30px;}#footer { position: relative; margin-top: -54px; /* footer高度的負值 */ height: 54px;/* footer高度*/ width:100%; min-width:960px;/*最小寬度ie6中加JS解決*/ clear:both; background:#666; text-align:center; color:#fff;}#infoot{height:54px;line-height:54px;width:960px;margin:0 auto;background:#CC9966;}#footer p{line-height:26px;}#content{background:#999;width:960px;margin:0 auto;height:692px;}#content p{line-height:30px;padding:0 30px;color:#fff;}/*說明: 需要注意的就是#main的padding值、footer的高度和負margin值,需要保持一致。下面是著名的萬能float閉合Clearfix Hack*/.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}.clearfix {display: inline-block;}/* Hides from IE-mac \*/* html .clearfix { height: 1%;}.clearfix {display: block;}/* End hide from IE-mac */ 測試Demo:
HTML代碼
彈性+固寬佈局設計
彈性+固寬佈局設計(適合寬屏和大背景佈局)
頁頭背景可平鋪整個瀏覽器寬度,而正文內容則始終居中顯示,不管分辯率是多大。
正文內容背景可平鋪整個瀏覽器寬度,你可以在body中加入一張超大的背景圖片,並設置圖片為居中。而正文內容則始終居中顯示,不管分辯率是多大。當你分辯率超過1024時,在正文內容的兩側會出現圖片,使寬屏的內容區兩側不顯得空洞。
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]
原文:這裡...
文章提供 BAYSTARS DESIGN網頁設計公司





