H5学习之旅-H5的布局（10）

最新推荐文章于 2023-08-12 11:25:56 发布

weixin_30593261

最新推荐文章于 2023-08-12 11:25:56 发布

阅读量80

点赞数

原文链接：http://www.cnblogs.com/fengsehng/p/6048548.html

版权

两种实现方式：div和table

div实现布局的方式

代码实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5布局0</title>
    <style type="text/css">
        body{
            margin: 0px;;
        }
        #container{
            width:100%;
            height: 950px;
            background-color: chartreuse;
        }
        #heading{
            width: 100%;
            height: 10%;
            background-color: brown;
        }
        #content_menu{
            width:30%;
            height: 80%;
            background-color: blue;
            float: left;
        }
        #content_body{
            width: 70%;
            height: 80%;
            background-color: darkgreen;
            float: left;
        }
        #footer{
            width: 100%;
            height: 10%;
            background-color: aliceblue;
            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>

！！！！！！！float表示从左往右浮动 clear表示清除

效果图

这里写图片描述

table布局

代码实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5布局0</title>
</head>
<body>
    <table width="100%" height="950px" style="background-color: chartreuse">
        <tr>
            <td width="100%" height="10%" style="background-color: brown" colspan="3">头部</td>
        </tr>
        <tr>
            <td width="20%" height="80%" style="background-color: aqua">左菜单</td>
            <td width="60%" height="80%" style="background-color: black">主体</td>
            <td width="200%" height="80%" style="background-color:crimson">右菜单</td>
        </tr>
        <tr>
           <td width="100%" height="10%" style="background-color: deeppink" colspan="3">尾部</td>
        </tr>

    </table>
</body>
</html>

！！！！注意colspan属性

效果图

这里写图片描述

转载于:https://www.cnblogs.com/fengsehng/p/6048548.html

weixin_30593261

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5学习之旅-H5的布局（10）

两种实现方式：div和tablediv实现布局的方式代码实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>H5布局0</title> <style type="...
复制链接

扫一扫