帮我看看ul和li的设置
益伦
益伦 2017-12-10 21:28:44
0
1
1213

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
ul{
           /*默认小圆点*/
list-style-type: disc;
/*空心小圆点*/
list-style-type: circle;
/*实心小方块*/
list-style-type:square;
/*数字序号,变成有序列表*/
list-style-type: decimal;
/*序号前面加0:  例:01、02、03*/
list-style-type: decimal-leading-zero;
/*用图片代替原点,必须尺寸很小,不好用,换直接对li标签控制*/
           /*list-style-image: url(1.jpg);*/
}
       /*自定义列表项*/
li{
           /*取消小圆点*/
list-style-type: none;
/*预留图片位置*/
padding-left: 2em;
/*上传图片*/
list-style-image: url(1.jpg);
/*图片列表项不重复*/
background-repeat: no-repeat;
/*图片大小*/
background-size: 1em 1em;
/*图片位置设置,和文本顶格对其,xy轴目测*/
background-position: 0  4px;
}
   </style>
</head>
<body>
<h3>前端开发工具</h3>
<ul>
   <li>HTML</li>
   <li>CSS</li>
   <li>javaScript</li>
   <li>jQuery</li>
   <li>Bootstrap</li>
</ul>
</body>
</html>


显示的结果列表项引用的图片还是显示很大,没有缩小成1em大小,这是为啥?

益伦
益伦

全部回复(1)
chobits4

建议使用下面两个方法解决:1.更改你源图片的大小。2.使用li:before进行设置

li{
   list-style: none;
}
li:before{
   content: '';
   display: inline-block;
   height: y;
   width: x;
   background-image: url();
}


热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板