HTML5列表、塊和布局
-----------------siwuxie095
HTML5 列表
|
標簽 |
描述 |
|
<ol> |
有序列表 |
|
<ul> |
無序列表 |
|
<li> |
列表項 |
|
<dl> |
列表 |
|
<dt> |
列表項 |
|
<dd> |
描述 |
1、無序列表
標簽：<ul>、<li>
屬性：disc、circle、square
2、有序列表
標簽：<ol>、<li>
屬性：A、a、I、i、start
3、嵌套列表
標簽：<ul>、<ol>、<li>
4、自定義列表
標簽：<dl>、<dt>、<dd>
HTML5 塊
1、HTML 塊元素
塊元素在顯示時，通常會以新行開始，如：<h1>、<p>、<ul>
2、HTML 內聯元素
內聯元素通常不會以新行開始，如：<b>、<a>、<img>
3、HTML <div> 元素
<div> 元素也被稱為塊元素，其主要是組合（承載） HTML 元素的容器
4、HTML <span> 元素
<span> 元素是內聯元素，可作為文本的容器
HTML5 布局
1、使用 <div> 元素布局
2、使用 <table> 元素布局
如下：
（1）DIV 布局
|
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div 布局</title> <style type="text/css"> body{ margin: 0px; } #container{ width: 100%; height: 950px; background-color: darkgray; } #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: brown; 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> |
（2）TABLE 布局
|
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table 布局</title> </head> <body marginwidth="0px" marginheight="0px"> <table width="100%" height="950px" style="background-color: darkgray"> <tr> <td colspan="2" width="100%" height="10%" style="background-color: aqua">頭部</td> </tr> <tr> <td width="30%" height="80%" style="background-color: aquamarine">內容菜單</td> <td width="70%" height="80%" style="background-color: blueviolet">內容主體</td> </tr> <tr> <td colspan="2" width="100%" height="10%" style="background-color: brown">底部</td> </tr> </table> </body> </html> |
【made by siwuxie095】
HTML5列表、塊和布局