码迷,mamicode.com
首页 > 其他好文 > 详细

li前面的图标设置

时间:2015-07-22 01:40:52      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:

<!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前面的图标设置

标签:

原文地址:http://my.oschina.net/zyxchuxin/blog/481624

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!