HTML之列表
2018-11-05 08:23:17来源:博客园 阅读 ()
列表有三种类型:
有序列表:列表项使用数字来标记
无序列表:列表项使用粗体圆点(典型的小黑圆圈)进行标记。
自定义列表:自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
一、有序列表格式:
<ol> <li>第一个列表项</li> <li>第二个列表项</li> <li>第三个列表项</li> </ol>
运行结果:
- 第一个列表项
- 第二个列表项
- 第三个列表项
不同类型的有序列表:
1.编号列表:
<ol> <li>第一列表项</li> <li>第二列表项</li> <li>第三列表项</li> <li>第四列表项</li> </ol> <ol start="50"> <li>第五十列表项</li> <li>第五十一列表项</li> <li>第五十二列表项</li> <li>第五十三列表项</li> </ol>
运行结果:
- 第一列表项
- 第二列表项
- 第三列表项
- 第四列表项
- 第五十列表项
- 第五十一列表项
- 第五十二列表项
- 第五十三列表项
2.字母列表:
<ol type="A"> <li>第A列表项</li> <li>第B列表项</li> <li>第C列表项</li> <li>第D列表项</li> </ol> <ol type="a"> <li>第a列表项</li> <li>第b列表项</li> <li>第c列表项</li> <li>第d列表项</li> </ol>
运行结果:
- 第A列表项
- 第B列表项
- 第C列表项
- 第D列表项
- 第a列表项
- 第b列表项
- 第c列表项
- 第d列表项
3.罗马数字列表:
<ol type="I"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <ol type="i"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>
运行结果:
- Apples
- Bananas
- Lemons
- Oranges
- Apples
- Bananas
- Lemons
- Oranges
二、无序列表格式:
<ul> <li>无序列表项1</li> <li>无序列表项2</li> <li>无序列表项3</li> <li>无序列表项4</li> </ul>
运行结果:
- 无序列表项1
- 无序列表项2
- 无序列表项3
- 无序列表项4
不同类型的无序列表:
1.圆点列表:
<ul style="list-style-type:disc"> <li>无序列表项1</li> <li>无序列表项2</li> <li>无序列表项3</li> <li>无序列表项4</li> </ul>
运行结果:
- 无序列表项1
- 无序列表项2
- 无序列表项3
- 无序列表项4
2.圆圈列表:
<ul style="list-style-type:circle"> <li>无序列表项1</li> <li>无序列表项2</li> <li>无序列表项3</li> <li>无序列表项4</li> </ul>
运行结果:圆点变成圆圈
?无序列表项1
?无序列表项2
?无序列表项3
?无序列表项4
3.正方形列表:
<ul style="list-style-type:square"> <li>无序列表项1</li> <li>无序列表项2</li> <li>无序列表项3</li> <li>无序列表项4</li> </ul>
运行结果:圆点变成方形
?无序列表项1
?无序列表项2
?无序列表项3
?无序列表项4
三、自定义列表:
<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>
运行结果:
Coffee
- black hot drink
Milk
- white cold drink
四、嵌套列表:
<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea <ul> <li>China</li> <li>Africa</li> </ul> </li> </ul> </li> <li>Milk</li> </ul>
运行结果:
?Coffee
?Tea
?Black tea
?Green tea
?China
?Africa
?Milk
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:CSS 的介绍
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-14
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-13
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-02
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash