10. HTML列表與CSS介紹
10-1 練習
- 無序列表
https://webugm.github.io/tncomu10601/3-1.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>無序列表3-1</title> </head> <body> <ul> <li>蘋果</li> <li>香蕉</li> <li>橘子</li> <li>水蜜桃</li> </ul> </body> </html>
- 有序列表
https://webugm.github.io/tncomu10601/3-2.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>有序列表3-2</title> </head> <body> <ol> <li>蘋果</li> <li>香蕉</li> <li>橘子</li> <li>水蜜桃</li> </ol> </body> </html>
- 嵌套列表
https://webugm.github.io/tncomu10601/3-3.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>嵌套列表3-3</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>
- 自定義列表
https://webugm.github.io/tncomu10601/3-4.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定義列表3-4</title> </head> <body> <dl> <dt>咖啡</dt> <dd>黑色的飲料</dd> <dt>牛奶</dt> <dd>白色的飲料</dd> </dl> </body> </html>
-
有序列表的屬性
https://webugm.github.io/tncomu10601/3-5.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>有序列表的屬性3-5</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>
-
無序列表的屬性
https://webugm.github.io/tncomu10601/3-6.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>