Html 列表 li ul使用分析

虾米哥 阅读:143 2020-10-18 22:04:22 评论:0

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")

 

声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
排行榜
关注我们

扫一扫关注我们,了解最新精彩内容