您的位置:首頁 > 網頁制作 > HTML/Xhtml

Xhtml第9天:第一個css布局實例

日期:2005-11-24 00:00:00 點擊: 來自: 作者:
 

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" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<title>歡迎進入新《網頁設計師》:web標準教程及推廣</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta http-equiv="content-language" content="gb2312" />
<meta content="all" name="robots" />
<meta name="author" content="ajie(at)netease.com,阿捷" />
<meta name="copyright" content="www.w3cn.org,自由版權,任意轉載" />
<meta name="description" content="新網頁設計師,web標準的教程站點,推動web標準在中國的應用." />
<meta content="web標準,教程,web, standards, xhtml, css, usability, accessibility" name="keywords" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" 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思維禁錮太深了,這個辦法在下一節的學習中詳細介紹。

More..素材圖片 Picture Navigation
HTML/Xhtml熱門 Class Hot
HTML/Xhtml推薦 Class Commend
版權所有:中國網站資源 2005- 未經授權禁止復制或建立鏡像 This Site Tech:XHTML+DIV+CSS+Javascript
CopyRight ® 2005- www.yndjjj.com online services. all rights reserved. ICP06016627
Optimized to 1024x768 to Firefox,Netscape,Opera,MS-IE6+.
中扑网 <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>