[H5]HTML5列表、块和布局
2017-02-05 15:28
190 查看
[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>
示意图：
图一
图二
图三
图四
[列表]
效果 如：图一
<!--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>
示意图：
图一
图二
图三
图四
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 2.10.2section 元素
- 解决IE(IE6/IE7/IE8)不兼容HTML5标签的方案
- Html5学习之旅(5)嵌入元素 progress meter embed audio video
- Html5学习之旅(4)iframe
- HTML5引入的新数组TypedArray介绍
- Html5学习之旅(3) 文本元素
- H5新特性
- Html5学习之旅(2)元素
- H5屏幕侧滑切换
- Html5学习之旅(1)
- html5为输入框添加语音输入功能
- HTML5学习笔记（二）：HTML基础学习之一
- Ch5 关联式容器（中）
- HTML5 表单元素 —— input元素
- H5背景音乐自动播放和暂停
- html5
- HTML5中新的结构元素
- html5解决大文件断点续传
- HTML5 拖放（Drag 和 Drop）详解与实例
- HTML5的头部和元信息