久久精品水蜜桃av综合天堂,久久精品丝袜高跟鞋,精品国产肉丝袜久久,国产一区二区三区色噜噜,黑人video粗暴亚裔

DIV＋CSS/第9天：第一個CSS布局實例

來自站長百科
跳轉(zhuǎn)至： 導(dǎo)航、? 搜索

導(dǎo)航: DIV＋CSS | 首頁 | DIV | CSS | HTML | HTML5 | MHTML | XHTML | WSDL | JavaScript

第9天：第一個CSS布局實例

1.確定布局[ ]

  • w3cn的最初設(shè)計草圖如下：
Divcss1.gif
  • 用表格的設(shè)計方法的話，一般都是上中下三行布局。
Divcss2.gif
  • 用DIV的話，我考慮使用三列來布局,成為這樣。
Divcss3.gif

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%; }

以上代碼的作用在上一天的教程有詳細(xì)說明，大家應(yīng)該一看就明白。定義了邊框邊距為0；背景顏色為#FEFEFE，背景圖片為bg_logo.gif，圖片位于頁面右下角，不重復(fù)；定義了字體尺寸為12px；字體顏色為#666;行高150%。

3.定義主要的div[ ]

初次使用CSS布局，我決定采用固定寬度的三列布局(比自適應(yīng)分辨率的設(shè)計簡單,hoho，別說我偷懶，先實現(xiàn)簡單的，增加點信心嘛！)。分別定義左中右的寬度為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;這是這個布局的關(guān)鍵，我采用了層的絕對定位。定義中間列距離頁面左邊框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>歡迎進(jìn)入新《網(wǎng)頁設(shè)計師》:web標(biāo)準(zhǔn)教程及推廣</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,自由版權(quán),任意轉(zhuǎn)載" />

<meta name="description" content="新網(wǎng)頁設(shè)計師,web標(biāo)準(zhǔn)的教程站點,推動web標(biāo)準(zhǔn)在中國的應(yīng)用." />

<meta content="web標(biāo)準(zhǔn),教程,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%自適應(yīng)高度[ ]

為了保持三列有同樣的高度，我嘗試在#left、#middle和#right中設(shè)置"height:100%;"，但發(fā)現(xiàn)完全沒有預(yù)想的自適應(yīng)高度效果。經(jīng)過一番嘗試后，我只好給每個div一個絕對高度:"height:1000px;"，并且隨著內(nèi)容的增加，需要不斷修正這個值。難道沒有辦法自適應(yīng)高度了嗎？隨著阿捷自己學(xué)習(xí)的深入，發(fā)現(xiàn)一個變通的解決辦法，實際上根本不需要設(shè)置100%，我們已經(jīng)被table思維禁錮太深了，這個辦法在下一節(jié)的學(xué)習(xí)中詳細(xì)介紹。

參考來源[ ]