Leeiio.


disconnected
主题工具

[WEB] 9个永不过时的CSS 3栏布局技巧


发表于 2008-2-15 03:16  5047 次点击

我喜欢3栏布局的网页设计,尽管时下正火的Web2.0似乎很少采用3栏布局。但没关系,我们是非非非主流。
但是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的朋友。

本主题共有 3 条回复 | 回到顶部
#1 - 2008-2-20 22:53
况天佑 地球
LZ的CSS很强

我很汗颜啊~!
#2 - 2009-5-2 22:34
无敌铁金刚 地球 说:汗颜。。
CSS 还不会呢。。不过这个MARK一下~~~
以后学习
#3 - 2012-4-16 16:29
wwyyu 地球
*** 作者被禁止或删除 内容自动屏蔽 ***
关于幸福大街 / 帮助 / 站长博客
Based on Discuz! 5.5.0 | Thanks to Livid and Sai
清除 Cookies - GuaNiu Inc. - Archiver - Mobile
Processed in 0.026433 second(s), 6 queries, Gzip enabled, Time now is:当前时区 GMT+8, 现在时间是 2018-1-18 20:12

http://bbs.guaniu.com
Design by guaniu(at)gmail.com Leeiio chaos made.