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

2021-03-31 13:48:16 字數 1242 閱讀 7454

接下來開始要真正設計布局了。和傳統的方法一樣,你首先要在腦海裡有大致的輪廓構想,然後用photoshop把它畫出來。你可能看到有關web標準的站點大都很樸素,因為web標準更關注結構和內容,實際上它與網頁的美觀沒有根本衝突,你想怎麼設計就怎麼設計,用傳統**方法實現的布局,用div也可以實現。技術有乙個成熟的過程,把div看成和table一樣的工具,如何運用就看你的想象力了。注:在實際應用過程中,div在有些地方的確不如**方便,比如背景色的定義。但任何事情都有得有失,取捨在於你的價值判斷。好,不羅嗦了,我們開始:w3**的最初設計草圖如下:

用**的設計方法的話,一般都是上中下三行布局。用div的話,我考慮使用三列來布局,成為這樣。

先定義整個頁面的body的樣式,**如下:

body

以上**的作用在上一天的教程有詳細說明,大家應該一看就明白。定義了邊框邊距為0;背景顏色為#fefefe,背景為bg_logo.gif,位於頁面右下角,不重複;定義了字型尺寸為12px;字型顏色為#666;行高150%。

初次使用css布局,我決定採用固定寬度的三列布局(比自適應解析度的設計簡單,hoho,別滴彝道粒仁迪旨虻サ模黽擁閾判穆錚?。分別定義左中右的寬度為200:300:280,在css中如下定義:

/*定義頁面左列樣式*/

#left

/*定義頁面中列樣式*/

#middle

/*定義頁面右列樣式*/

#right

注意:定義中列和右列div我都採用了position: absolute;,然後分別定義了left:200px;top:0px;和left:500px;top:0px;這是這個布局的關鍵,我採用了層的絕對定位。定義中間列距離頁面左邊框200px,距離頂部0px;定義右列距離頁面左邊框500px,距離頂部0px;。

這時候整個頁面的**是:

歡迎進入新《網頁設計師》:web標準教程及推廣

頁面左列

頁面中列

頁面右列

這時候頁面的效果僅僅可以看到三個並列的灰色矩形,和乙個背景圖。但是我希望高度是滿屏的,怎麼辦呢?

為了保持三列有同樣的高度,我嘗試在#left、#middle和#right中設定"height:100%;",但發現完全沒有預想的自適應高度效果。經過一番嘗試後,我只好給每個div乙個絕對高度:"height:1000px;",並且隨著內容的增加,需要不斷修正這個值。難道沒有辦法自適應高度了嗎?隨著阿捷自己學習的深入,發現乙個變通的解決辦法,實際上根本不需要設定100%,我們已經被table思維禁錮太深了,這個辦法在下一節的學習中詳細介紹。

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

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

使用Web標準建站第7天 CSS入門

在了解xhtml 規範後,我們就要進行css布局。首先先介紹一些css的入門知識。如果你已經很熟悉了,可以跳過這一節,直接進入下一節。css是cascading style sheets 層疊樣式表 的縮寫。是一種對web文件新增樣式的簡單機制,屬於表現層的布局語言。分析乙個典型css的語句 p 顏...

使用Web標準建站第7天 CSS入門

在了解xhtml 規範後,我們就要進行css布局。首先先介紹一些css的入門知識。如果你已經很熟悉了,可以跳過這一節,直接進入下一節。css是cascading style sheets 層疊樣式表 的縮寫。是一種對web文件新增樣式的簡單機制,屬於表現層的布局語言。1.基本語法規範 分析乙個典型c...