前端知识（2）

来源：互联网发布：微信淘客助手群发软件编辑：程序博客网时间：2024/05/16 04:55

雪碧图的制作

网页的制作无非就是图片的还原过程，通过html标签进行结构化的布局，然后通过css进行装饰。

当拿到一张图，首先进行切图，保存为png-24的格式，PNG-24可减少毛边，支持透明、半透明。（当然，保存的格式视需要而定）

假如你收到设计师的图片（如下），那么你是否要将整张图片切割成8部分、然后进行还原呢？当然切割成8部分并无错误，但是可能会浪费空间，同时用户的体验效果也会大大降低。于是想到，可以将若干个图整合到一张图上，通过锁定图片的位置，显示想要的效果。雪碧图产生了！

CSS Sprites技术被国内一些人称为CSS雪碧图，其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。

CSS知识点：

特点：
相对于当个小图标，它节省文件体积和服务请求次数。将所有零碎的网页背景图片整合到一起，这样做可以有效的减少http对图片的请求次数，而不需要加载多次加载零碎的背景图片，所以合理的利用好它可以有效的提高网页的加载速度。
一般情况下，你需要保存为PNG-24的文件格式。
可以设计出丰富多彩的颜色体表。
难点：
你需预先确定每个小图标的大小
注意小图标与小图标之间的距离
细心、耐心
精确计算

通过简单的计算，得到想要的效果。第一张图是需要往下方移动的，其他的需要向上移动。向上移动时，像素的值为负数。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>雪碧图3</title><link rel="stylesheet" type="text/css" href="css/index.css"></head><body><div id="box"><div id="d1"><div id="style"><strong>服装内衣</strong></div></div><div id="d2"><div id="style"><strong>鞋包配饰</strong></div></div><div id="d3"><div id="style"><strong>运行户外</strong></div></div><div id="d4"><div id="style"><strong>珠宝手表</strong></div></div><div id="d5"><div id="style"><strong>手机数码</strong></div></div><div id="d6"><div id="style"><strong>护肤彩妆</strong></div></div><div id="d7"><div id="style"><strong>办公电脑</strong></div></div><div id="d8"><div id="style"><strong>母婴用品</strong></div></div></div></body></html>

#box{width:150px;border:1px solid #cccccc;}#d1{height:32px;background: url(../images/bg.png) no-repeat 11px 6px;border-bottom: 1px solid #cccccc;line-height:32px;}#d2{height:32px;background: url(../images/bg.png) no-repeat 10px -20px;border-bottom: 1px solid #cccccc;line-height:32px;}#d3{height:32px;background: url(../images/bg.png) no-repeat 15px -46px;border-bottom: 1px solid #cccccc;line-height:32px;}#d4{height:32px;background: url(../images/bg.png) no-repeat 10px -73px;border-bottom: 1px solid #cccccc;line-height:32px;}#d5{height:32px;background: url(../images/bg.png) no-repeat 10px -97px;border-bottom: 1px solid #cccccc;line-height:32px;}#d6{height:32px;background: url(../images/bg.png) no-repeat 12px -122px;border-bottom: 1px solid #cccccc;line-height:32px;}#d7{height:32px;background: url(../images/bg.png) no-repeat 12px -150px;border-bottom: 1px solid #cccccc;line-height:32px;}#d8{height:32px;background: url(../images/bg.png) no-repeat 12px -176px;line-height:32px;}#style{padding-left: 52px;font-size: 10px;}

0 0