CSS Spirte就是所谓的把很多的小图标合并成一张大的图片，然后使用CSS的background-position属性，来动态的定位自己需要图标的位置。这样做的目的主要是减少HTTP请求，加快网页的加载速度。

图片

需要的结果：

多余的话就不多说了具体的实现都已经写在了代码中，并且对于重点都进行了注释。如果有问题可以留言哈！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>css_spirte</title>

    <style type="text/css">

    div ul{ margin:0;padding:0;}

    #body_father ul {

    	list-style:none;

    }

	#body_father{

		width:150px;

		background-color:#f8f8f8;

		border: 1px solid #bbb;

	}

	#body_father li{

		/*display:block;li本身就为块级元素*/

		height:31px;

		line-height:31px;

		overflow:hidden;

		border-bottom:1px solid #dedede;

	}

	li i {

		background:url(img/css_spirte.png);

		width:30px;

		height:24px;

		/*display:inline;i标签自身就为行内元素*/

		float:left; 		/*因为h4是块级元素默认会换行，i标签浮动脱离文档流，h4标签占用i标签位置*/

		margin:3px 10px 0 0;

	}

	li h4 {

		font-size:14px;

		font-weight: 400px;

	}

	/*h4为块级元素默认的重置margin,padding*/

	h4{

		margin:0;padding:0;

	}

	/*为每一个i标签设置图片位置的偏移量*/

	.item_li1 i{background-position:0 0;}

	.item_li2 i{background-position:0 -24px;}

	.item_li3 i{background-position:0 -48px;}

	.item_li4 i{background-position:0 -72px;}

	.item_li5 i{background-position:0 -96px;}

	.item_li6 i{background-position:0 -120px;}

	.item_li7 i{background-position:0 -144px;}

	.item_li8 i{background-position:0 -168px;}

.test{

	background-color:#CEE506;

}

    </style>

</head>

<body>

    <div id='body_father'>

        <ul>

            <li class="item_li1"><i>ceshi</i>

                <h4>你是好的1</h4></li>

            <li class="item_li2"><i></i>

                <h4>你是好的2</h4></li>

            <li class="item_li3"><i></i>

                <h4>你是好的3</h4></li>

            <li class="item_li4"><i></i>

                <h4>你是好的4</h4></li>

            <li class="item_li5"><i></i>

                <h4>你是好的5</h4></li>

            <li class="item_li6"><i></i>

                <h4>你是好的6</h4></li>

            <li class="item_li7"><i></i>

                <h4>你是好的7</h4></li>

            <li class="item_li8"><i></i>

                <h4>你是好的8</h4></li>

        </ul>

    </div>

    <div>

    	<i class="test">测试</i><h4>测试h4git</h4>

    </div>

</body>

</html>

版权声明：本文为博主原创文章，未经博主允许不得转载。

CSS_Spirte实现原理 分类： HTML+CSS 2015-04-28 22:58 531人阅读 评论(0) 收藏的更多相关文章

  1. 1.PHP站内搜索 分类： PHP开发实例 2015-07-31 22:48 4人阅读 评论(0) 收藏

    PHP站内搜索:多关键字.加亮显示 1.SQL语句中的模糊查找 $sql = "SELECT * FROM `message` WHERE `content`like '%$k[0]%' a ...

  2. XHTML 结构化：使用 XHTML 重构网站 分类： C1_HTML/JS/JQUERY 2014-07-31 15:58 249人阅读 评论(0) 收藏

    http://www.w3school.com.cn/xhtml/xhtml_structural_01.asp 我们曾经为本节撰写的标题是:"XHTML : 简单的规则,容易的方针.&qu ...

  3. 修改android应用包名 分类： android 学习笔记 2015-07-16 22:48 4人阅读 评论(0) 收藏

    由于项目需要,要修改已经开发好的应用包名,这本身很简单,但是如果你没找到门道,可能会白白浪费许多时间. 修改包名有三个地方要改,这三个地方的修改一定要按顺序来,否则你可能会遇到许多不必要的麻烦. 1. ...

  4. UI基础:视图控制器.屏幕旋转.MVC 分类： iOS学习-UI 2015-07-02 22:21 62人阅读 评论(0) 收藏

    UIViewController 视图控制器,继承自UIResponder,作用:管理视图并且响应事件 功能: 1.分担APPdelegate的工作 2.实现模块独立,能提高复用性 创建UIViewC ...

  5. UI基础:UI程序执行顺序(UIApplicationMain()函数),自定义视图 分类： iOS学习-UI 2015-07-02 22:09 68人阅读 评论(0) 收藏

    UI程序的一般执行顺序: 先进入main里面,执行函数UIApplicationMain(),通过该函数创建应用程序对象和指定其代理并实现监听,当执行函数UIApplicationMain()时还会做 ...

  6. OC基础:数组.字典.集 分类： ios学习 OC 2015-06-18 18:58 47人阅读 评论(0) 收藏

    ==============NSArray(不可变数组)=========== NSArray,继承自NSObject  用来管理(储存)一些有序的对象,不可变数组. 创建一个空数组 NSArray ...

  7. Mahout快速入门教程 分类： B10_计算机基础 2015-03-07 16:20 508人阅读 评论(0) 收藏

    Mahout 是一个很强大的数据挖掘工具,是一个分布式机器学习算法的集合,包括:被称为Taste的分布式协同过滤的实现.分类.聚类等.Mahout最大的优点就是基于hadoop实现,把很多以前运行于单 ...

  8. 【从0到1学Web前端】CSS伪类和伪元素 分类： HTML+CSS 2015-06-02 22:29 1065人阅读 评论(0) 收藏

    1.CSS中的伪类 CSS 伪类用于向某些选择器添加特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...

  9. MS SQLServer 批量附加数据库 分类： SQL Server 数据库 2015-07-13 11:12 30人阅读 评论(0) 收藏

    ************************************************************ * 标题:MS SQLServer 批量附加数据库 * 说明:请根据下面的注释 ...

随机推荐

  1. TCP协议理解

    一.前言: TCP协议和UDP协议是网络编程里最重要的协议,很多新出的技术.新出的协议本质上都是基于这两个协议的,其中又以TCP协议居多:比如HTTP协议就是基于TCP协议的,应用程序和数据库交互也是 ...

  2. 下拉菜单  - - css

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. javaScript嵌入式环境Duktape的安装

    Duktape 是一个轻量级的嵌入式 JavaScript 引擎,使用duktape可以通过javascript对ESP32进行编程. 首先在下载duktape文件包 mkdir duktape cd ...

  4. 重复 桂林电子科技大学第三届ACM程序设计竞赛

    题目链接:https://ac.nowcoder.com/acm/contest/558/B import java.util.HashSet; import java.util.Scanner; p ...

  5. SpringMVC 示例实战教程

    一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先,导入SpringMVC需要的jar包. 2.添加Web.xml配置文件中关于SpringMVC的配置 1 2 3 4 5 6 ...

  6. [jquery-delegate] iphone_4s _iphone _5c_中不兼容jQuery delegate 事件(does not wok)

    1. jQuery .on() and .delegate() doesn't work on iPad http://stackoverflow.com/questions/10165141/jqu ...

  7. echarts呈现数据表图形

    讲一下echarts的用法,列举了两个图表,一个是单柱图,一个是多柱图,至于饼状图,只许更改echarts的类型就好了 一.首先是要两个div,用来存放两个图表 <div class=" ...

  8. 【Cocos2d-Js实战教学（1）横版摇杆八方向移动】

    本教程主要通过搭建一个横版摇杆八方向移动的实例,让大家如何用Cocos2dx-Js来做一款游戏,从基础了解Cocos2dx-Js的基本实现原理,从创建工程,到各个知识点的梳理. 教程分为上下两讲: 上 ...

  9. JIT与JVM的三种执行模式：解释模式、编译模式、混合模式

    Java JIT(just in time)即时编译器是sun公司采用了hotspot虚拟机取代其开发的classic vm之后引入的一项技术,目的在于提高java程序的性能,改变人们“java比C/ ...

  10. day 108 项目luffy &contenttype

     反向查询  反向查询 路飞学城项目  一.建模型 models from django.db import models from django.contrib.contenttypes.field ...