接下來
開始要真正
設計布局了。和
傳統的方法一
樣，你首先要在
腦海裡有大致的
輪廓構想，然後用
photoshop
把它畫出來。你可能看到有
關web
標準的站點大都很樸素，因
為web標準更
關注結構和內容，
實際上它與網頁的美
觀沒有根本衝突，你想怎
麼設計就怎
麼設計，用
傳統**方法
實現的布局，用
div也可以
實現。技
術有乙個成熟的
過程，把
div看成和
table一樣
的工具，如何運用就看你的想象力了。
注：在實際應用
過程中，
div在有些地方的確不如**方便，比如背景色的定
義。但任何事情都有得有失，取捨在於你的價
值判斷。好，不
羅嗦了，我
們開始：
1.
確定布局
w3cn
的最初設計草圖
如下：
用**的
設計方法的
話，一般都是上中下三行布局
。用div的話
，我考慮
使用三列來布局,成
為這樣。
2.定義
body
樣式先定
義整個頁面的
body的樣
式,**
如下：
body
以上**
的作用在上一天的教程有
詳細說明，大家
應該一看就明白。定義了
邊框邊距
為0；背景顏色為
#fefefe
，背景**為
bg_logo.gif，圖
片位於頁
面右下角，不重複；定
義了字型尺寸
為12px
；字型顏色為
#666;
行高150%。
3.定義
主要的div
初次使用
css布局，我決定採用固定
寬度的三列布局
(比自適
應解析度的
設計簡單
,hoho，別說
我偷懶，先實現簡單
的，增加點信心嘛！)。分
別定義左中右的寬度
為200:300:280
，在css
中如下定義:
/*定
義頁面左列樣式
*/#left/*定
義頁面中列樣式
*/#middle/*定
義頁面右列樣式
*/#right
注意：定
義中列和右列
div我都採用了position: absolute;，然後分別定
義了left:200px;top:0px;和left:500px;top:0px;這是這
個布局的
關鍵，我採用了層的
絕對定位。定義中
間列距離頁面左
邊框200px
，距離頂
部0px；定義
右列距離頁面左
邊框500px
，距離頂
部0px；。
這時候整個
頁面的**是：
頁面左列
頁面中列
頁面右列
這時
候頁面的效果
僅僅可以看到三個並列的灰色矩形，和乙個背景
圖。但是
我希望高度是
滿屏的，怎
麼辦呢？
4.100%自適應
高度?為
了保持三列有同
樣的高度，我嘗試在
#left
、#middle
和#right中設
置"height:100%;"
，但發現
完全沒有
預想的自適
應高度效果。
經過一番
嘗試後，我只好給每個
div乙個
絕對高度
:"height:1000px;"
，並且隨著內容的增加，需要不斷修正這個
值。難道沒有
辦法自適
應高度了
嗎？隨著阿捷自己學
習的深入，
發現乙個
變通的解決辦法，
實際上根本不需要設定
100%，我們
已經被table思維
禁錮太深了，這個
辦法在下一節的學
習中詳細介
紹。
第9天 第乙個CSS布局例項
注 在實際應用過程中，div在有些地方的確不如 方便，比如背景色的定義。但任何事情都有得有失，取捨在於你的價值判斷。好，不羅嗦了，我們開始 w3cn的最初設計草圖如下 用 的設計方法的話，一般都是上中下三行布局。用div的話，我考慮使用三列來布局,成為這樣。先定義整個頁面的body的樣式,如下 bo...
第9天 第乙個CSS布局例項
接下來開始要真正設計布局了。和傳統的方法一樣，你首先要在腦海裡有大致的輪廓構想，然後用photoshop把它畫出來。你可能看到有關web標準的站點大都很樸素，因為web標準更關注結構和內容，實際上它與網頁的美觀沒有根本衝突，你想怎麼設計就怎麼設計，用傳統 方法實現的布局，用div也可以實現。技術有乙...
匯入 Xhtml第9天 第乙個css布局例項
xhtml第9天 第乙個css布局例項 接下來開始要真正設計布局了。和傳統的方法一樣，你首先要在腦海裡有大致的輪廓構想，然後用photoshop把它畫出來。你可能看到有關web標準的站點大都很樸素，因為web標準更關注結構和內容，實際上它與網頁的美觀沒有根本衝突，你想怎麼設計就怎麼設計，用傳統 方法...