首页 > 代码库 > 第27章 CSS传统布局（上）
第27章 CSS传统布局（上）
第 27章 CSS传统布局[上]
学习要点：
1.布局模型
2.表格布局
3.浮动布局
本章主要探讨 HTML5中 CSS早期所使用的传统布局，很多情况下，这些布局方式还
是非常有用的。
一．布局模型
在早期没有平板和智能手机等移动设备大行其道的时期，Web页面的设计主要是面向
PC端电脑分辨率展开的。这种分辨率比例比较单一，基本上只要满足最低分辨率设计即可。
一般来说有 4:3、16:10、16:9这样的主要分辨率。那么，从这种比例上来看，长度总是
大于宽度的。从最低分辨率 1024 * 768设计即可。为了使浏览器底部不出现滚动条，需要
减去适当的宽度，比如减去 28，最终固定长度设置为 996即可。当然，也有一些网站在近
两年讲最低分辨率设置为 1280减去滚动条宽度，因为大显示器逐步主流。
除了刚才所说的固定长度的布局，还有一种是流体布局，就是布局的长度为百分比，比
如 100%。不管你是什么分辨率，它都能全屏显示，当然，局限性也特别大，只适合一些单
一页面，复杂的页面，会随着不同浏览器产生各种阅读障碍。
二．表格布局
表格布局，就是通过设定固定的单元格，去除表格边框和填充实现的布局。当然这个布
局非常不建议使用，只是教学了解。表格应该用它最为语义的地方，就是二维表的数据显示。
1.固定布局
//HTML部分
<table border="0">
<tr>
<td colspan="2" class="header">header</td>
</tr>
<tr>
<td class="aside">aside</td>
<td class="section">section</td>
</tr>
<tr>
<td colspan="2" class="footer">footer</td>
</tr>
</table>
//CSS部分
body {
margin:0;
}
table {
margin:0 auto;
width: 960px;
border-spacing: 0;
}
.header {
height: 120px;
background-color: olive;
}
.aside {
width: 200px;
height: 500px;
background-color: purple;
}
.section {
width: 760px;
height: 500px;
background-color: maroon;
}
.footer {
height: 120px;
background-color: gray;
}
2.流体布局
表格的固定布局改成流体布局非常简单，只需要设置 table为 100%即可。
//修改 table
table {
width: 100%;
}
三．浮动布局
浮动布局主要采用 float和 clear两个属性来构建。
1.固定布局
//HTML部分
<header>
header
</header>
<aside>
aside
</aside>
<section>
section
</section>
<footer>
footer
</footer>
//CSS部分
body {
width: 960px;
margin: 0 auto;
color: white;
}
header {
height: 120px;
background-color: olive;
}
aside {
width: 200px;
height: 500px;
background-color: purple;
float: left;
}
section {
width: 760px;
height: 500px;
background-color: maroon;
float:right;
}
footer {
height: 120px;
background-color: gray;
clear:both;
}
2.流体布局
流体布局只要更改 body元素的限定长度为 auto或 100%。然后左右两列分别设置 20%
和 80%即可。
//CSS部分
body {
width: auto;
}
aside {
width: 20%;
}
section {
width: 80%;
}
例子：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>CSS传统布局[上]</title>
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/style.css">
</head>
<body>
<table border="0">
<tr>
<td colspan="2" class="header">header</td>
</tr>
<tr>
<td class="aside">aside</td>
<td class="section">section</td>
</tr>
<tr>
<td colspan="2" class="footer">footer</td>
</tr>
</table>
</body>
</html>
@charset "utf-8";
body {
margin: 0;
}
table {
/*width: 960px;*/
width: 100%;
margin: 0 auto;
/*border-spacing: 0px;*/
border-collapse: collapse;
}
.header {
height: 120px;
background-color: olive;
}
.aside {
width: 200px;
height: 500px;
background-color: purple;
}
.section {
width: 760px;
background-color: maroon;
}
.footer {
height: 120px;
background-color: gray;
}
例子2
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>CSS传统布局[上]</title>
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/style2.css">
</head>
<body>
<header>
header
</header>
<aside>
aside
</aside>
<section>
section
</section>
<footer>
footer
</footer>
</body>
</html>
@charset "utf-8";
body {
margin: 0 auto;
/*width: 960px;*/
width: auto;
}
header {
height: 120px;
background-color: olive;
}
aside {
/*width: 200px;*/
width: 20%;
/*min-width: 120px;*/
height: 500px;
background-color: purple;
float: left;
}
section {
/*width: 760px;*/
width: 80%;
height: 500px;
background-color: maroon;
float: right;
}
footer {
height: 120px;
background-color: gray;
clear: both;
}
第27章 CSS传统布局（上）