|
三、如何改進？
問題到這里，基本上就算解決了出一些可以優(yōu)化的地方：
1.#newnews 和 #hotnews 外面套一個Div比較好。
如圖，這樣控制起來更加方便，只要浮動 #right。
2. Css部分：
#top, #search, #main, #footer {
margin: 10px auto 10px auto; width: 760px;
}
Margin 的排列順序為 上、右、下、左 ，可以簡寫為margin : 10px auto ;
#category {
width: 180px;
height: 368px !important; height: 378px;
}
可以把 height 改成 height : 368px ;
#category {
margin-right:5px;
}
這里定義的是距離右邊的列 5px的寬度，但是右邊的 #newnews
和 #hotnews 定義了margin-left:5px; 意思就是要有10px的間距，可以把#category 的margin-right 直接改為10px 。。然后左邊的列就可以不用定義margin-left了。。。
重構篇
四、“重構”的精彩
怎幺樣，理解起來不困難吧 ？下面是最精彩的部分了，完全重構這個簡單的頁面，如果能用自己的想法自己還原。。那是再好不過的了。。
1. 搭建最基礎的結構
首先，請找個你最順手的編寫工具，比如我是用的EditPlus ，然后就開始吧，順便放上幾首輕音樂，不要太緊張了，呵呵。。
先從寫幾個Div開始 ，一步一步的把結構合理的搭建出來，如圖：
請各位同學注意一個問題，ID的命名是唯一的，代表著這個塊在頁面只有一個，如果要重復出現(xiàn)，請使用Class類來定義，還有命名最好有個規(guī)范，只要自己看得懂就好，這方面的內(nèi)容，可以在谷歌上面輸入關鍵詞“CSS命名規(guī)范”
就知道怎幺做了。
我解釋一下各塊的含義：其中 #wrapper 是最外的包含容器，你可以理解為和body相當?shù)淖饔?，這里有同學會問了，為什幺直接在body里面控制整個頁面呢？
我的建議：不要對body 和 html 賦予任何樣式，因為這兩個標簽是“不可控制”的，或者說是“很難控制”的，比如給body定義一個寬度和高度，然后加一個背景色，各位同學可以自己動手試試看。。能控制嗎？？
#content是正式內(nèi)容的開始，你也可以不嵌套這個Div，關系不大，我這里只是方便同學們理解而已。
#leftbar 顧名思義，左邊的列。#rightbar當然是右邊的列啦，但右邊不是有兩個塊嗎？？別急，我們再接著寫。。
出處：藍色理想
責任編輯：bluehearts
上一頁 利用CSS布局到底有多難? [1] 下一頁 利用CSS布局到底有多難? [3]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 利用CSS布局到底有多難? [2]
