[H5]HTML5列表、塊和布局
[列表]
效果 如：圖一
<!--HTML列表--><!-- 標(biāo)簽 描述 --><!-- <ol> 有序列表 --><!-- <ul> 無(wú)序列表 --><!-- <li> 列表項(xiàng) --><!-- <dl> 列表（自定義）--><!-- <dt> 列表項(xiàng) --><!-- <dd> 描述 --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>列表</title></head><body> <!--常用列表--> <!--1.無(wú)序列表--> <!--使用標(biāo)簽：<ul>、<li> --> <!--屬性：disc（實(shí)心圓 默認(rèn)）、circle（空心圓）、square（方塊） --> <ul type="circle"> <li>無(wú)序列表1</li> <li>無(wú)序列表2</li> <li>無(wú)序列表3</li> </ul> <!--2.有序列表--> <!--使用標(biāo)簽：<ol>、<li> --> <!--屬性：A、a、I、i、start（默認(rèn)start=1 從1開(kāi)始遞增） --> <ol start="5"> <li>有序列表1</li> <li>有序列表2</li> <li>有序列表3</li> </ol> <!--3.嵌套列表--> <!--使用標(biāo)簽：<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.自定義列表--> <!--使用標(biāo)簽：<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 塊元素--> <!--塊元素在顯示時(shí)，通常會(huì)以新行開(kāi)始--> <!--如：<h1>、<p>、<ul>--><!--2.HTML 內(nèi)聯(lián)元素--> <!--內(nèi)聯(lián)元素通常不會(huì)以新行開(kāi)始--> <!--如：<b>、<a>、<img>、--><!--3.HTML <div>元素--> <!--<div>元素也被稱為塊元素，其主要是作為組合HTML元素的容器--><!--4.HTML <span>元素--> <!--<span>元素是內(nèi)聯(lián)元素，可作為文本的容器--><!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標(biāo)簽第一行</p> <h2>h2標(biāo)簽從新的一行開(kāi)始</h2> <!--2.內(nèi)聯(lián)元素--> <b>b標(biāo)簽第一行</b> <a>未換行的a標(biāo)簽</a> <!--3.<div>元素--> <!--主要是配合一些樣式來(lái)進(jìn)行使用，如：css樣式--> <!--定義id或Class在css中索引--> <div id="dID"> <p>div標(biāo)簽中的p標(biāo)簽</p> <a>a標(biāo)簽</a> <h1>h1標(biāo)簽</h1> </div> <!--4.<span>元素--> <!--一般將dev和span聯(lián)合在一起使用--> <div id="sID"> <p>div中的p標(biāo)簽</p> <span>div中的span標(biāo)簽</span> </div></body></html>css樣式
/*索引id用'#'符號(hào)，索引class用'*'符號(hào)*/#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 { /*邊距設(shè)置為0*/ margin: 0px; } /*索引時(shí)這里的div可以不用添加*/ div#gID { width: 100%; height: 750px; /*背景顏色*/ background-color: blanchedalmond; } /*頭部樣式*/ #hID { width: 100%; height: 10%; background-color: aquamarine; } /*內(nèi)容菜單樣式*/ #cID { width: 30%; height: 80%; background-color: blueviolet; /*添加從左到右的浮動(dòng)*/ float: left; } /*內(nèi)容樣式*/ #bID { width: 70%; height: 80%; background-color: blue; float: left; } /*腳部樣式*/ #fID { width: 100%; height: 10%; background-color: olivedrab; /*因?yàn)樯厦嬖O(shè)置了浮動(dòng)，這里默認(rèn)是跟著上面的設(shè)置走的，要顯示設(shè)置樣式需清除浮動(dòng)*/ clear: both; } </style></head><body> <!--1.<div>布局--> <!--整個(gè)頁(yè)面全局控制的<div>--> <div id="gID"> <div id="hID">頭部</div> <div id="cID">內(nèi)容菜單</div> <div id="bID">內(nèi)容</div> <div id="fID">腳部</div> </div></body></html><table>布局
效果 如：圖四
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>table布局</title></head><!--邊距設(shè)置為0--><body marginheight="0px" marginwidth="0px"> <!--2.<table>布局--> <table width="100%" height="750px" style="background-color: olive"> <!--頭部--> <tr> <!--colspan="2"表示兩個(gè)單元格合并為一個(gè)的意思--> <td colspan="2" width="100%" height="10%" style="background-color: aqua">頭部</td> </tr> <!--內(nèi)容部分--> <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">內(nèi)容區(qū)</td> </tr> <!--底部--> <tr> <td colspan="2" width="100%" height="10%" style="background-color: blueviolet">底部</td> </tr> </table></body></html>示意圖：
圖一
圖二
圖三
圖四
新聞熱點(diǎn)
疑難解答
圖片精選
