鱼C论坛

 找回密码
 立即注册
查看: 2112|回复: 2

[学习笔记] 列表

[复制链接]
发表于 2020-1-21 21:00:19 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
HTML 列表


列表分有序列表、无序列表和定义列表。

有序列表

例子:

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>列表演示</title>
  5.     </head>
  6.     <body>
  7.         <ol>
  8.             <li>HTML5</li>
  9.             <li>CSS3</li>
  10.             <li>JavaScript</li>
  11.         </ol>
  12.     </body>
  13. </html>
复制代码


显示效果:

1.png

可以为有序列表设置 reversed、start、type 属性改变显示样式:

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>列表演示</title>
  5.     </head>
  6.     <body>
  7.         <!-- 设置起始值为 0 -->
  8.         <ol start="0">
  9.             <li>HTML5</li>
  10.             <li>CSS3</li>
  11.             <li>JavaScript</li>
  12.         </ol>
  13.     </body>
  14. </html>
复制代码


1.png

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>列表演示</title>
  5.     </head>
  6.     <body>
  7.         <!-- 罗马数字 -->
  8.         <ol type="I">
  9.             <li>HTML5</li>
  10.             <li>CSS3</li>
  11.             <li>JavaScript</li>
  12.         </ol>
  13.     </body>
  14. </html>
复制代码


1.png

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>列表演示</title>
  5.     </head>
  6.     <body>
  7.         <!-- 反转列表 -->
  8.         <ol reversed>
  9.             <li>HTML5</li>
  10.             <li>CSS3</li>
  11.             <li>JavaScript</li>
  12.         </ol>
  13.     </body>
  14. </html>
复制代码


1.png

无序列表

例子:

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>列表演示</title>
  5.     </head>
  6.     <body>
  7.         <ul>
  8.             <li>HTML5</li>
  9.             <li>CSS3</li>
  10.             <li>JavaScript</li>
  11.         </ul>
  12.     </body>
  13. </html>
复制代码


显示效果:

1.png

可以对无序列表设置 CSS 属性改变显示样式:

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>列表演示</title>
  5.     </head>
  6.     <body>
  7.         <ul style="list-style-type: circle;">
  8.             <li>HTML5</li>
  9.             <li>CSS3</li>
  10.             <li>JavaScript</li>
  11.         </ul>
  12.         <ul style="list-style-type: disc;">
  13.             <li>HTML5</li>
  14.             <li>CSS3</li>
  15.             <li>JavaScript</li>
  16.         </ul>
  17.         <ul style="list-style-type: square;">
  18.             <li>HTML5</li>
  19.             <li>CSS3</li>
  20.             <li>JavaScript</li>
  21.         </ul>
  22.         <!-- none 表示不显示 -->
  23.         <ul style="list-style-type: none;">
  24.             <li>HTML5</li>
  25.             <li>CSS3</li>
  26.             <li>JavaScript</li>
  27.         </ul>
  28.     </body>
  29. </html>
复制代码


显示效果:

1.png

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-1-22 17:39:16 | 显示全部楼层
你最近学HTML啦?!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2020-1-22 17:39:55 | 显示全部楼层
一个账号 发表于 2020-1-22 17:39
你最近学HTML啦?!

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 05:33

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表