使用Web標準建站第9天：CSS布局入門

2020-03-24 16:56:30

字體：大中小

來源：轉載

供稿：網友

接下來開始要真正設計布局了。和傳統的方法一樣，你首先要在腦海里有大致的輪廓構想，然后用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思維禁錮太深了，這個辦法在下一節的學習中詳細介紹。本文作者:html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：Dreamweaver中編寫CSS需要掌握的技巧

下一篇：CSS屬性Vertical Align使用方法