整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
者：明明如月
审校：蓝色漂流瓶
本文为你提供一篇HTML5基本布局模板示例。你可以直接拷贝，粘贴到你的HTML文件中并对其进行修改。
好，说实话，这个本是为我自己准备的html5布局模板，但是你可以拿来用。
虽然本文比较简单（喷子止步），但是还是一个不错的模板，可以存起来，或者参考一下人家的结构。
代码如下：
图片格式
图片格式
英文源：http://www.codeshare.co.uk/blog/basic-html5-template-layout-example/
要源码请评论后加前端学习群470593776
特点：无任何js痕迹，纯css3动画，需要熟练掌握html5新特性。
对于细节和兼容性的处理要到位，代码量很少，布局仅需一行代码，一个DIV
可以作为一个网页的背景图！
PS：因为代码不方便阅读以及复制，所以只发部分源码思路
完整的免费源码及思路讲解，请评论后加前端学习交流群470593776获取！
需要源码请评论后加前端学习群470593776
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
【H5教程-2.3.3小节】
2.3.3HTML5列表、块和布局
1.块元素
块元素在显示的时候，通常会以新行开始
如：<h1> <p> <ul>
<!-- 块—>注释
<p>hello</p>
<h1>world</h1>
出来的结果是:
hello
空一行
world
hello 和world 之间有新的一行
2.HTML内联元素
内联元素通常不会以新行开始 如<b> <a> <img>
<b>这是一个加重标签</b>
<a>哈哈</a>
结果是 这是一个加重标签 哈哈
没有 再起一行
3. HTML <div>元素
<div>元素也被称为块元素，其主要是组合HTML元素的容器
4.HTML<span>元素
<span>元素是内联元素，可作为文本的容器.
例子：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 块-->
<title>块元素</title>
<style type = text/css>
span{
color: aqua;
}
</style>
</head>
<body>
<p>大家好!</p>
<h1>的第三款了你的扣篮考虑到那看的扣篮了卡单身快乐你登陆看两三款单你卡上</h1>
<b>这是一个加重标签</b>
<a>哈哈</a>
<div>
<p>
极客学院
</p>
</div>
<div>
<p>
<span>
这是一个测试结果
</span>
span 是一个什么样子
</p>
</div>
</body>
</html>
5.DIV元素布局 和 table元素布局
DIV布局：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div布局</title>
<style type = "text/css">
body{
margin: 0px;
}
#container{
width: 100%;
height: 950px;
background-color: lightgray;
}
#heading{
width: 100%;
height: 10%;
background-color: aqua ;
}
#content_menu{
width: 30%;
height: 80%;
background-color: aquamarine;
float: left;
}
#content_body{
width: 70%;
height: 80%;
background-color: blueviolet;
float: left;
}
#footing{
width: 100%;
height: 10%;
background-color: black;
clear: both;
}
</style>
</head>
<body>
<div id = "container" >
<div id="heading">头部</div>
<div id=" content_menu">内容菜单</div>
<div id="content_body">内容主题</div>
<div id="footing">底部</div>
</div>
</body>
</html>
其中：
在html中常用于布局、定位、区分。DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。
个人感觉像OC里面的View。
在上面 container 为最外层的View 相当于OC一个ViewController的View，id = "container" 个人CO理解的是 这块View 的name 叫 container，
<div id="heading">头部</div> 理解的是 一块叫heading的view 里面 加了一个label ， label的内容显示的是 头部，#footing{
width: 100%;
height: 10%;
background-color: black;
clear: both;
}
这块代码的OC理解就是拿到footing的地址，对这块View做布局和颜色等等的操作。
# 就相当于 OC 里面的 *
footing 就相当于下面的 view（地址名字）UIView *view = [UIView new];
CGRect frame = controller.view.bounds;
frame.size.width = controller.view.frame.size.widthframe.size.height = controller.view.frame.size.height * 0.1
view.backGroundColor = [UIColor blackColor];
得在body 使用DIV标签（标签里面声明 view），在head 里面设置 DIV标签的一些属性.
浏览器的结果是： 去掉 黑色上面 那一栏 就把2个图片综合一下
table布局：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table布局</title>
</head>
<body marginheight="0px" marginwidth="0px">
<table width="100%" height = "950px" style="background-color: lightgray">
<tr>
<td colspan="3" width="100%" height="10%" style="background-color: aqua">这是头部</td>
</tr>
<tr>
<td width="30%" height="80%"style="background-color: blue">
<ul>
<li>iOS</li>
<li>HTML5</li>
<li>swift</li>
</ul>
</td>
<td width="60%" height="80%" style="background-color: blueviolet">主题内容</td>
<td width="20%" height="80%" style="background-color: deeppink">右菜单</td>
</tr>
<tr>
<td width="100%" height="10%" colspan="3" style="background-color: darkcyan">这是底部</td>
</tr>
</table>
</body>
</html>
<body>里面 给一个table
<table width="100%" height = "950px" style="background-color: lightgray"> 设置tale 的 宽和高 PX就像素100%就是全屏的宽度 * 1
<tr>是表格的一行,放在table或者body标签里面的
<td> 标签定义 HTML 表格中的标准单元格。td 元素中的文本一般显示为正常字体且左对齐。
HTML 表格有两类单元格：
表头单元 - 包含头部信息（由 th 元素创建）
标准单元 - 包含数据（由 td 元素创建）
*请认真填写需求信息，我们会在24小时内与您取得联系。
