html5 布局

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">

<style type="text/css">
body{
margin: 0px;
/* 任意一个距离都为0*/
}
div#container{
width: 100%;
height: 950px;
background-color: orange;
}
div#heading{
width: 100%;
height: 10%;
background-color: aqua;
}
div#content_menu{

width: 30%;
height: 80%;
background-color: yellow;
float: left;//浮动从左到右
}

div#content_body{
width: 70%;
height: 80%;
background-color: blue;
float: left;
}
div#footing{
width: 100%;
height: 10%;
background-color: black;
clear: both;

}
</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>

 

 

使用table

 

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">


</head>
<body marginheight="0px" marginwidth="0px">

<table width="100%" height="950px" style="background-color:darkgray">
<tr>
<td colspan="2" weith=100% height=10% style="background-color:aqua">这是头部</td>
</tr>
<tr>
<td weith=10% height=80% style="background-color:yellow">内容菜单</td>
<td weith=70% height=80% style="background-color:blue">内容主体</td>
</tr>
<!--
<tr>
<td width=100% height=10% colspan="2">这是底部 </td>
</tr>
-->



</table>

</body>
</html>

 

posted @ 2015-05-09 17:49  谢小锋  阅读(218)  评论(0)    收藏  举报