两种实现方式：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. qPCR检测基因表达的引物数据库

    老板推荐了一个专门用来做基因表达定量(qPCR)的引物数据库,还蛮好用的,都是别人实验验证过的,感觉比自己设计的更靠谱一下,附上链接:https://pga.mgh.harvard.edu/prime ...

  2. 全新 Kali Linux 系统安装指南

    Kali Linux 系统可以说是在安全测试方面最好的开箱即用的 Linux 发行版.Kali 下的很多工具软件都可以安装在大多数的 Linux 发行版中,Offensive Security 团队在 ...

  3. JavaScript 比较和逻辑运算符

    比较和逻辑运算符用于测试 true 或者 false. 比较运算符 比较运算符在逻辑语句中使用,以测定变量或值是否相等. 给定 x=5,下面的表格解释了比较运算符: 实例 »实例 » 大于 大于或等于 ...

  4. 最大熵模型The Maximum Entropy

    http://blog.csdn.net/pipisorry/article/details/52789149 最大熵模型相关的基础知识 [概率论:基本概念CDF.PDF] [信息论:熵与互信息] [ ...

  5. 使用QGIS将文本坐标转换为矢量文件

    本文主要是说明如果使用QGIS将文本格式的点坐标转换为矢量文件(如shapefile格式). 所需工具:QGIS 所需数据:文本格式的点文件 所需要处理的点坐标文件如下所示, 114.2 22.15 ...

  6. SpriteKit:检测当新场景显示以后

    Detecting When a New Scene Is Presented Sprite Kit在SKScene类中提供2个可以重载的方法用来检测当一个场景过渡出去或过渡进来的时候. 第一个方法是 ...

  7. 指令汇B新闻客户端开发（四） 自动轮播条

    在这个新闻客户端,我们可以看到有一个轮播页面,在这个项目中,用Handler和一个定时器来做更容易一些, 我们定义一个Handler: private Handler mHandler; 定时器的代码 ...

  8. 4.关于QT中的QFile文件操作,QBuffer,Label上添加QPixmap,QByteArray和QString之间的区别,QTextStream和QDataStream的区别,QT内存映射（

     新建项目13IO 13IO.pro HEADERS += \ MyWidget.h SOURCES += \ MyWidget.cpp QT += gui widgets network CON ...

  9. 02_IO操作的基本规律（InputStream，OutputStream，Reader,Writer,FileReader,FileWriter,BufferedReader,BufferedWri

     模拟BufferedInputStream,编写一个类 package toto.IO; import java.io.IOException; import java.io.InputStre ...

  10. 【OpenGL】详解第一个OpenGL程序

    写在前面 OpenGL能做的事情太多了!很多程序也看起来很复杂.很多人感觉OpenGL晦涩难懂,原因大多是被OpenGL里面各种语句搞得头大,一会gen一下,一会bind一下,一会又active一下. ...