你的位置:首页 > 网页设计

[网页设计]CSS Sprite 雪碧图制作


CSS Sprite 雪碧图,简单来说就是:

为了提高网页的性能,减少加载次数,将一些不会经常随网站内容变化的小图标,集中放在一张大图上,将该图应作为background-image 嵌入页面中,在需要相关图标时,根据background-position设置坐标值,达到目的。

 

一个例子,可以复制然后看一下效果:

 HTML代码:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>sprite</title>  <link rel="stylesheet" href="css-sprite.css"></head><body><div class="container">  <ul class="menu">    <li class="cat-1">      <i></i>      <h3><a href="#">项目一</a></h3>    </li>    <li class="cat-2">      <i > </i>      <h3><a href="#">项目二</a></h3>    </li>    <li class="cat-3">      <i></i>      <h3><a href="#">项目三</a></h3>    </li>    <li class="cat-4">    <i></i>    <h3><a href="#">项目四</a></h3>  </li>    <li class="cat-5">    <i></i>    <h3><a href="#">项目五</a></h3>  </li>    <li class="cat-6">    <i></i>    <h3><a href="#">项目六</a></h3>  </li>    <li class="cat-7">    <i></i>    <h3><a href="#">项目七</a></h3>  </li>    <li class="cat-8">    <i></i>    <h3><a href="#">项目八</a></h3>  </li>    <li class="cat-9">    <i></i>    <h3><a href="#">项目九</a></h3>  </li>    <li class="cat-10" >    <i></i>    <h3><a href="#">项目十</a></h3>  </li>  </ul></div></body></html>

 

 CSS代码:

/*通用设置*/.container, .menu {  margin:0;  padding:0;  line-height: 0;}a:link, a:visited {  text-decoration: none;  color: inherit;}a:hover {  color: orangered;}/*格式设置*/.menu {  width: 120px;  list-style-type: none;  border: 1px solid #ccc;}.menu li {  display: block;  height: 31px;  line-height: 31px;}li h3 {  font-size: 14px;  font-weight: 400;  border-bottom: 1px solid #eee;}li i {  background: url("img/sprite.png");  display: inline-block;  float: left;  width: 24px;  height: 24px;  margin: 0 15px 5px;}.cat-1 i{  background-position: 0 0;}.cat-2 i {  background-position: 0 -26px;}.cat-3 i{  background-position: 0 -52px;}.cat-4 i {  background-position: 0 -78px;}.cat-5 i{  background-position: 0 -104px;}.cat-6 i {  background-position: 0 -130px;}.cat-7 i{  background-position: 0 -156px;}.cat-8 i {  background-position: 0 -182px;}.cat-9 i{  background-position: 0 -208px;}.cat-10 i {  background-position: 0 -236px;}

 这是利用一个雪碧图在线制作工具制作的图,工具链接:http://lazytools.sinaapp.com/。 其他工具不清楚,但是该工具最后会生成图标对应的位置CSS信息,可直接使用,很方便。

  

以下是最终效果图:

总结:对于新手而言,学习一个新知识点,应该多练习,自己写代码,光看光听是不起作用的,看视频的时候觉得都会,实际操作时会出各种问题,多练习也是不断进步的最佳途径。

不知道你是否懂得如何制作和运用雪碧图,反正现在我是会了,呵呵。