列表
块
布局
示意图
效果 如：图一
<!--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>图一
图二
图三
图四
