列表的使用
2017-10-12 本文已影响0人
蝌蚪1573
实验三列表的使用
任务一、新闻列表的实现
创建页面3-1用列表实现一个新闻显示版块，要求利用列表方法，适当运用字体、字号间距等的修饰完成新闻列表的定义。显示结果如下
实验三-列表的使用85.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新闻列表的实现</title>
<style>
li{
margin-bottom: 10px;
}
</style>
</head>
<body >
<div style="background-color: #E6E7D5;height: 360px;width: 360px">
<div style="margin-bottom: 30px;">
<h2 style="font-size: 20px;font-family: 'Microsoft YaHei UI';">暴雪：商业 艺术与技术的平衡之道</h2>
</div>
<ul>
<li>点选名将 抢礼包《千军破》 首服开启</li>
<li>战国新游《王者天下》开启 抢礼包</li>
<li>快来玩 《德州扑克》 与人斗其乐无穷</li>
<li>《十年一剑》真武侠一区开启 抢礼包</li>
<li>可买卖游戏代码 传魔兽大灾变过审批</li>
<li>儿时游戏50年变迁 00后迷动画爱网游</li>
<li>监狱强迫犯人打网游 徐州禁少年进网吧</li>
<li>ipad成为最赚钱的移动游戏平台</li>
</ul>
</div>
</body>
</html>
任务二、有序列表的type属性
创建页面3-2.html，利用有序列表的type属性的不同取值，实现下面页面的效果：
实验三-列表的使用148.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>有序列表的type属性</title>
</head>
<body>
<h2 style="font-size: 16px;font-family: 'Microsoft YaHei UI';">数字列表：</h2>
<ol type="1">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4 style="font-size: 16px;font-family: 'Microsoft YaHei UI';">字母列表：</h4>
<ol type="A">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h2 style="font-size: 16px;font-family: 'Microsoft YaHei UI';">小写字母列表：</h2>
<ol type="a">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h2 style="font-size: 16px;font-family: 'Microsoft YaHei UI';">罗马字母列表：</h2>
<ol type="I">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h2 style="font-size: 16px;font-family: 'Microsoft YaHei UI';">小写罗马字母列表：</h2>
<ol type="i">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
</body>
</html>
任务三、无序列表的嵌套
创建页面3-3.html，实现无序列表的嵌套。达到如下显示效果
实验三-列表的使用195.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无序列表的嵌套</title>
</head>
<body>
<h2 style="font-size: 16px;font-family: 'Microsoft YaHei UI';">一个嵌套列表</h2>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶
<ul>
<li>中国茶</li>
<li>非洲茶</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
</body>
</html>
任务四：创建网页3-4.html，使用有序列表中相关标记格式将下面文本以下图方式显示
文本：
2.3.2有序列表
页面列表可分为：
无序列表
有序列表
定义列表
有序列表的序号类型有：
"1"（阿拉伯数字）
"A"（大写英文字母）
"a"（小写英文字母）
"I"（大写罗马字母）
"i"（小写罗马字母）
显示结果：
实验三-列表的使用357.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>有序列表</title>
</head>
<body>
<h2 style="font-size: 20px;font-family: 'Microsoft YaHei UI';">2.3.2 有序列表</h2>
<p>页面列表可分为：</p>
<ol type="1">
<li>无序列表</li>
<li>有序列表</li>
<li>定义列表</li>
</ol>
<p>有序列表的序号类型有：</p>
<ol type="i">
<li>"1"（阿拉伯数字）</li>
<li>"A"（大写英文字母）</li>
<li>"a"（小写英文字母）</li>
<li>"I"（大写罗马字母）</li>
<li>"i"（小写罗马字母）</li>
</ol>
</body>
</html>
任务五：创建网页3-5.html，应用列表的嵌套使用的相关知识将下面文本以下图方式显示
文本：
2.3.4列表的嵌套使用
当网页中需要复合层次的列表效果时，就可以通过对已有的列表标记进行适当的嵌套使用来实现。
比如，用嵌套列表来表示各种HTML列表：
无序列表
每个列表项前有特定的项目符号，项目符号有：
disc（实心圆点●）
circle（空心圆点○）
sqaure（方块■）
有序列表
每个列表项前有序号，序号类型有：
"1"（阿拉伯数字）
"A"（大写英文字母）
"a"（小写英文字母）
"I"（大写罗马字母）
"i"（小写罗马字母）
定义列表
包括各个项目及其注释
显示结果：
实验三-列表的使用655.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>应用列表的嵌套</title>
</head>
<body>
<h2 style="font-size: 20px;font-family: 'Microsoft YaHei UI';">2.3.4 列表的嵌套使用</h2>
<p>当网页中需要复合层次的列表效果时，就可以通过对已有的列表标记进行适当的嵌套使用来实现。</p>
<p>比如，用嵌套列表来表示各种HTML列表：</p>
<dl>
<dt>无序列表</dt>
<dd>每个列表项前有特定的项目符号，项目符号有：</dd>
<ul style="list-style-type:disc">
<li >disc（实心圆点●）</li>
</ul>
<ul style="list-style-type:circle">
<li >circle（空心圆点○）</li>
</ul>
<ul style="list-style-type:square">
<li >squre（方块■）</li>
</ul>
<dt>有序列表</dt>
<dd>每个列表项前有序号，序号类型有：
</dd>
<ol>
<li>"1"（阿拉伯数字）</li>
<li>"A"（大写英文字母）</li>
<li>"a"（小写英文字母）</li>
<li>"I"（大写罗马字母）</li>
<li>"i"（小写罗马字母）</li>
</ol>
<dt>定义列表</dt>
<dd>包括各个项目及其注释</dd>
</dl>
</body>
</html>
