[H5]HTML5列表、塊和布局
[列表]
效果 如：圖一
<!--HTML列表--><!-- 標簽 描述 --><!-- <ol> 有序列表 --><!-- <ul> 無序列表 --><!-- <li> 列表項 --><!-- <dl> 列表（自定義）--><!-- <dt> 列表項 --><!-- <dd> 描述 --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>列表</title></head><body> <!--常用列表--> <!--1.無序列表--> <!--使用標簽：<ul>、<li> --> <!--屬性：disc（實心圓 默認）、circle（空心圓）、square（方塊） --> <ul type="circle"> <li>無序列表1</li> <li>無序列表2</li> <li>無序列表3</li> </ul> <!--2.有序列表--> <!--使用標簽：<ol>、<li> --> <!--屬性：A、a、I、i、start（默認start=1 從1開始遞增） --> <ol start="5"> <li>有序列表1</li> <li>有序列表2</li> <li>有序列表3</li> </ol> <!--3.嵌套列表--> <!--使用標簽：<ul>、<ol>、<li> --> <ol type="a"> <li>10</li> <ul> <li>11</li> <li>12</li> <li>13</li> </ul> <li>20</li> <ul> <li>21</li> <li>22</li> <li>23</li> </ul> <li>30</li> <ul> <li>31</li> <li>32</li> <li>33</li> </ul> </ol> <!--4.自定義列表--> <!--使用標簽：<dl>、<dt>、<dd> --> <dl> <dt>100</dt> <dd>101</dd> <dd>102</dd> <dt>200</dt> <dd>201</dd> <dd>202</dd> <dt>300</dt> <dd>301</dd> <dd>302</dd> </dl></body></html>[塊]
效果 如：圖二
<!--HTML塊--><!--1.HTML 塊元素--> <!--塊元素在顯示時，通常會以新行開始--> <!--如：<h1>、<p>、<ul>--><!--2.HTML 內聯元素--> <!--內聯元素通常不會以新行開始--> <!--如：<b>、<a>、<img>、--><!--3.HTML <div>元素--> <!--<div>元素也被稱為塊元素，其主要是作為組合HTML元素的容器--><!--4.HTML <span>元素--> <!--<span>元素是內聯元素，可作為文本的容器--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>塊</title> <!--引入CSS樣式--> <link rel="stylesheet" type="text/css" href="style04-1.css"> <!--也可直接改變樣式--> <style type="text/css"> span{ color: blueviolet; } </style></head><body> <!--1.塊元素--> <p>p標簽第一行</p> <h2>h2標簽從新的一行開始</h2> <!--2.內聯元素--> <b>b標簽第一行</b> <a>未換行的a標簽</a> <!--3.<div>元素--> <!--主要是配合一些樣式來進行使用，如：css樣式--> <!--定義id或Class在css中索引--> <div id="dID"> <p>div標簽中的p標簽</p> <a>a標簽</a> <h1>h1標簽</h1> </div> <!--4.<span>元素--> <!--一般將dev和span聯合在一起使用--> <div id="sID"> <p>div中的p標簽</p> <span>div中的span標簽</span> </div></body></html>css樣式
/*索引id用'#'符號，索引class用'*'符號*/#dID { /*顏色*/ color: red;}#dID h1 { color: sienna;}[布局]
<div>布局
效果 如：圖三
<!--HTML 布局--><!--1.使用<div>元素布局--><!--2.使用<table>元素布局--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>div布局</title> <style type="text/css"> body { /*邊距設置為0*/ margin: 0px; } /*索引時這里的div可以不用添加*/ div#gID { width: 100%; height: 750px; /*背景顏色*/ background-color: blanchedalmond; } /*頭部樣式*/ #hID { width: 100%; height: 10%; background-color: aquamarine; } /*內容菜單樣式*/ #cID { width: 30%; height: 80%; background-color: blueviolet; /*添加從左到右的浮動*/ float: left; } /*內容樣式*/ #bID { width: 70%; height: 80%; background-color: blue; float: left; } /*腳部樣式*/ #fID { width: 100%; height: 10%; background-color: olivedrab; /*因為上面設置了浮動，這里默認是跟著上面的設置走的，要顯示設置樣式需清除浮動*/ clear: both; } </style></head><body> <!--1.<div>布局--> <!--整個頁面全局控制的<div>--> <div id="gID"> <div id="hID">頭部</div> <div id="cID">內容菜單</div> <div id="bID">內容</div> <div id="fID">腳部</div> </div></body></html><table>布局
效果 如：圖四
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>table布局</title></head><!--邊距設置為0--><body marginheight="0px" marginwidth="0px"> <!--2.<table>布局--> <table width="100%" height="750px" style="background-color: olive"> <!--頭部--> <tr> <!--colspan="2"表示兩個單元格合并為一個的意思--> <td colspan="2" width="100%" height="10%" style="background-color: aqua">頭部</td> </tr> <!--內容部分--> <tr> <td width="30%" height="80%" style="background-color: antiquewhite"> <ul> <li>欄目一</li> <li>欄目二</li> <li>欄目三</li> </ul> </td> <td width="70%" height="80%" style="background-color: olive">內容區</td> </tr> <!--底部--> <tr> <td colspan="2" width="100%" height="10%" style="background-color: blueviolet">底部</td> </tr> </table></body></html>示意圖：
圖一
圖二
圖三
圖四
新聞熱點
疑難解答
