網頁設計好好玩(10501)
- 無序列表 7-1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>無序列表</title>
</head>
<body>
<ul>
<li>蘋果</li>
<li>香蕉</li>
<li>橘子</li>
<li>水蜜桃</li>
</ul>
</body>
</html>
- 有序列表 7-2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>有序列表</title>
</head>
<body>
<ol>
<li>蘋果</li>
<li>香蕉</li>
<li>橘子</li>
<li>水蜜桃</li>
</ol>
</body>
</html>
- 嵌套列表 7-3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嵌套列表</title>
</head>
<body>
<ul>
<li>高中</li>
<ul>
<li>台南一中</li>
<li>台南女中</li>
<li>台南二中</li>
</ul>
<li>國中</li>
<ul>
<li>新興國中</li>
<li>建興國中</li>
<li>中山國中</li>
</ul>
<li>國小</li>
<ul>
<li>新興國小</li>
<li>日新國小</li>
<li>安平國小</li>
</ul>
</ul>
</body>
</html>
- 自定義列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定義列表</title>
</head>
<body>
<dl>
<dt>咖啡</dt>
<dd>黑色的飲料</dd>
<dt>牛奶</dt>
<dd>白色的飲料</dd>
</dl>
</body>
</html>
-
有序列表的屬性 http://hhjh.webugm.com/7-2.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>有序列表</title> </head> <body> <ol type="A"> <li>蘋果</li> <li>香蕉</li> <li>橘子</li> <li>水蜜桃</li> </ol> <ol type="a"> <li>蘋果</li> <li>香蕉</li> <li>橘子</li> <li>水蜜桃</li> </ol> <ol type="I"> <li>蘋果</li> <li>香蕉</li> <li>橘子</li> <li>水蜜桃</li> </ol> <ol type="i"> <li>蘋果</li> <li>香蕉</li> <li>橘子</li> <li>水蜜桃</li> </ol> <ol start="6"> <li>蘋果</li> <li>香蕉</li> <li>橘子</li> <li>水蜜桃</li> </ol> </body> </html> -
無序屬性 http://hhjh.webugm.com/7-1.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>無序列表</title> </head> <body> <ul type="disc"> <li>蘋果</li> <li>香蕉</li> <li>橘子</li> <li>水蜜桃</li> </ul> <ul type="circle"> <li>蘋果</li> <li>香蕉</li> <li>橘子</li> <li>水蜜桃</li> </ul> <ul type="square"> <li>蘋果</li> <li>香蕉</li> <li>橘子</li> <li>水蜜桃</li> </ul> </body> </html>