使用Web標準建站第8天:CSS布局入門(2)

來源:互聯網
上載者:User

接下來開始要真正設計布局了。和傳統的方法一樣,你首先要在腦海裡有大致的輪廓構想,然後用photoshop把它畫出來。你可能看到有關web標準的網站大都很樸素,因為web標準更關注結構和內容,實際上它與網頁的美觀沒有根本衝突,你想怎麼設計就怎麼設計,用傳統表格方法實現的布局,用DIV也可以實現。技術有一個成熟的過程,把DIV看成和TABLE一樣的工具,如何運用就看你的想象力了。

註:在實際應用過程中,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" "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" href="http://www.w3cn.org/favicon.ico" 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思維禁錮太深了,這個辦法在下一節的學習中詳細介紹。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.