两种实现方式：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属性

效果图

H5学习之旅-H5的布局（10）的更多相关文章

  1. H5 学习之旅-H5表格（7）

    表格语法 table:简历表格 captian:表格标题 th:表格行表头 tr:表格行 td:单元格 thead:表格页眉 tfoot:表格页脚 tbody:表格主体 col:列属性 !!!代码实例 ...

  2. H5学习之旅-H5的基本标签（2）

    H5的标签和html的标签没什么区别,主要介绍H5的基本标签 1.基础标签header和body,header的<title>元素主要是显示在标签页面里面,以及设置使用的语言和编码格式.b ...

  3. H5学习之旅-H5的新特性（1）

    随着H5的发展,网页开发呈现了跨平台的特性,目前H5是兼容各大平台的,这也为一些其他的技术的跨平台开发提供了基础,所以我预测后H5会成为很重要的开发语言 新特性介绍 1.用于回话的canvas标签 2 ...

  4. H5学习之旅-H5列表（8）

    列表的基本语法 ol:有序列表 ul:无序列表 li:列表项 dl:列表 dt:列表项 dd:列表描述 常用列表 1.无序列表:使用标签 ul,li 属性:disc(默认实心圆) circle (空心 ...

  5. H5学习之旅-H5的超链接以及图片链接（6）

    链接内容 1.文本链接 2.图片链接 属性 href:指向另一个文档的链接 name:文档内部的链接 img标签属性 alt:替换文本属性 width:宽 height:高 代码实例 <!DOC ...

  6. H5学习之旅-H5的样式（5）

    样式的引入方式 外部样式表 link rel = "stylesheet" type = "text/css" href = "mystyle.css ...

  7. H5学习之旅-H5的格式化（4）

    H5的格式设置: b代表是粗体 i斜体 big 字体变大 small变小 em强调 strong 加强和变粗差不多 sub 定义下标字 sup 定义上标字 ins 插入字 del 删除字 代码实例 & ...

  8. H5学习之旅-H5的框架（13）

    H5框架语法介绍 :frame:框架对于页面的设计有很大的作用 frameSet:框架集标签定义如何将窗口分割为框架 ,每一个frameset定义一些列行或者列,rowS/COLS规定了每行或者每列占 ...

  9. H5学习之旅-H5与Php交互（12）

    1.首先介绍PHP开发环境的搭建 ,在Google搜apachefriends,会有xampp的下载链接,这个工具集成了apache的很多服务 2.搭建php的编辑环境,选取eclipse安装php插 ...

随机推荐

  1. AnyConnect使用说明(电脑版Windows)

    一.下载客户端 Anyconnect支持Windows.Mac电脑. 二.安装 1.双击打开下载的文件,点“Next”开始安装. 2.选择“I accept …”,再点下一步. 3.点“Install ...

  2. vue开发中v-for在Eslint的规则检查下出现：Elements in iteration expect to have 'v-bind:key' directives

    在使用VScode编辑器vue开发过程中,v-for在Eslint的规则检查下出现报错:Elements in iteration expect to have 'v-bind:key' direct ...

  3. 用豆瓣镜像解决pip安装慢的问题

    pip3 install django==1.9 -i http://pypi.douban.com/simple/

  4. Python 制作Android开发 所需的适配不同分辨率的套图

    使用Python做起工具来还真是爽,简单,方便,快捷.今天忙活了一下,制作出一个比较实用的小工具. 自动化套图制作,适配不同屏幕 尤其是对于android开发来说,要适配不同屏幕就需要多套切图,那么. ...

  5. TOP-N类查询

    Top-N查询 --Practices_29:Write a query to display the top three earners in the EMPLOYEES table. Displa ...

  6. 深入了解UIViewController控制器与对应的View类的详解

    ViewController是iOS开发中MVC模式中的C(视图控制器),ViewController是view的controller,ViewController的职责主要包括管理内部各个view的 ...

  7. 【学习笔记】启动Nginx、查看nginx进程、查看nginx服务主进程的方式、Nginx服务可接受的信号、nginx帮助命令、Nginx平滑重启、Nginx服务器的升级

     1.启动nginx的方式: cd /usr/local/nginx ls ./nginx -c nginx.conf 2.查看nginx的进程方式: [root@localhost nginx] ...

  8. C在控制台上实现鼠标画图功能

    #include <windows.h> #include <stdio.h> #include <string.h> HANDLE hOut; HANDLE hI ...

  9. 剑指offer面试题4 替换空格（c）

  10. Android开发学习之路--Camera之初体验

    顾名思义Camera就是拍照和录像的功能,像微信里面,我们想拍照传一下照片,就可以通过camera来拍照,然后存储照片,发送给好友.那么微信的app里面是不会直接通过camera api来实现的,因为 ...