html5之div table布局 (代码+注释

最新推荐文章于 2023-06-11 14:59:33 发布

帅裂苍穹xxx

最新推荐文章于 2023-06-11 14:59:33 发布

阅读量696

点赞数

本文链接：https://blog.csdn.net/qq_40836250/article/details/82456949

版权

笔记2 入门小白的学习笔记，欢迎路过大佬指正~

div布局

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>exercise2 table布局</title>
    <style type="text/css">
        body
        {
            margin:0px;
        }
        #container{
            width:100%;
            height:950px;
            background-color: aqua;}
        #heading{
            width:100%;
            height:10%;
            background-color:antiquewhite;}
        #content_menu{
            width:30%;
            height:80%;
            background-color:#E21417;
            float:left;}
        #content_body{
            width:70%;
            height:80%;
            background-color:#22DC20;
            float:right;
            }

        #footing{
            width:100%;      
            height:10%;
            background-color:#B69B9C;
            clear:both;

        }     

    </style>  <!--menu和body有设置了浮动属性，那么footing的属性会跟着前面走，所以要清除float，否则没有效果,both为清除全部-->
</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>
<meta charset="utf-8">
<title>exercise2 table布局</title>
</head>

<body marginheight="0px" marginwidth="0px">
    <table width="100%" height="950px" bgcolor="#D1696B">
        <tr>
            <td colspan="3" width="100%" height="10%" style="background-color: #1E0E0F">这是头部</td>
        </tr>
        <tr>
            <td width="20%" height="80%" style="background-color: #7918C0">左半部分</td>
            <td width="60%" height="80%" style="background-color:antiquewhite">主体部分</td>
            <td width="20%" height="80%" style="background-color: #309411">右半部分</td>
        </tr>
        <tr>
            <td colspan="3" width="100%" height="10%" colspan="2" style="background-color: #18DCA8" align="right">这是底部</td>
        </tr>
    </table>
</body>
</html>

帅裂苍穹xxx

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5之div table布局 (代码+注释

笔记2 入门小白的学习笔记，欢迎路过大佬指正~div布局&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;exercise2 table布局&lt;/title&gt; &lt;style type="text/css"&
复制链接

扫一扫