Html 列表 li ul使用

简介: html中偶尔会使用到列表,记录一下。 1 DOCTYPE html> 2 3 4 5 6 .level_1{list-style-type:decimal;} 7 .

html中偶尔会使用到列表,记录一下。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8" />
 5         <style type="text/css">
 6             .level_1{list-style-type:decimal;}
 7             .level_2{list-style-type:upper-alpha;}
 8         </style>
 9     </head>
10 
11     <body>
12         <span>列表使用test:</span>
13         <ul class = "level_1">
14             <li>
15                 亚洲
16                 <ul class = "level_2">
17                     <li>中国</li>
18                     <li>日本</li>
19                 </ul>
20             </li>
21             <li>
22                 欧洲
23                 <ul class = "level_2">
24                     <li>德国</li>
25                     <li>意大利</li>
26                 </ul>
27             </li>
28         </ul>
29     </body>
30 </html>

1. 序号可以是数字、字母、罗马数字等,可以通过list-style-type 属性设置。

默认值: disc 点| circle圆圈 | square正方形 | decimal数字 | decimal-leading-zero 十进制数
| lower-roman 小写罗马文字| upper-roman 大写罗马文字|  armenian亚美尼亚数字 | georgian乔治亚数字 
| lower-alpha小写拉丁文 | upper-alpha大写拉丁文 | none无 
| inherit继承 
初始值: disc

 2. 序号也可以显示图片,可以通过list-style-image 属性设置

 list-style-image:none/url("1.png")

 

相关文章
|
28天前
HTML 速查列表4
本示例包含两个部分:表格和框架。表格部分展示了带有两个列标题和一行数据的简单表格;框架部分通过 `&lt;iframe&gt;` 标签嵌入了一个外部页面 `demo_iframe.htm`。
|
28天前
|
数据安全/隐私保护
HTML 速查列表5
表单示例包括文本输入、密码框、复选框、单选按钮、提交和重置按钮、隐藏输入、下拉菜单及多行文本区。实体表示特殊字符,如 &lt; (&lt;)、&gt; (&gt;) 和 &#169; (©)。
HTML 列表3
HTML 自定义列表 (&lt;dl&gt;) 用于描述术语或名称的定义。每个术语由 &lt;dt&gt; 标签表示,其定义或描述由 &lt;dd&gt; 标签表示。
|
28天前
HTML 速查列表3
文档排版元素简介:包括图片、替换文本、样式/区块、块级和内联元素、无序列表、有序列表及定义列表等,帮助清晰组织和展示内容。
|
28天前
HTML 速查列表3
本示例展示了HTML中常用的元素:图片、样式与区块、块级与内联元素、以及三种列表(无序、有序和定义列表)的使用方法。通过这些基本标签,可以构建网页的基本结构。
|
28天前
HTML 速查列表2
文本格式化包括多种标签
|
28天前
HTML 速查列表1
HTML速查列表包含基本文档结构、标题、文本、换行和水平线等常用标签,方便日常打印使用。例如:`&lt;html&gt;`, `&lt;head&gt;`, `&lt;title&gt;`, `&lt;body&gt;`, `&lt;h1&gt;`至`&lt;h6&gt;`,`&lt;p&gt;`,`&lt;br&gt;`和`&lt;hr&gt;`。
|
3月前
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
41 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
HTML 列表4
HTML 列表标签用于创建不同类型的列表。`&lt;ol&gt;` 和 `&lt;ul&gt;` 分别定义有序和无序列表,`&lt;li&gt;` 定义列表项。`&lt;dl&gt;` 用于定义描述列表,其中 `&lt;dt&gt;` 定义术语,`&lt;dd&gt;` 定义术语的描述。
HTML 列表2
HTML 有序列表使用数字标记列表项,以 `&lt;ol&gt;` 开始,每个项目用 `&lt;li&gt;` 标签表示。