2009/02/25

9個永不過時的CSS 3欄佈局技巧



Noupe發表一篇文章,收集了9個號稱永不過時的三欄佈局設計技巧(9 Timeless 3 Column Layout Techniques)


首先,任何一個佈局通常都有headers, navigation bars, content containers, sidebars以及 footers. 我們在設計三欄主題的時候,最重要的目的就是發揮其最大的靈活性和自適應高度,這樣才會看上去更加美觀。下面9個三欄CSS佈局將從多個方面來實現最好的 佈局方法,並都兼容IE和FF。



兩個固定欄和一個可變欄

1、3 Columns, The Holy Grail - 一個精緻的3欄佈局技巧示例

程序代碼 程序代碼
#leftcontent {
position: absolute;
left:10px;
top:50px;
width:200px;
}
#centercontent {
margin-left: 199px;
margin-right:199px;
margin-left: 201px;
margin-right:201px;
}
html>body #centercontent {
margin-left: 201px;
margin-right:201px;
}
#rightcontent {
position: absolute;
right:10px;
top:50px;
width:200px;
}


2、3 Column Fluid CSS Layout - 使用100%高度
程序代碼 程序代碼
#left { float: left; width: 155px; padding: 5px; position: relative; /*** IE needs this ***/ }
#right { float: right; width: 110px; padding: 5px; position: relative; /*** IE needs this ***/ margin-right: -120px; /** This negative margin-right value is the same as the right column width (width + padding). ***/ position: relative; /*** IE needs this ***/ }
#content { float: right; margin-right: -165px; /*** Same length as .outer padding-left but with negative value ***/ width: 100%; position: relative; /*** IE needs this ***/ }


3、3-col Layout Via CSS
不需要表格,不需要定位,不需要Hack,就能實現自適應的相同高度。呃,需要一張小小的GIF圖片。
程序代碼 程序代碼
#left { float:left; width:150px; margin:0; padding:0; background:url("corner.gif") top right no-repeat; font-size:80%; }
#right { float:right; width:150px; margin:0; padding:0; background:url("corner.gif") top right no-repeat; font-size:80%; }
#middle { margin:0 150px; background:yellow; font-size:80%; }


4、3 Columns - Flanking Menus
這是另外一個強大的3欄佈局技巧

三欄都固定

5、Multi-Column Layouts Climb Out of the Box
程序代碼 程序代碼
#container{ background-color:#0ff; float:left; width:500px; border-left:150px solid #0f0; ? /* The width and color of the left rail */ border-right:200px solid #f00; ? /* The width and color of the right rail */ }
#leftRail{ float:left; width:150px; margin-left:-150px; position:relative; }
#center{ float:left; width:500px; margin-right:-500px; }
#rightRail{ float:right; width:200px; margin-right:-200px; position:relative; }


6、LayoutGala』s 3 Fixed Columns
程序代碼 程序代碼
div#container {width:700px;margin:0 auto}
div#wrapper {float:left;width:100%}
div#content {margin-right: 300px}
div#navigation {float:left;width:150px;margin-left:-150px}
div#extra {float:left;width:150px;margin-left:-300px}


7、 3 Col Fixed SEO
程序代碼 程序代碼
#page_margins {width: 980px; min-width: 980px; max-width:none }
#main { float:left; width: 100%; background-color: transparent; background-image: url(../../images/bg_pattern.png); background-repeat:repeat-y; background-position:left; }
#col1 { width: 480px; float:left; margin-left: 240px; }
#col2 { width: 240px; float:left; margin-left: -720px; }
#col3 { margin-left: -5px; margin-right: 0; width: 240px; float:right;}


可變-百分比寬度

8、One True Layout
程序代碼 程序代碼
#block_1 { float: left; width: 34%; margin-left: 33%; }
#block_2 { float: left; width: 33%; margin-left: -67%; }
#block_3 { float: left; width: 33%; }


9、Max Design- Liquid insanity
A very good liquid example, could be used as a Newspaper like layout.

相關CSS佈局資源

CSS Layouts - 950 pixels - 簡化你的CSS佈局設計,輕鬆點擊即可生成

ThreeColumnLayouts - 這同樣是一個快速生成CSS佈局的網站服務,可以生成可變寬度和固定寬度的佈局



Little Boxes - 16個CSS佈局演示



Layout Gala - 40個CSS佈局分享。

教程和一些優秀的練習

The Perfect 3 Column Liquid Layout - 不需要CSS hacks. 友好的SEO . 不需要圖片。不需要JavaScript. 支持各大瀏覽器甚至兼容iPhone.

Position Is Everything - 提供一些有趣的CSS設計技巧和相關理論

Creating a CSS layout from scratch - 一步一步的教你學會CSS,總共12個頁面,簡單,直觀,強烈推薦給那些想學CSS的朋友。

沒有留言:

張貼留言