CSS3 传统布局（上）（20160902-0033）

来源：互联网发布：mysql 快照读有什么用编辑：程序博客网时间：2024/04/30 08:15

一、布局模型

在早期没有平板电脑和智能手机等移动设备大行其道的时期，Web 页面的设计主要是面向 PC 端电脑分辨率展开的，这种分辨率比例比较单一，基本上只满足最低分辨率设计即可，一般来说4:3、16:10、16:9 这样的主要分辨率。那么，从这种比例上来看，长度总是大于宽度的。从最低分辨率1024 * 768 设计即可。为了使浏览器底部不出现滚动条，需要减去适当的宽度，比如减去 28，最终固定长度设置为 996 即可。但让，也有一些网站近两年将最低分辨率设置为 1280 减去滚动条宽度，因为大显示器逐步流行。

除了刚才所说的固定长度的布局，还有一种流体布局，就是布局的长度为百分比，比如 100%。。不管分辨率是多少，它都能全屏显示，当然，局限性也特别大，只适合一些单一页面，复杂的页面，会随着不同浏览器产生各种阅读障碍。

示例：采用表格布局和浮动布局，构建固定和流体布局的方式，模型图如下

HTML 代码

<body><!--  表格布局  --><table border="0"><tr><td colspan="2"> header </td></tr><tr><td id="aside"> aside </td><td id="section"> section </td></tr><tr><td colspan="2"> footer </td></tr></table><!-- 浮动布局 --><header>header</header><aside>aside</aside><section>section</section><footer>footer</footer></body>

二、表格布局

表格布局，就是通过设定固定的单元格，去除表格边框和填充实现的布局。这个布局不建议使用，表格应该用它最为语义的地方，就是二维表的数据显示。

1、固定布局

body{color: white;}table{/*width: 960px;*/width: 100%;margin: 0 auto;border-collapse: collapse;}table tr:first-child{height: 120px;vertical-align: top;background-color: olive;}#aside{/*width: 200px;*/width: 20%;height: 500px;background-color: purple;vertical-align: top;}#section{background-color: maroon;vertical-align: top;}table tr:last-child{height: 120px;vertical-align: top;background-color: gray;}

2、流体布局

表格的固体布局改为流体布局非常简单，只需要设置 table 为 100% 即可。

三、浮动布局

浮动布局主要采用 float 和 clear 两个属性来构建。

1、固定布局

body{/*width: 960px;*//*width: auto;*/width: 100%;margin: 0 auto;}header{height: 120px;background-color: olive;}aside{/*width: 200px;*/width: 20%;height: 500px;background-color: purple;float: left;}section{height: 500px;/*width: 760px;*/width: 80%;background-color: maroon;float: left;}footer{height: 120px;background-color: gray;clear: both;}

2、流体布局只要更改 body 元素的限定长度为 auto 或 100%，然后左右两列分别设置 20% 和 80% 即可。

示例代码地址

0 0