CSS经典布局16例演示+下载

近来蓦然也是开始学习CSS样式表了,这里转发低一度小盆友整理的一些非常经典的CSS布局教程和代码,转发到这里,留作以后学习方便查询之用,也希望对大家特别是一些新手有所帮助。

16个经典的CSS布局+演示

单行单列

单行单列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:满屏。[演 示]

所有演示文件打包下载:

点击下载Photoshop  CSCSS布局16例.rar

落花生

认准了方向,就要勇敢地走下去,十年磨一剑,我相信,只要坚持,一切都有可能。

相关日志

  1. 没有图片

    2011.01.14

    给WordPress添加Flash音乐播放器

    今天从自立博客那看到这个通过主题functi…

  2. 没有图片

    2010.05.08

    与交通有关的几个值得一笑的标语

    群里618分享的几句话,觉得挺有意思,转发到…

  3. 没有图片

    2013.09.15

    给生命最后的安详

    《给生命最后的安详》 莫小米 这是我高中同学…

  4. 没有图片

    2010.06.18

    WordPress 3.0 英文正式版发布

    WordPress 3.0 RC版本经过无数…

  5. 没有图片

    2011.03.29

    参与2011地球一小时环保活动 居然得到了证书 激动啊!

    前几天参加了全球最强大的环保组织地球一小时的…

  6. 没有图片

    2012.07.02

    [父母必看]一位年轻妈妈的亲身经历

    平时我博客一般不发这类的内容的日志的,今天看…

评论

  1. 就要懂 2010.05.24 2:01下午

    恩,资源不错 !
    博主这个域名挺好的!
    博主愿意换个链接否?
    你的链接已经做好了 !

    • 蓦然 2010.05.26 12:26下午

      好的,欢迎链接,不过我看到你的友情不在首页,我先添加上你,不过建议放在首页。

About

马拉松运动员,沉迷于跑步;关注科技前沿,关注互联网!与跑者、程序员、设计师为伍,一起跑步健身,一起编写程序,为自由而战!