CSS基本布局16例

作者：Owen Briggs 2004-6-25 13:44:32

以下布局资料原作者：Owen Briggs

单行单列

单行单列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：宽度满屏

216 Web Safe Color Chart

#FFFFFF R=255 G=255 B=255	#FFFFCC R=255 G=255 B=204	#FFFF99 R=255 G=255 B=153	#FFFF66 R=255 G=255 B=102	#FFFF33 R=255 G=255 B=51	#FFFF00 R=255 G=255 B=0
#FFCCFF R=255 G=204 B=255	#FFCCCC R=255 G=204 B=204	#FFCC99 R=255 G=204 B=153	#FFCC66 R=255 G=204 B=102	#FFCC33 R=255 G=204 B=51	#FFCC00 R=255 G=204 B=0
#FF99FF R=255 G=153 B=255	#FF99CC R=255 G=153 B=204	#FF9999 R=255 G=153 B=153	#FF9966 R=255 G=153 B=102	#FF9933 R=255 G=153 B=51	#FF9900 R=255 G=153 B=0
#FF66FF R=255 G=102 B=255	#FF66CC R=255 G=102 B=204	#FF6699 R=255 G=102 B=153	#FF6666 R=255 G=102 B=102	#FF6633 R=255 G=102 B=51	#FF6600 R=255 G=102 B=0
#FF33FF R=255 G=51 B=255	#FF33CC R=255 G=51 B=204	#FF3399 R=255 G=51 B=153	#FF3366 R=255 G=51 B=102	#FF3333 R=255 G=51 B=51	#FF3300 R=255 G=51 B=0
#FF00FF R=255 G=0 B=255	#FF00CC R=255 G=0 B=204	#FF0099 R=255 G=0 B=153	#FF0066 R=255 G=0 B=102	#FF0033 R=255 G=0 B=51	#FF0000 R=255 G=0 B=0

#CCFFFF R=204 G=255 B=255	#CCFFCC R=204 G=255 B=204	#CCFF99 R=204 G=255 B=153	#CCFF66 R=204 G=255 B=102	#CCFF33 R=204 G=255 B=51	#CCFF00 R=204 G=255 B=0
#CCCCFF R=204 G=204 B=255	#CCCCCC R=204 G=204 B=204	#CCCC99 R=204 G=204 B=153	#CCCC66 R=204 G=204 B=102	#CCCC33 R=204 G=204 B=51	#CCCC00 R=204 G=204 B=0
#CC99FF R=204 G=153 B=255	#CC99CC R=204 G=153 B=204	#CC9999 R=204 G=153 B=153	#CC9966 R=204 G=153 B=102	#CC9933 R=204 G=153 B=51	#CC9900 R=204 G=153 B=0
#CC66FF R=204 G=102 B=255	#CC66CC R=204 G=102 B=204	#CC6699 R=204 G=102 B=153	#CC6666 R=204 G=102 B=102	#CC6633 R=204 G=102 B=51	#CC6600 R=204 G=102 B=0
#CC33FF R=204 G=51 B=255	#CC33CC R=204 G=51 B=204	#CC3399 R=204 G=51 B=153	#CC3366 R=204 G=51 B=102	#CC3333 R=204 G=51 B=51	#CC3300 R=204 G=51 B=0
#CC00FF R=204 G=0 B=255	#CC00CC R=204 G=0 B=204	#CC0099 R=204 G=0 B=153	#CC0066 R=204 G=0 B=102	#CC0033 R=204 G=0 B=51	#CC0000 R=204 G=0 B=0

#99FFFF R=153 G=255 B=255	#99FFCC R=153 G=255 B=204	#99FF99 R=153 G=255 B=153	#99FF66 R=153 G=255 B=102	#99FF33 R=153 G=255 B=51	#99FF00 R=153 G=255 B=0
#99CCFF R=153 G=204 B=255	#99CCCC R=153 G=204 B=204	#99CC99 R=153 G=204 B=153	#99CC66 R=153 G=204 B=102	#99CC33 R=153 G=204 B=51	#99CC00 R=153 G=204 B=0
#9999FF R=153 G=153 B=255	#9999CC R=153 G=153 B=204	#999999 R=153 G=153 B=153	#999966 R=153 G=153 B=102	#999933 R=153 G=153 B=51	#999900 R=153 G=153 B=0
#9966FF R=153 G=102 B=255	#9966CC R=153 G=102 B=204	#996699 R=153 G=102 B=153	#996666 R=153 G=102 B=102	#996633 R=153 G=102 B=51	#996600 R=153 G=102 B=0
#9933FF R=153 G=51 B=255	#9933CC R=153 G=51 B=204	#993399 R=153 G=51 B=153	#993366 R=153 G=51 B=102	#993333 R=153 G=51 B=51	#993300 R=153 G=51 B=0
#9900FF R=153 G=0 B=255	#9900CC R=153 G=0 B=204	#990099 R=153 G=0 B=153	#990066 R=153 G=0 B=102	#990033 R=153 G=0 B=51	#990000 R=153 G=0 B=0

#66FFFF R=102 G=255 B=255	#66FFCC R=102 G=255 B=204	#66FF99 R=102 G=255 B=153	#66FF66 R=102 G=255 B=102	#66FF33 R=102 G=255 B=51	#66FF00 R=102 G=255 B=0
#66CCFF R=102 G=204 B=255	#66CCCC R=102 G=204 B=204	#66CC99 R=102 G=204 B=153	#66CC66 R=102 G=204 B=102	#66CC33 R=102 G=204 B=51	#66CC00 R=102 G=204 B=0
#6699FF R=102 G=153 B=255	#6699CC R=102 G=153 B=204	#669999 R=102 G=153 B=153	#669966 R=102 G=153 B=102	#669933 R=102 G=153 B=51	#669900 R=102 G=153 B=0
#6666FF R=102 G=102 B=255	#6666CC R=102 G=102 B=204	#666699 R=102 G=102 B=153	#666666 R=102 G=102 B=102	#666633 R=102 G=102 B=51	#666600 R=102 G=102 B=0
#6633FF R=102 G=51 B=255	#6633CC R=102 G=51 B=204	#663399 R=102 G=51 B=153	#663366 R=102 G=51 B=102	#663333 R=102 G=51 B=51	#663300 R=102 G=51 B=0
#6600FF R=102 G=0 B=255	#6600CC R=102 G=0 B=204	#660099 R=102 G=0 B=153	#660066 R=102 G=0 B=102	#660033 R=102 G=0 B=51	#660000 R=102 G=0 B=0

#33FFFF R=51 G=255 B=255	#33FFCC R=51 G=255 B=204	#33FF99 R=51 G=255 B=153	#33FF66 R=51 G=255 B=102	#33FF33 R=51 G=255 B=51	#33FF00 R=51 G=255 B=0
#33CCFF R=51 G=204 B=255	#33CCCC R=51 G=204 B=204	#33CC99 R=51 G=204 B=153	#33CC66 R=51 G=204 B=102	#33CC33 R=51 G=204 B=51	#33CC00 R=51 G=204 B=0
#3399FF R=51 G=153 B=255	#3399CC R=51 G=153 B=204	#339999 R=51 G=153 B=153	#339966 R=51 G=153 B=102	#339933 R=51 G=153 B=51	#339900 R=51 G=153 B=0
#3366FF R=51 G=102 B=255	#3366CC R=51 G=102 B=204	#336699 R=51 G=102 B=153	#336666 R=51 G=102 B=102	#336633 R=51 G=102 B=51	#336600 R=51 G=102 B=0
#3333FF R=51 G=51 B=255	#3333CC R=51 G=51 B=204	#333399 R=51 G=51 B=153	#333366 R=51 G=51 B=102	#333333 R=51 G=51 B=51	#333300 R=51 G=51 B=0
#3300FF R=51 G=0 B=255	#3300CC R=51 G=0 B=204	#330099 R=51 G=0 B=153	#330066 R=51 G=0 B=102	#330033 R=51 G=0 B=51	#330000 R=51 G=0 B=0

#00FFFF R=0 G=255 B=255	#00FFCC R=0 G=255 B=204	#00FF99 R=0 G=255 B=153	#00FF66 R=0 G=255 B=102	#00FF33 R=0 G=255 B=51	#00FF00 R=0 G=255 B=0
#00CCFF R=0 G=204 B=255	#00CCCC R=0 G=204 B=204	#00CC99 R=0 G=204 B=153	#00CC66 R=0 G=204 B=102	#00CC33 R=0 G=204 B=51	#00CC00 R=0 G=204 B=0
#0099FF R=0 G=153 B=255	#0099CC R=0 G=153 B=204	#009999 R=0 G=153 B=153	#009966 R=0 G=153 B=102	#009933 R=0 G=153 B=51	#009900 R=0 G=153 B=0
#0066FF R=0 G=102 B=255	#0066CC R=0 G=102 B=204	#006699 R=0 G=102 B=153	#006666 R=0 G=102 B=102	#006633 R=0 G=102 B=51	#006600 R=0 G=102 B=0
#0033FF R=0 G=51 B=255	#0033CC R=0 G=51 B=204	#003399 R=0 G=51 B=153	#003366 R=0 G=51 B=102	#003333 R=0 G=51 B=51	#003300 R=0 G=51 B=0
#0000FF R=0 G=0 B=255	#0000CC R=0 G=0 B=204	#000099 R=0 G=0 B=153	#000066 R=0 G=0 B=102	#000033 R=0 G=0 B=51	#000000 R=0 G=0 B=0

posted on 2007-09-14 09:50 Welcome 阅读(293) 评论(0) 编辑收藏所属分类: HTML\CSS

新用户注册刷新评论列表


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻知识库 C++博客博问管理
相关文章: CSS基本布局16例表单Form实例和讲解缓存的知识 html cache HTML/css常识 html滚动代码大全---Marquee

Welcome 布拉格

公告

常用链接

留言簿(3)

随笔分类(1)

文章分类(7)

最新评论

单行单列

单行两列

单行三列

顶行三列