[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>示意图：
图一
图二
图三
图四
新闻热点
疑难解答
