<li value="y"></li>
<li></li>
...
</ol>
start和value两个属性可选，填入阿拉伯数字。
start属性表示列表从哪个数字起编号。
value属性表示该项序号是多少（也就是说列表的数字不一定是连续的）。
更改数字类型（比如罗马数字），请使用CSS的list-style-type属性。
<!doctype html><html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="页面,列表,序号,层级,属性">
<meta name="description" content="<ol start="x"><li value="y"></li><li></li&">
<title>Document</title>
<style type="text/css">
ol{list-style:upper-alpha }
ul{font-size:30px list-style-type:square list-style-image:url(此处填写你的图片路径)}
</style>
</head>
<body>
<ol>
<li>有序列表项1</li>
<li><span class="">有序列表项2</span>
<ul>
<li>嵌套图像列表1</li>
<li>嵌套图像列表2</li>
<li>嵌套图像列表3</li>
</ul>
</li>
<li>有序列表项3</li>
</ol>
</body>
</html>
关键在于list-style-image这个属性，设置前面那个小图标的路径就行了。不过这样子设置文字前面的图标，图标并不会居中显示，一般用background-image比较多。
图片按顺序编号，便于甲方阅读者查看
通过编号名称可判断设计图的项目名称、页面层级，便于设计师查找
需交付导出设计图的项目类文件
共三级：项目名称缩写+一级页面排序+剩余层级页面排序
以 江西省图书馆门户 为例
如果公司大部分项目用图片形式交付则有必要加，方便团队查找。如果只有个别项目以图片形式交付那这一步可省略
例：
江西省图书馆 可简称 JXT
使用序号：00、01、02、03、...
例：
JXT_00首屏
JXT_01活动安排
JXT_02数字资源
...
以此类推
一级分项使用序号：1.0、2.0、3.0、...
二级页面使用序号：1.1.0、1.2.0、1.3.0、...
三级页面使用序号：1.1.1、1.1.2、1.1.3、...
例：
备注：剩余层级页面排序当有下一级页面时，上一级后面需加.0占位，比如：二级页面是1.1，当有三级页面时，则需要命名为1.1.0。否则，1.1.1会排在1.1前面。这跟系统默认排序规则有关，先序号再文字。
这样，交付的设计图不仅按页面层级顺序排列，还可以从命名编号就可以看出是哪个模块的第几级页面。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）