|
1樓
大 中
小 發表於 2007-1-20 02:17
[W3C標準] 9: 第一個CSS佈局實例
註：在實際應用過程中，DIV在有些地方的確不如表格方便，比如背景色的定義。但任何事情都有得有失，取捨在於你的價值判斷。好，不囉嗦了，我們開始：
1.確定佈局w3cn的最初設計草圖如下：
 用表格的設計方法的話，一般都是上中下三行佈局 。用DIV的話，我考慮使用三列來佈局,成為這樣 。
2.定義body樣式先定義整個頁面的body的樣式,代碼如下：
body { MARGIN: 0px;
PADDING: 0px;
BACKGROUND: url(../images/bg_logo.gif) #FEFEFE no-repeat right bottom;
FONT-FAMILY: 'Lucida Grande','Lucida Sans Unicode','細明體','新細明體',arial,verdana,sans-serif;
COLOR: #666;
FONT-SIZE:12px;
LINE-HEIGHT:150%; } 以上代碼的作用在上一天的教程有詳細說明，大家應該一看就明白。定義了邊框邊距為0；背景顏色為#FEFEFE，背景圖片為bg_logo.gif，圖片位於頁面右下角，不重複；定義了字體尺寸為12px；字體顏色為#666;行高150%。
3.定義主要的div初次使用CSS佈局，我決定採用固定寬度的三列佈局(比自適應解析度的設計簡單,hoho，別說我偷懶，先實現簡單的，增加點信心嘛！)。分別定義左中右的寬度為200:300:280，在CSS中如下定義:
/*定義頁面左列樣式*/
#left{ WIDTH:200px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #CDCDCD;
}
/*定義頁面中列樣式*/
#middle{ POSITION: absolute;
LEFT:200px;
TOP:0px;
WIDTH:300px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #DADADA;
}
/*定義頁面右列樣式*/
#right{ POSITION: absolute;
LEFT:500px;
TOP:0px;
WIDTH:280px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #FFF; } 注意：定義中列和右列div我都採用了POSITION: absolute;，然後分別定義了LEFT:200px;TOP:0px;和LEFT:500px;TOP:0px;這是這個佈局的關鍵，我採用了層的絕對定位。定義中間列距離頁面左邊框200px，距離頂部0px；定義右列距離頁面左邊框500px，距離頂部0px；。
這時候整個頁面的代碼是：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。
<html xmlns="訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。 lang="gb2312">
<head>
<title>歡迎進入新《網頁設計師》:web標準教程及推廣</title>
<meta http-equiv="Content-Type" c />
<meta http-equiv="Content-Language" c />
<meta c name="robots" />
<meta name="author" c />
<meta name="Copyright" chttp://www.w3cn.org/" target=_blank>www.w3cn.org,自由版權,任意轉載" />
<meta name="description" c />
<meta c name="keywords" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。 type="image/x-icon" />
<link rel="stylesheet" rev="stylesheet" href="css/style01.css" type="text/css" media="all" />
</head>
<body>
<div id="left">頁面左列</div>
<div id="middle">頁面中列</div>
<div id="right">頁面右列</div>
</body>
</html> 這時候頁面的效果僅僅可以看到三個並列的灰色矩形，和一個背景圖。但是我希望高度是滿屏的，怎麼辦呢？
4.100%自適應高度?為了保持三列有同樣的高度，我嘗試在#left、#middle和#right中設置"height:100%;"，但發現完全沒有預想的自適應高度效果。經過一番嘗試後，我只好給每個div一個絕對高度:"height:1000px;"，並且隨著內容的增加，需要不斷修正這個值。難道沒有辦法自適應高度了嗎？隨著阿捷自己學習的深入，發現一個變通的解決辦法，實際上根本不需要設置100%，我們已經被table思維禁錮太深了，這個辦法在下一節的學習中詳細介紹。
|
