极客学院web前端学习笔记（六）html布局

最新推荐文章于 2020-07-01 23:12:36 发布

Riverlly

最新推荐文章于 2020-07-01 23:12:36 发布

阅读量175

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/weixin_41032724/article/details/81406879

版权

html5 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

使用div标签布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <style>
        body{
            margin:0px;
        }
        #container{
            width: 100%;
            height: 950px;
            background-color: darkgray;
        }
        #heading{
            width:100%;
            height:10%;
            background-color: white;
        }
        #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: 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>

其中float和clear一度不是很懂，查了一下，float可以让元素浮动起来，直到碰到另一个浮动元素的“边框”，文本会围绕着浮动的元素，但是一般只能左右浮动，要清除其他浮动效果对自己的影响则要使用clear，在此例中，如果不使用clear，底部会出现在紧挨着头部的下面，被主体部分遮挡住。

<table width="100%" height="950px" style="background-color: gray">
    <tr>
        <td colspan="2" width="100%" height="10%" style="background-color: white">
            头部
        </td>
    </tr>
    <tr>
        <td width="30%" height="80%" style="background-color: aqua">
            左菜单
        </td>
        <td width="70%" height="80%" style="background-color: blueviolet">
            主体
        </td>
    </tr>
    <tr>
        <td width="100%" heighgt="10%" colspan="2" style="background-color: chocolate">
            这是底部
        </td>
    </tr>
</table>

colspan：合并单元格

两种方式效果基本相同

Riverlly

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
极客学院web前端学习笔记（六）html布局

使用div标签布局&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;列表&lt;/title&gt; &lt;style&gt; body{
复制链接

扫一扫