web前端入门到实战：精灵图练习、边框属性（上）

一、精灵图练习

练习：用精灵图表示出“RUI”

工具：Adobe Fireworks

方法：（1）打开Adobe Fireworks（2）选取一张26个英文字母图片

（3）先把我们这张图片的图层锁定，原因：防止图片被修改，不可恢复

按图片中的顺序进行操作。

（4）按顺序进行选取，选择裁剪工具（我们的目的并非真正裁剪，之所以用Adobe的这个工具，是因为如3可以显示这个裁剪区域的实际大小，以及左上角的坐标）

（5）找好坐标以及大小之后，我们开始写代码

如下图，我们就把这个字母给单独显示出来了，通过设置背景图片的属性

.box1{

            width: 66px;

            height: 93px;

            background: url("image/26alphabet.jpg") no-repeat -193px -409px;

        }

 ........