两种实现方式：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. 再见，segmentfault

    再见,segmentfault 太多的Bug,对segmentfault已经爱不起了. 重回博客园~

  2. python通过token登录，并爬取数据实例

    from bs4 import BeautifulSoup import requests class Zabbix(object): def __init__(self, headers): sel ...

  3. Java第4次实验提纲（面向对象2-继承、多态、抽象类与接口与Swing）

    PTA 题集面向对象2-进阶-多态接口内部类 第1次实验 1.1 题集5-1(Comparable) 难点:如果传入对象为null,或者传入对象的某个属性为null,怎么处理? 1.2 题集5-2(C ...

  4. eclipse安装和中文汉化，以及配置

    官网下载 eclipse http://www.eclipse.org/downloads/eclipse-packages/ ----选择 "Eclipse IDE for Java De ...

  5. hive表的存储格式; ORC格式的使用

    hive表的源文件存储格式有几类: 1.TEXTFILE 默认格式,建表时不指定默认为这个格式,导入数据时会直接把数据文件拷贝到hdfs上不进行处理.源文件可以直接通过hadoop fs -cat 查 ...

  6. 如何获得Android手机的软件安装列表

    Android的PackageManager类用于检索目前安装在设备上的应用软件包的信息.你可以通过调用getpackagemanager()得到PackageManager类的一个实例.对查询和操作 ...

  7. CoreAnimation中layer动画闪烁的原因及解决

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 网上有一段Core Animation层动画的例子,是将vie ...

  8. Gazebo與ROS版本說明

    使用哪种ROS / Gazebo版本的组合 介绍 本文档提供了有关将不同版本的ROS与不同版本的Gazebo结合使用的选项的概述.建议在安装Gazebo ROS包装之前阅读它.重要!简单的分析,快速和 ...

  9. 会声会影小成果分享（那段青春岁月）——校学习部宣传视频制作&生日祝福

    大二的时候在校学习部当副部长,没有给干事们带去好的工作经验和管理方法,我净在折腾新媒体方面的东西,很惭愧的说,那时候申请了一个微信的公众号(HGXXB1314),我那时候以为自己很叼,最后是发现自己装 ...

  10. GDAL库扩展Landsat系列MTL文件格式支持

    Landsat系列卫星提供的数据,一般都是每个波段一个tif文件,然后外加一个MTL.txt的元数据文件,使用gdal可以直接打开每个波段的tif文件,但是有时候想在打开tif数据的同时能够自动读取M ...