首页 > 代码库 > HTML5的布局的使用

HTML5的布局的使用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>div布局</title>
    <style type="text/css">
 body{
            margin: 0px;
 }
        div#container{
            width: 100%;
 height: 950px;
 background-color: darkgray;
 }
        #heading{//div可去除
            width: 100%;
 height: 10%;
 background-color: aqua;
 }
        #content_menu{
            width: 30%;
 height: 80%;
 background-color:aquamarine;
 float:left;
 }
        #content_body{
            width: 70%;
 height: 80%;
 background-color: blueviolet;
 float:left;
 }
        #footing{
            width: 100%;
 height: 10%;
 background-color: blue;
 clear:both;
 }
    </style>
</head>
<body>
<!--div布局-->
<div id="container">
    <div id="heading">头部</div>
    <div id="content_menu">内容菜单</div>
    <div id="content_body">内容主体</div>
    <div id="footing">底部</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>table布局</title>
</head>
<body marginheight="0px" marginwidth="0px">
    <table width="100%" height="950px" style="background-color: darkgray">
        <tr>
            <td colspan="3" width="100%" height="10%" style="background-color: aqua">这是头部</td>
        </tr>
        <tr>
            <td width="20%" height="80%" style="background-color: blue">
                <ul>
                    <li>ios</li>
                    <li>android</li>
                    <li>html5</li>
                </ul>
            </td>
            <td width="60%" height="80%" style="background-color: blueviolet">内容主体</td>
            <td width="40%" height="80%" style="background-color: deeppink">左菜单</td>
        </tr>
        <tr>
            <td width="100%" height="10%" colspan="3" style="background-color: darkcyan">这是底部</td>
        </tr>
    </table>
</body>
</html>


HTML5的布局的使用