CSS_Spirte实现原理 分类： HTML+CSS 2015-04-28 22:58 531人阅读 评论(0) 收藏
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.PHP站内搜索 分类： PHP开发实例 2015-07-31 22:48 4人阅读 评论(0) 收藏
PHP站内搜索:多关键字.加亮显示 1.SQL语句中的模糊查找 $sql = "SELECT * FROM `message` WHERE `content`like '%$k[0]%' a ...
- 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 ...
- 修改android应用包名 分类： android 学习笔记 2015-07-16 22:48 4人阅读 评论(0) 收藏
由于项目需要,要修改已经开发好的应用包名,这本身很简单,但是如果你没找到门道,可能会白白浪费许多时间. 修改包名有三个地方要改,这三个地方的修改一定要按顺序来,否则你可能会遇到许多不必要的麻烦. 1. ...
- UI基础:视图控制器.屏幕旋转.MVC 分类： iOS学习-UI 2015-07-02 22:21 62人阅读 评论(0) 收藏
UIViewController 视图控制器,继承自UIResponder,作用:管理视图并且响应事件 功能: 1.分担APPdelegate的工作 2.实现模块独立,能提高复用性 创建UIViewC ...
- UI基础:UI程序执行顺序(UIApplicationMain()函数),自定义视图 分类： iOS学习-UI 2015-07-02 22:09 68人阅读 评论(0) 收藏
UI程序的一般执行顺序: 先进入main里面,执行函数UIApplicationMain(),通过该函数创建应用程序对象和指定其代理并实现监听,当执行函数UIApplicationMain()时还会做 ...
- OC基础:数组.字典.集 分类： ios学习 OC 2015-06-18 18:58 47人阅读 评论(0) 收藏
==============NSArray(不可变数组)=========== NSArray,继承自NSObject 用来管理(储存)一些有序的对象,不可变数组. 创建一个空数组 NSArray ...
- Mahout快速入门教程 分类： B10_计算机基础 2015-03-07 16:20 508人阅读 评论(0) 收藏
Mahout 是一个很强大的数据挖掘工具,是一个分布式机器学习算法的集合,包括:被称为Taste的分布式协同过滤的实现.分类.聚类等.Mahout最大的优点就是基于hadoop实现,把很多以前运行于单 ...
- 【从0到1学Web前端】CSS伪类和伪元素 分类： HTML+CSS 2015-06-02 22:29 1065人阅读 评论(0) 收藏
1.CSS中的伪类 CSS 伪类用于向某些选择器添加特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...
- MS SQLServer 批量附加数据库 分类： SQL Server 数据库 2015-07-13 11:12 30人阅读 评论(0) 收藏
************************************************************ * 标题:MS SQLServer 批量附加数据库 * 说明:请根据下面的注释 ...
随机推荐
- POJ 2728 Desert King (最优比率树)
题意:有n个村庄,村庄在不同坐标和海拔,现在要对所有村庄供水,只要两个村庄之间有一条路即可,建造水管距离为坐标之间的欧几里德距离,费用为海拔之差,现在要求方案使得费用与距离的比值最小,很显然,这个题目 ...
- HDU 1009 FatMouse' Trade （贪心算法）
题意:就是老鼠要用猫粮换粮食,第i个房间一些东西,要用东西去换,可以不全换.问给定的猫粮最多能换多少粮食. 析:贪心算法.我们先算出来每个房间物品的平均价格是多少,肯定越低越好,并且如果能全换就全换, ...
- Ubuntu 14.04 LTC 有线网络--网线不识别,灯不亮问题
sudo ethtool -s eth0 autoneg off speed 100 duplex full
- 20155319 2016-2017-2 《Java程序设计》第九周学习总结
20155319 2016-2017-2 <Java程序设计>第九周学习总结 教材学习内容总结 整合数据库 ==16.1.1 JDBC简介== JDBC全名Java DataBase Co ...
- win7系统窗口背景颜色设置为护眼色的方法---打开的任意窗口显示为护眼色，程序眼必备
win7系统窗口背景颜色设置为护眼色的方法 1. 打开"窗口颜色与外观"对话框 方法1:从控制面板开始 控制面板\外观和个性化\个性化\窗口颜色和外观 方法2:桌面上鼠标右键,个性 ...
- Ubuntu14.04下Pycharm3.4 字体渲染
在ubuntu下搭建了django的开发环境,搭建过程十分简单,Pycharm的安装更简单,下载tar包解压并执行bin目录下的脚本即可,但是看着那个字体真心不爽.于是开始搜索调教. 1.安装打了渲染 ...
- Checkpoint--实现步骤
Checkpoint 实现步骤: 1.将CheckPoint标记写入日志(标记中包含当前数据库中活动的事务信息),并将Log Block写入持久化存储 2.将Buffer Pool中所有的脏页写入磁盘 ...
- C# RS232串口使用
using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...
- Cesium简介 [转]
http://www.cnblogs.com/laixiangran/p/4984522.html 一.Cesium介绍 Cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎. ...
- CentOS 7 - 最小化安装以及引发的问题！
一,操作系统和虚拟机 操作系统:CentOS 7 官方网站:https://www.centos.org 下载地址:https://www.centos.org/download/ 下载版本分三个:D ...