（1.）首先我要声明我说的抠图不是真的去把图片抠出来。经常看大型网站代码的朋友们都知道一般情况下小图片都不是单独的一张图片，而是好多小图片在一张图片上。用的时候通过background-position把需要用的图片显示出来。
举个栗子，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
border: 1px solid red;
height:20px ;/*大小为要显示图片的大小*/
width: 24px;
background-image:url(img/toolbars.png) ;
background-position:-148px -98px ; /*格式为width height*/ /*用ps测量出新原点在原坐标系下坐标后w和h取负数*/
}
</style>
</head>
<body>
<div >
</div>
</body>
</html>
之前我说过ol,ul可以互相转化，这里就给个例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
ol li{
border: 1px dashed red;
}
ol{
list-style-type:none;/**/
list-style-position: outside;/*设置项目标号的位置*/
list-style-image:url(img/QQ图片20180726162718.gif) ;/*这个可以整出其他形状的标号*/
}/*list-style可以设置列表项目标号，让有序跟无序没什么差别，也可以整出其他新奇的标号*/
/*缩写为list-style：type position image */
</style>
</head>
<body>
<ol>
<li>语文</li>
<li>英语</li>
<li>数学</li>
</ol>
</body>
</html>
通过list-style-type就可以把ul,ol互相转化了。
再结合抠图，到时候想要什么项目标号就可以自己定义了
效果
