[ 2006-02-13 07:47:07 | author:
greengnn ]
font size:
large |
medium |
**all
第一步：建立乙個結構
xhtml開始於header, footer, and container
css先定義container，給將要加入的sideleft，和sideright留下個位置
#container
我們的布局現在看起來是這樣的
圖1——建立框架
第二步：增加內容元素
在第一步基礎上增加內容元素
然後分別定義widths和float 讓元素排列在一條線上，還有清除footer的浮動對齊
#container .column
#center
#left
#right
#footer
這裡給center元素定義了100% width，讓它佔滿montainer的可用空間，現在的布局變成了這樣
圖2：增加內容元素
第三步：把left放到正確的位置
要把left放到正確的位置，我們分兩步
1.讓left和center在同一水平線
#left
看看效果
圖3——left移動完成一半
2.用相對定位，把left繼續移動到正確的位置
#container .columns
#left
上一步，left還需要左移200px，就可以了，所以就採用相對定位，將他再向左推200px,就達到了想要的效果。讓left距離他右邊元素center 200px後，行了，left終於到自己位置上了。
圖4——left到了自己的位置
第四步：讓right也到自己的正確的位置上
從上圖看，我們只需要把right推倒container的padding-right裡面,看看怎麼做
#right
好了，現在元素們都正確歸位了。
圖5——right到了自己正確的位置
第五步：解決bug讓布局更完美
如果瀏覽器型別變更，center就變得比left小了，完美的布局就被打破，我們給body 設定乙個min-width
來解決這個問題，因為ie不支援他，所以不會有負面影響，調整如下
body
這時在ie6（完全開啟的視窗）下，left元素距離左側又太遠了，再調整
* html #left
這些大小調整是根據上面已經定義的寬度來的，你調整的時候也要根據自己的實際情況。
現在增加padding
內容文字貼著容器的邊，相信你看得時候，不會很舒服，調整一下
#left
當然不能只增加left就算完事，要給一系列元素都必須加上，也要調整增加padding，帶來的新的bug，調整如下
body
#container
#container .column
#center
#left
#right
#footer
/*** ie fix ***/
* html #left header和footer的padding可以隨意增加，這裡就不提了，還有長度單位用em更具親和力（em可以讓使用者使用瀏覽器來調整自己需要的字型大小）
但是不能混合使用，選擇em和px的時候明智些,
察看效果
元素等高問題 採用
有人翻譯過來的：
裡提到的方法，就不具體解釋了。
#container
#container .column
#footer
再解決opera 8的bug，**調整如下
最終效果,通過w3c 標準型
聖杯布局（三行三列布局）
布局效果類似聖杯，所以叫聖杯布局。就是三行三列布局 核心 主要就是實現中間主體部分中的左右定寬 中間自適應的布局效果 左右定寬 left,right left center right class left div class right div class center div 改變順序，需要把c...
DIV CSS三行兩列經典布局
師阿捷2004年發布在 網頁設計師 上的，乙個非常經典的布局，在ie mozilla和opera瀏覽器中均可以實現居中和高度自適應。完整 如下 在阿捷的 基礎上作了部分修改 title seo參考 xhtml之經典三行兩列布局 title style type text css body heade...
完美的DIV三行三列自適應高度布局
我們一般拿出來討論的自適應高度的div布局，都是指有背景區分的，不用區分的三列布局很容易。不過在實際應用中很少有 這樣用，大多都是不用背景區分的。不過在這裡我們並不討論這種布局的實用性到底如何，而只是討論實現這種布局的一種較完美的解決方案而已。所謂自適應高度，也就是不管某一列撐長而其它列的高度也跟跟...