DIV CSS 佈局教程網

我們先把上節課最後總結一句話拿出來
“如果用position來布局頁面，父級元素的position屬性必須為relative，而定位於父級內部某個位置的元素，最好用absolute，因為它不受父級元素的padding的屬性影響，當然你也可以用position，不過到時候計算的時候不要忘記padding的值。”
如果你還是不能太明白這句話，我們就做個實例，把我們第5節頁面的頭部blog區域用定位(position)來布局一下
 

Html代碼和原來的沒有區別：

<div id="Logo">
    <a href="#" id="logoLink"></a>
</div>

CSS代碼就有變化了，咱先看看原來的CSS代碼

#Logo{
    height:80px;
}
#logoLink{
    display:block;
    width:173px;
    height:46px;
    background:url(../Images/logo.gif) no-repeat;
    float:left;
    margin-top:20px;
}

原來是用“浮動+外邊距”布局的，將#logoLink定位在距離頂部20像素，左側0像素的地方；
如果用position的方法，CSS就應該這麼寫，首先給#logo加上“position:relative;”，給#logoLink加上“position:absolute;”,然後讓#logoLink距離上面20像素，左側0像素，具體代碼如下：

#Logo{
height:80px;
position:relative;/*相對定位*/
}
#logoLink{
display:block;
width:173px;
height:46px;
background:url(../Images/logo.gif) no-repeat;
position:absolute;
top:20px;
left:0;
}

怎麼樣效果和原來的一樣吧，就是這麼簡單.
什麼？CSS代碼多了？的確，由原來的兩句話，變成現在的四句，但是有沒有發現，就靠Position我們就可以將Logo隨意的定位於任何一個地方！這就是它的靈活的地方！如果在頁面頂部在有一行“加入收藏 | 設為首頁 | RSS訂閱”如下圖，你是不是也可以很方便的將它們定位於右上角呢~

但是定位(position)有一個缺點，不會自適應內部元素的高度，所以平時我們在布局頁面的時候，如果某個或者某些模塊高度永遠不變，就可以用定位，但是KwooJan建議大家布局頁面的時候，還是要以Float為主，Position為輔！這樣你才能做出高質量的頁面。
=========================================================================
最後，請大家記住我這句話:“布局頁面，Float為主，Position為輔！”
=========================================================================
好，我們有關頁面布局的教程，算是已經完結。
如果能悟透每節課內容，你現在就可以拍著胸脯說“我是DIV+CSS高手！”哈哈，不過你要知道，DIV+CSS的叫法是不標准的，應該叫... ...
什麼你想不起來了？！
咣當！~~


再說一句，在我們布局頁面的時候，難免遇到一些IE BUG，這時候就需要CSS Hack(解決CSSbug的方法叫做CSS Hack)，這塊也挺簡單的，推薦一篇文章《不同浏覽器CSS Hack寫法》，如果還有不懂多看看論壇的“『CSS浏覽器兼容』”板塊，或者baidu，google，這些知識我就不再單獨來一節課講了。

謝謝大家對我的支持！Kwoojan在這裡說聲“謝謝”，希望大家能夠繼續支持論壇！

如果大家還需要我出什麼教程就，告訴我！我會找時間給大家具體講講！

2009年6月6日寫：因大家強烈要求我寫一篇關於浏覽器兼容方面的課程，所以“第八課：CSS Hack”，我已將這節課寫出來了，大家可以接著學！

看完這節課，可以到“想提高，來練習”板塊，做一些練習題，進行鞏固加強