2008-2-15 03:16
Leeiio.
9个永不过时的CSS 3栏布局技巧
我喜欢3栏布局的网页设计，尽管时下正火的Web2.0似乎很少采用3栏布局。但没关系，我们是非非非主流。
但是3栏布局相对来说就比较复杂，有些难以控制，Noupe发表一篇文章，收集了9个号称永不过时的三栏布局设计技巧([url=http://www.noupe.com/css/9-timeless-3-column-layout-techniques.html][color=#FF0000]9 Timeless 3 Column Layout Techniques[/color][/url])。由[url=http://parandroid.com/][color=#FF0000]帕兰[/color][/url]翻译出来，与你分享。
首先，任何一个布局通常都有headers, navigation bars, content containers, sidebars以及 footers. 我们在设计三栏主题的时候，最重要的目的就是发挥其最大的灵活性和自适应高度，这样才会看上去更加美观。下面9个三栏CSS布局将从多个方面来实现最好的布局方法，并都兼容IE和FF。
[b]两个固定栏和一个可变栏[/b]
1) [url=http://www.glish.com/css/7.asp][color=#FF0000]3 Columns, The Holy Grail[/color][/url]- 一个精致的3栏布局技巧示例
[font=隶书]#leftcontent {
position: absolute;
left:10px;
top:50px;
width:200px;
}[/font]
[font=隶书]#centercontent {
margin-left: 199px;
margin-right:199px;
margin-left: 201px;
margin-right:201px;
}
html>body #centercontent {
margin-left: 201px;
margin-right:201px;
}[/font]
[font=隶书]#rightcontent {
position: absolute;
right:10px;
top:50px;
width:200px;
}[/font]
2)[url=http://www.strictlycss.com/examples/fluid-css-layout-with-faux-columns-1.asp][color=#FF0000] 3 Column Fluid CSS Layout[/color][/url]- 使用100%高度
[font=隶书]#left { float: left; width: 155px; padding: 5px; position: relative; /*** IE needs this ***/ }[/font]
[font=隶书]#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 ***/ }[/font]
[font=隶书]#content { float: right; margin-right: -165px; /*** Same length as .outer padding-left but with negative value ***/ width: 100%; position: relative; /*** IE needs this ***/ }[/font]
3) [url=http://www.pixy.cz/blogg/clanky/css-3col-layout/][color=#FF0000]3-col Layout Via CSS[/color][/url]
不需要表格，不需要定位，不需要Hack，就能实现自适应的相同高度。呃，需要一张小小的GIF图片。
[font=隶书]#left { float:left; width:150px; margin:0; padding:0; background:url("corner.gif") top right no-repeat; font-size:80%; }[/font]
[font=隶书]#right { float:right; width:150px; margin:0; padding:0; background:url("corner.gif") top right no-repeat; font-size:80%; }[/font]
[font=隶书]#middle { margin:0 150px; background:yellow; font-size:80%; }[/font]
4) [url=http://bluerobot.com/web/layouts/layout3.html][color=#FF0000]3 Columns - Flanking Menus[/color][/url]
这是另外一个强大的3栏布局技巧
[b]三栏都固定[/b]
5)[url=http://www.alistapart.com/d/multicolumnlayouts/3ColFixed.html][color=#FF0000] Multi-Column Layouts Climb Out of the Box[/color][/url]
[font=隶书]#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 */ }[/font]
[font=隶书]#leftRail{ float:left; width:150px; margin-left:-150px; position:relative; }[/font]
[font=隶书]#center{ float:left; width:500px; margin-right:-500px; }[/font]
[font=隶书]#rightRail{ float:right; width:200px; margin-right:-200px; position:relative; }[/font]
6) [url=http://blog.html.it/layoutgala/LayoutGala07.html][color=#FF0000]LayoutGala’s 3 Fixed Columns[/color][/url]
[font=隶书]div#container {width:700px;margin:0 auto} [/font]
[font=隶书]div#wrapper {float:left;width:100%} [/font]
[font=隶书]div#content {margin-right: 300px} [/font]
[font=隶书]div#navigation {float:left;width:150px;margin-left:-150px} [/font]
[font=隶书]div#extra {float:left;width:150px;margin-left:-300px} [/font]
[font=隶书][/font]
7) [url=http://www.yaml.de/fileadmin/examples/05_layouts_advanced/3col_fixed_seo.html][color=#FF0000]3 Col Fixed SEO[/color][/url]
[font=隶书]#page_margins {width: 980px; min-width: 980px; max-width:none }[/font]
[font=隶书]#main { float:left; width: 100%; background-color: transparent; background-image: url(../../images/bg_pattern.png); background-repeat:repeat-y; background-position:left; } [/font]
[font=隶书]#col1 { width: 480px; float:left; margin-left: 240px; } [/font]
[font=隶书]#col2 { width: 240px; float:left; margin-left: -720px; }[/font]
[font=隶书]#col3 { margin-left: -5px; margin-right: 0; width: 240px; float:right;}[/font]
[b]可变－百分比宽度[/b]
8 ) [url=http://positioniseverything.net/articles/onetruelayout/example/combined][color=#FF0000]One True Layout[/color][/url]
[font=隶书]#block_1 { float: left; width: 34%; margin-left: 33%; }[/font]
[font=隶书]#block_2 { float: left; width: 33%; margin-left: -67%; }[/font]
[font=隶书]#block_3 { float: left; width: 33%; }[/font]
9) [url=http://www.maxdesign.com.au/presentation/liquid/example13.htm][color=#FF0000]Max Design- Liquid insanity[/color][/url]
A very good liquid example, could be used as a Newspaper like layout.
[b]相关CSS布局资源[/b]
[url=http://layouts.ironmyers.com/950_pixel_Layouts/index.html][color=#6633CC]CSS Layouts - 950 pixels[/color][/url]-简化你的CSS布局设计，轻松点击即可生成
[img]http://parandroid.com/wp-content/uploads/2008/02/l1.gif[/img]
[url=http://css-discuss.incutio.com/?page=ThreeColumnLayouts][color=#6633CC]ThreeColumnLayouts[/color][/url]-这同样是一个快速生成CSS布局的网站服务，可以生成可变宽度和固定宽度的布局
[url=http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html][color=#6633CC]Little Boxes[/color][/url]- 16个CSS布局演示
[url=http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html]
[img]http://parandroid.com/wp-content/uploads/2008/02/l2.gif[/img]
[/url]
[url=http://blog.html.it/layoutgala/][color=#6633CC]Layout Gala[/color][/url]-40个CSS布局分享。
[b]教程和一些优秀的练习
[/b]
[url=http://matthewjamestaylor.com/blog/perfect-3-column.htm][color=#FF0000]The Perfect 3 Column Liquid Layout[/color][/url]- 不需要CSS hacks. 友好的SEO . 不需要图片。不需要JavaScript. 支持各大浏览器甚至兼容iPhone.
[url=http://www.positioniseverything.net/][color=#FF0000]Position Is Everything[/color][/url]-提供一些有趣的CSS设计技巧和相关理论
[url=http://www.subcide.com/tutorials/csslayout/index.aspx][color=#FF0000]Creating a CSS layout from scratch[/color][/url]- 一步一步的教你学会CSS，总共12个页面，简单，直观，强烈推荐给那些想学CSS的朋友。