實驗三列表的使用
任務一、新聞列表的實現
創建頁面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>
