html5 div布局与table布局

最新推荐文章于 2024-07-28 08:03:31 发布

俊刚、

最新推荐文章于 2024-07-28 08:03:31 发布

阅读量1w

点赞数 4

分类专栏： 2020以前文章标签： div布局 table布局

本文链接：https://blog.csdn.net/csdn9_14/article/details/53177614

版权

2020以前专栏收录该内容

50 篇文章 0 订阅

订阅专栏

div布局：html+css实现简单布局。

#container中height不能写成百分数，必须为具体高度。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>div布局</title>
    <style type="text/css">
        body{
            margin:0;
            padding:0;
        }
        #container{
            width:100%;
            height:650px;
            background-color: aqua;
        }
        #heading{
            width:100%;
            height:10%;
            background-color: azure;
        }
        #content-menu{
            width:30%;
            height:80%;
            background-color: chartreuse;
            float:left;
        }
        #content-body{
            width:70%;
            height:80%;
            background-color: chocolate;
            float:left;
        }
        #footer{
            width:100%;
            height:10%;
            background-color: darkgrey;
            clear: both;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="heading">头部</div>
        <div id="content-menu">内容菜单</div>
        <div id="content-body">内容主体</div>
        <div id="footer">底部</div>
    </div>
</body>
</html>

效果图：

table布局：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>table布局</title>
</head>
<body marginwidth="0px" marginheight="0px">
    <table width="100%" height="650px" style="background-color: aqua">
        <tr>
            <td colspan="3" width="100%" height="10%" style="background-color: chartreuse">这是头部</td>
        </tr>
        <tr>
            <td width="20%" height="80%" style="background-color: antiquewhite">左菜单</td>
            <td width="60%" height="80%" style="background-color: coral">内容</td>
            <td width="20%" height="80%" style="background-color: cornflowerblue">右菜单</td>
        </tr>
        <tr>
            <td colspan="3" width="100%" height="10%" style="background-color: crimson">这是底部</td>
        </tr>
    </table>
</body>
</html>

效果图：