<div>和<table>元素的布局

最新推荐文章于 2017-10-26 22:36:01 发布

u012416664

最新推荐文章于 2017-10-26 22:36:01 发布

阅读量282

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/u012416664/article/details/47679891

版权

HTML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<div>元素布局代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div布局</title>
<style type="text/css">
    body{
        margin: 0px;
    }
    div#contaoner{
        width:100%;
        height:700px;
        background-color:seagreen;
    }
    div#heading{
        width:100%;
        height:10%;
    background-color: antiquewhite;
    }
    div#content_menu{
        width: 30%;
        height:80%;
        background-color:darkblue;
        float: left;
    }
    div#content_body{
        width: 70%;
        height: 80%;
        background-color: aqua;
        float: left;
                }
    div#footing{
        width: 100%;
        height: 10%;
        background-color: blueviolet;
        clear:both;
    }
</style>
</head>
<body>
<div id="contaoner">
    <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 lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body  marginheight="0px" marginwidth="0px">
<table width="100%" height="650px" style="background-color:seagreen">
<tr>
    <td colspan="3" width="100%" height="10%" style="background-color:greenyellow">这是头部</td>
</tr>
    <tr>
    <td width="20%" height="80%" style="background-color: azure">左菜单</td>
    <td width="60%" height="80%" style="background-color: brown">内容</td>
        <td width="20%" height="80%" style="background-color: azure">右菜单</td>
    </tr>
    <tr>
        <td with="100%" height="10%" style="background-color: cadetblue" colspan="3">底部</td>
    </tr>
</table>
</body>
</html>

u012416664

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
<div>和<table>元素的布局

元素布局代码：html>html lang="en">head> meta charset="UTF-8"> title>div布局title>style type="text/css"> body{ margin: 0px; } div#contaoner{ width:100%; height
复制链接

扫一扫