CSS雪碧
CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非<img>标签。
一个简单的例子：
一张图片作出一个按钮的三个状态 <a class="button" href="#">链接</a>
加入右侧的图片为：200px×65px的三个按钮图拼合而成的图片button.png，从上到下一次为按钮的普通、鼠标滑过、鼠标点击的状态。则可以使用CSS进行定义。
a {
display:block; width:200px; height:65px; line-height:65px; /*定义状态*/
text-indent:-2015px; /*隐藏文字*/
background-image:url(button.png); /*定义背景图片*/
background-position:0 0; /*定义链接的普通状态，此时图像显示的是顶上的部分*/}
a:hover {background-position:0 -66px; /*定义链接的滑过状态，此时显示的为中间部分，向下取负值*/}
a:active {background-position:0 -132px; /*定义链接的普通状态，此时显示的是底部的部分，向下取负值*/}
初学的朋友可以试试效果。
而更多的CSS雪碧，图片更复杂，背景定位更精确。可能会用到大量的数值，如：background:url(nav.png) -180px 24pxno-repeat; 来达到更精确的定位。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<style>
.tree-default {
height: 32px;
padding-left: 32px;
}
.tree-file {
background: url("tree_icons_32px.png") -100px -68px no-repeat;
}
.tree-folder {
background: url("tree_icons_32px.png") -260px -4px no-repeat;
}
/*2 定义i标签样式，不用通过整个div background */
.tree-default2 i {
padding-left: 32px;
background: url("tree_icons_32px.png") -100px -68px no-repeat;
}
/*http://www.cnblogs.com/jimcsharp/p/6590138.html */
</style>
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
}
.sprite {
margin: 10px auto;
width: 206px;
border: 1px solid #b51600;
}
.sprite li {
cursor: pointer;
height: 42px;
width: 206px;
border-bottom: 1px solid #911001;
border-top: 1px solid #c11e08;
}
.sprite li a {
line-height: 42px;
font-size: 14px;
}
.sprite li s {
height: 32px;
width: 32px;
display: block;
margin-left: 10px;
margin-right: 8px;
float: left;
background-image: url("tree_icons_32px.png");
}
.sprite li:hover {
background-color: #fff;
border-color: #fff;
}
.sprite li:hover a {
color: #b51600;
}
.sprite li:hover s {
}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var iconH = $(".sprite").find("s").height(),
triggerLi = $(".sprite").children("li");
//console.log(iconH);
triggerLi.each(function () {
var $this = $(this),
$index = $this.index();
//console.log($index)
//console.log(iconH*$index);
$this.children("s").css("background-position", "0 -" + iconH * $index + "px")
$this.hover(function () {
// 鼠标移入
$this.children("s").css("background-position", "-32px -" + iconH * $index + "px")
}, function () {
// 鼠标移出
$this.children("s").css("background-position", "0 -" + iconH * $index + "px")
});
});
//当前页面属于某个功能时，点亮相应菜单项，这里通过地址参数判断，实际项目中应该从后台读取标志
var $cat = parseInt(getQueryString("cat"));
var poistions = "-32px -" + iconH * ($cat - 1) + "px";
triggerLi.eq($cat - 1).css({ "background-color": "#FFF" }).find("a").css("color", "red");
triggerLi.eq($cat - 1).find("s").css({ "background-position": poistions });
});
// 获取URL参数
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
</script>
<style type="text/css">
a.acc-trigger {
background: rgba(0, 0, 0, 0) url("accordion-arrow.png") no-repeat scroll 10px 23px;
border-top: 1px dashed #000;
color: #353535;
display: block;
margin: 0;
height: 55px;
padding-left: 25px;
}
a.acc-trigger.active {
background: #f6f7f9 url("accordion-arrow.png") no-repeat scroll 10px -23px;
color: #1a86ac;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<!-- BEGIN menu -->
<!-- /END menu -->
<!-- BEGIN middle part -->
<section id="content">
<!-- BEGIN services_container -->
<div class="services_container">
<div class="tree-default tree-file">file</div>
<div class="tree-default tree-folder">folder</div><br /><hr />
<!--<div class="tree-default2"><i></i>folder</div><br /><hr />-->
</div>
<div>
</div>
<div>
<ul class="sprite">
<li id="1">
<s style="background-position: 0 0;" class="s-icon"></s>
<a href="index.html?cat=1">123121</a>
</li>
<li id="2">
<s style="background-position: 0 -33px;" class="s-icon"></s>
<a href="index.html?cat=2">2322</a>
</li>
<li id="3">
<s style="background-position: 0 -67px;" class="s-icon"></s>
<a href="index.html?cat=3">45553</a>
</li>
<li>
<s class="s-icon"></s>
<a href="">55554</a>
</li>
<li>
<s class="s-icon"></s>
<a href="">66665</a>
</li>
</ul>
</div><hr />
<div class=".accordion">
<!-- accodrion first -->
<a class="acc-trigger" href="#" style="width: 229px;">Title Goes Here</a>
<!-- accodrion second -->
<a class="acc-trigger" href="#" style="width: 229px;">Title Goes Here</a>
<!-- accodrion third -->
<a class="acc-trigger active" href="#" style="width: 229px;">Title Goes Here</a>
</div>
<!-- /END services_container -->
</section>
<!--/END middle part -->
<!-- BEGIN footer -->
<!-- /END footer -->
</body>
</html>
浙公网安备 33010602011771号