IT源码网

Html 列表 li ul使用讲解

itxm 2020年10月18日 Web前端 254 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")

 

发布评论

分享到:

IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

Html form 表单提交前验证讲解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。