低一度

顶部横幅

Owen Briggs的CSS布局16例

2010-5-18 - diyidu - css应用 - Views

Owen Briggs 官方站点：http://www.thenoodleincident.com/

CSS 16例布局演示及 CSS 资源下载：http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

Owen Briggs的CSS布局16例

16例布局特点概括：

单行单列

单行单列1：采用float浮在左上角，固定宽度。[演示]

单行单列2：固定在左上角，固定宽度，采用的是absolute绝对定位。[演示]

单行单列3：固定在左上角，不固定宽度，采用百分比(%)定义宽度来自适应页面。[演示]

单行单列4：固定宽度，采用在body样式中定义居中属性(text-align: center;)实现适应页面自动居中。（荐）[演示]

单行两列

单行两列1：两列都固定宽度，第一列浮在左上角，第二列浮在第一列右边。[演示]

单行两列2：两列都百分比宽度，但不满屏；第一列固定在左上角，第二列浮在第一列右边。[演示]

单行两列3：两列都百分比宽度，满屏，都采用绝对定位。[演示]

单行两列4：两列都百分比宽度，满屏，第一列浮在左上角，第二列浮在右上角。[演示]

单行两列5：两列都百分比宽度，满屏，第一列浮在左上角，第二列浮在第一列右边。[演示]

单行三列

单行三列1：左右列都绝对定位（右列定位在右上）。左列和右列固定宽度，中间列自适应页面。[演示]

单行三列2：左列定位在左上，右列定位在右上，中间列浮在左列右面。左列和右列固定宽度，中间列自适应页面。[演示]

单行三列3：三列都绝对定位，左列和右列固定宽度，中间列根据内容自适应页面。[演示]

单行三列4：类似样式2，只是将margin: 20px属性增加在body样式中，解决了中间列在Netscape6.0中置顶的问题。（荐）[演示]

单行三列5：左右列都绝对定位，中间列自适应页面，满屏。[演示]
 
顶行三列

顶行三列1：顶行自适应页面宽度，左右列绝对定位，中间列自适应页面。（荐）[演示]

顶行三列2：满屏。[演示]

打包下载：CSS布局16例.rar

关键词 // css实例 css Owen Briggs
出处：低一度，链接：http://www.diyidu.cn/post/owen-briggs_16css.html

上一篇：padding与margin含义实例演示 下一篇：自从被强制提高了流量以后

随机推荐

to "Owen Briggs的CSS布局16例"

  • 网络蚂蚁
    #1 网络蚂蚁 回复该留言 2010-5-18 23:43:49
    给你提个意见。虽然你的博客很简洁，但是有些内容行距有点儿小，看着模糊！
    diyidu 于 2010-5-19 0:22:52 回复
    谢谢。你是指哪些内容？
    网络蚂蚁 于 2010-5-19 19:53:19 回复
    恩， 蓝色字体。可能是由于下划线的原因，看起来有点儿不舒服！
  • Tony
    #2 Tony 回复该留言 2010-5-19 9:30:29
    看看，说不定能用上点！
    diyidu 于 2010-5-19 9:53:03 回复
    这个迟早能派上用场的。
  • 于泽鹏
    #4 于泽鹏 回复该留言 2010-5-19 13:22:22
    偶也来看看。。
    diyidu 于 2010-5-19 13:39:50 回复
    欢迎围观，更欢迎批评：）
  • 李超
    #5 李超 回复该留言 2010-5-19 18:09:14
    这个挺实用的，不过不知道会不会被周围的DIV影响。
    diyidu 于 2010-5-20 11:12:32 回复
    协调好，对应得起来就不会。
  • karm
    #6 karm 回复该留言 2010-5-19 22:16:12
    简单实用的东西。
    diyidu 于 2010-5-20 11:13:07 回复
    呵呵，是挺实用的啊。
  • 猪八戒
    #7 猪八戒 回复该留言 2010-5-20 8:26:05
    看不太懂。
    diyidu 于 2010-5-20 11:13:51 回复
    八戒，这句话都快成你口头禅了：）
  • 羽中
    #8 羽中 回复该留言 2010-5-20 8:49:25
    布局还能有16例。。我印象中就是几栏大小的区别。
    diyidu 于 2010-5-20 11:14:57 回复
    其实有的，在相同格局下，有相对定位和绝对定位及浮动等的区分。
  • 北美疯情
    #11 北美疯情 回复该留言 2010-5-20 10:42:14
    以前经常听朋友说起低一度，今天终于见识了。果然zblog主题做得很强悍哪。
    diyidu 于 2010-5-20 11:16:35 回复
    呵，谢谢鼓励呵。
  • 蓦然
    #12 蓦然 回复该留言 2010-5-20 13:42:10
    这个要顶，正在学CSS，谢谢分享。
    diyidu 于 2010-5-20 16:33:15 回复
    不客气哦。
  • 卢松松
    #13 卢松松 回复该留言 2010-5-20 13:48:55
    有现成美化过的就更好了。
    diyidu 于 2010-5-20 16:33:56 回复
    没有哦，要不然松松花点时间做下？
  • AnQ
    #14 AnQ 回复该留言 2010-5-20 13:52:13
    我下载了，留着有用，最近在做一个模板。谢谢分享！
    diyidu 于 2010-5-20 16:34:24 回复
    OK，不客气。
  • 疾风
    #15 疾风 回复该留言 2010-5-20 15:23:19
    这个经典，收藏一个。
    diyidu 于 2010-5-20 16:34:52 回复
    呵呵，谢谢欣赏。
  • 快鱼
    #16 快鱼 回复该留言 2010-5-20 21:12:02
    这个世界雷锋还是有的。
    diyidu 于 2010-5-20 21:31:37 回复
    呵呵，这个老外估计还不认识雷锋吧。
  • 老实人博客
    #17 老实人博客 回复该留言 2010-5-20 22:37:00
    我太需要了~正在为层不听话郁闷呢。
    diyidu 于 2010-5-20 23:15:08 回复
    那就好好研究下各种布局。
  • 十年灯
    #18 十年灯 回复该留言 2010-5-21 11:56:47
    自认为个中高手的人飘过……
    diyidu 于 2010-5-21 22:16:45 回复
    呵呵，随便你飘。

Add comment

验证码