• html li标签前面添加图标三种方法


    今天无聊写下这个例子,希望对初学者有帮助,代码如下

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<link rel="stylesheet" href="Font-Awesome-3.2.1/css/font-awesome.min.css">
    		<!--如果是IE7将自动加载这一句-->
    		<!--[if IE 7]>
    		<link rel="stylesheet" href="Font-Awesome-3.2.1/css/font-awesome-ie7.min.css">
    		<![endif]-->
    		<style type="text/css">
    		body, div, ul, li {
    			padding: 0px;
    			margin: 0px;
    			font-size: 15px;
    		}
    			.first {
    				list-style: none;
    				list-style-image: url("star.gif");
    				padding-left: 20px;
    			}
    			.second li{
    				list-style: none;
    				background: url("star.gif") no-repeat;
    				padding-left: 20px;
    			}
    			.third {
    				list-style: none;
    			}
    		</style>
    	</head>
    	<body>
    		<h2>第一种:list-style-image(图片)</h2>
    		<ul class="first">
    			<li>阿斯大法</li>
    			<li>阿斯大法</li>
    			<li>阿斯大法</li>
    		</ul>
    		<h2>第二种:backgroud(图片)</h2>
    		<ul class="second">
    			<li>阿斯大法</li>
    			<li>阿斯大法</li>
    			<li>阿斯大法</li>
    		</ul>
    		<h2>第三种:Font-Awesome-3.2.1(字体库)</h2>
    		<ul class="third">
    			<li><i class="icon-star"></i>阿斯大法</li>
    			<li><i class="icon-star"></i>阿斯大法</li>
    			<li><i class="icon-star"></i>阿斯大法</li>
    		</ul>
    	</body>
    </html>
    

    本人写的deme下载地址:http://download.csdn.net/detail/u010095549/9320861

    效果如图:

    欢迎加入,Java,前端的共同学习【爱问共享编程部落】 479668591

  • 相关阅读:
    java 字符串大小比较
    安卓应用如何赚钱
    报错找不到jquery-1.10.2.min.map解决办法
    android 中 webview 怎么用 localStorage?
    HTML5 本地存储
    js获取url参数值
    java调用webservice
    点圆的关系---1
    数学建模入门书籍介绍
    北京秋日风景-最大的银杏林海景色
  • 原文地址:https://www.cnblogs.com/guxingzhe/p/5014233.html
Copyright © 2020-2023  润新知