HTML5-布局的使用

 

DIV布局:

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>div布局</title>

    <style type="text/css">

        body{

            margin: 0px;

        }

        #container{

            width: 100%;

            height: 950px;

            background-color: cadetblue;

        }

        #heading{

            width: 100%;

            height: 10%;

            background-color: aqua;

        }

        #content_menu{

            width: 30%;

            height: 80%;

            background-color: #ed3cff;

            float: left;

        }

        div#content_body{

            width: 70%;

            height: 80%;

            background-color: blueviolet;

            float: left;

        }

        #footing{

            width: 100%;

            height: 10%;

            background-color: black;

            clear: both;

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

表格布局:


<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>table布局</title>

</head>

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

<!--marginheight="0px" marginwidth="0px":页边距-->

<table width="100%" height="950px" style="background-color: chocolate">

    <tr>

        <td colspan="2" width="100%" height="10%" style="background-color: blueviolet">头部</td>

        <!-- colspan="2":合并单元格-->

    </tr>

    <tr>

        <td width="30%" height="80%" style="background-color: chartreuse">

            <ul>

                <li>ios</li>

                <li>html5</li>

                <li>windows</li>

                <li>Mac os</li>

            </ul>

        </td>

        <td width="70%" height="80%" style="background-color: darkolivegreen">主页面</td>

    </tr>

    <tr>

        <td width="100%" height="10%" colspan="2" style="background-color: teal">底部</td>

    </tr>

</table>

</body>

</html>

 

你可能感兴趣的:(html5)