您的位置：首页 > 其它

li前面的图标设置

2015-07-22 00:14 274 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>li前面小图标</title>
<meta name="viewport" id="viewport" content="width=device-width,height=device-height,user-scalable=no" />
<style>
*{
margin:0;
padding:0;
}
ul{
margin:20px auto;
width:320px;
height:50px;
}
ul li{
list-style: none;
/*
第一个参数是背景图片的url；
第二个参数是图片的重复方式；
第三个是左右距离；
第四距离是上下距离。
*/
background:url("dot.png") no-repeat 2px 5px ;
/*
背景图片的大小：第一个是宽度，第二个是高度
*/
background-size:6px 6px;
padding-left: 16px;
line-height: 25px;
font-size:14px;
}

</style>
</head>
<body>
<ul>
<li>我就是来测试的</li>
<li>我是来跑龙套的</li>
</ul>
</body>
</html>

dot.png图片（12*12）：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： li 图标位置大小

相关文章推荐

新的分享

章节导航