34.CSS传统布局【上】
第二十七章 传统布局【上】
一、布局模型
二、表格布局 （非常不建议使用）
就是通过设定固定的单元格，去除表格边框和填充实现的布局，他应该在二维表格的数据显示
1、固定布局
//html部分
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>传统布局[上]</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table border="1"> <!-- 1的值待后面属性输入完后改为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>
//CSS部分
@charset "utf-8"
body{
margin:0; /*去掉外边距*/
}
table{
width: 960px;
margin:0 auto; /*auto是居中*/
/*border-spacing: 0px;*/
border-collapse: collapse; /* 设完这个属性或上面那个，就可以把前面的border值由1改为0，使表格线消掉*/
}
.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、流体布局
表格的固定布局该成流体布局非常简单，只需要设置table为100%即可。
//修改table
table{
width：100%；
}
三、浮动布局
浮动布局主要采用float和clear两个属性来构建
1、固定布局
//html布局
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>传统布局[上]</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
header
</header>
<aside>
aside
</aside>
<section>
section
</section>
<footer>
footer
</footer>
</body>
</html>
//css布局
@charset "utf-8"
body{
margin:0 auto;
width: 960px;
}
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;
}
2、流体布局
只要更改body元素的限定长度为auto或100%，然后左右两侧分别设置20%和80%即可
//css部分
body{
width：auto；
}
aside{
width：20%；
}
section{
width：80%；
}
