两种实现方式：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. ACM hdu 3336 Count the string

    [题意概述] 给定一个文本字符串,找出所有的前缀,并把他们在文本字符串中的出现次数相加,再mod10007,输出和. [题目分析] 利用kmp算法的next数组 再加上dp [存在疑惑] 在分析nex ...

  2. MongoDB 条件操作符

    描述 条件操作符用于比较两个表达式并从mongoDB集合中获取数据. 在本章节中,我们将讨论如何在MongoDB中使用条件操作符. MongoDB中条件操作符有: (>) 大于 - $gt (& ...

  3. AbstractQueuedSynchronizer 原理分析 - 独占/共享模式

    1.简介 AbstractQueuedSynchronizer (抽象队列同步器,以下简称 AQS)出现在 JDK 1.5 中,由大师 Doug Lea 所创作.AQS 是很多同步器的基础框架,比如 ...

  4. 第一个Angular2的样例

    欢迎跟我一起学习Angular2 本文根据angular2官网手动敲码得来: 本文地址:http://blog.csdn.net/sushengmiyan 本文作者:苏生米沿 - 开发环境搭建 - 配 ...

  5. linux:如何指定进程运行的CPU

    coolshell最新的文章<性能调优攻略>在"多核CPU调优"章节,提到"我们不能任由操作系统负载均衡,因为我们自己更了解自己的程序,所以,我们可以手动地为 ...

  6. Android简易实战教程--第三十七话《NotifiCation》

    通知的使用,无疑是Android系统的亮点之一:就连IOS在5.0开始也引入了类似通知的技巧.可见它的实用性. 今天这个小案例,就学习一下通知的基本使用,API是使用最新的API,4.3以前创建通知的 ...

  7. Objective-C基础之简析深浅copy

    一.从面向对象到Objective-C概览copy 1.面向对象: In object-oriented programming, object copying is creating a copy ...

  8. iOS开发之UIWebView的常见一些用法

    虽然现在Xcode8已经开始使用WKWebView这个框架进行网页展示,但是UIWebView也有一些常用的方法需要知道,下面就简单展示一下,仅供大家参考 相关知识:1.设置背景透明:2.加载本地HT ...

  9. Java基本语法-----java运算符

    这块的东西比较多 我写了太慢了 于是在word里写好贴出来供大家一起学习 运算符 -赋值运算符 -比较运算符 -逻辑运算符 -位运算符 -移位操作符 -三元运算符 [正在看本人博客的这位童鞋,我看你气 ...

  10. spring @Qualifier注解使用

    @Autowired是根据类型进行自动装配的.如果当Spring上下文中存在多个UserDao类型的bean时,就会抛出BeanCreationException异常;如果Spring上下文中不存在U ...