首页 > 代码库 > HTML5列表、块和布局
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列表、块和布局