整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
者：明明如月
審校：藍色漂流瓶
本文為你提供一篇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小時內與您取得聯系。
