html布局

1.div

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{
margin: 0px;
}
#container{
100%;
height: 950px;
background-color: darkgray;
}
#heading{
100%;
height: 10%;
background-color: antiquewhite;
}
#content_menu{
30%;
height: 80%;
background-color: cadetblue;
float: left;
}
#content_body{
70%;
height: 80%;
background-color: darksalmon;
float: left;
}
#footing{
100%;
height: 10%;
background-color: cornflowerblue;
clear: left;
}
</style>
</head>
<body>
<div id="container">
<div id="heading"></div>
<div id="content_menu"></div>
<div id="content_body"></div>
<div id="footing"></div>
</div>
</body>
</html>

2.table

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body marginheight="0px" marginwidth="0px">
<table width="100%" height="950px" style="background-color: darkgray">
<tr>
<td colspan="2" width="100%" height="10%" style="background-color: rebeccapurple">
</td>
</tr>
<tr>
<td width="30%" height="80%" style="background-color: blue"></td>
<td width="70%" height="80%" style="background-color: gold"></td>
</tr>
<tr>
<td colspan="2" width="100%" height="10%" style="background-color: aquamarine"></td>
</tr>
</table>
</body>
</html>
原文地址:https://www.cnblogs.com/huoran1120/p/5941746.html