css精灵

来源:互联网 发布:李连杰 黄飞鸿 知乎 编辑:程序博客网 时间:2024/04/28 10:19

原文链接:http://www.cnblogs.com/nyzhai/p/3232713.html

注:图片名称(tabicons.png)每个小图标width:18px;height:18px从左上角坐标为(-0px;-0px;);

例如第一个对号的坐标为(-0px;-0px;)第二个加号的图标为(-20px;-0px;)中间依次加20个像素

截取小图标样式

复制代码
.icon{    background: url(imges/tabicons.png) no-repeat;    width: 18px;    line-height: 18px;    display: inline-block;}.icon-set{ background-position: -380px -200px;}.icon-add{ background-position: -20px 0px;}
复制代码
 样式调用示例
<form id="form1" runat="server">    <div class="icon icon-sys">        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>    </form>
原创粉丝点击