index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>CSS传统布局[上]</title>
<link rel="stylesheet" type="text/css" href="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>
style.css
@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;
}
index2.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>CSS传统布局[上]</title>
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>
<header>
header
</header>
<aside>
aside
</aside>
<section>
section
</section>
<footer>
footer
</footer>
</body>
</html>
style2.css
@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;
}