HTML连载36

一、精灵图练习

练习：用精灵图表示出“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;        } ..........省略代码........ <div class="box1"></div>

（6）依次类推，我们的最后代码和结果为

 div{            display: inline-block;        }        .box1{             width: 66px;             height: 93px;             background: url("image/26alphabet.jpg") no-repeat -193px -409px;         }        .box2{            width: 74px;            height: 97px;            background: url("image/26alphabet.jpg") no-repeat -417px -408px;        }        .box3 {            width: 31px;            height: 90px;            backg内经图round: url("image/26alphabet.jpg") no-repeat -451px -197px;        }..........省略代码..........<div class="box1"></div><div class="box2"></div><div class="b土豪我们做朋友歌词ox3"></div>

二、什么是边框

1.边框就是环绕在标签宽度和高度周围的线条

2.边框的属性格式

2.1连写（同时设置四条边的边框）

border:边框的宽度 边框的样式 边框的颜色；

2.2连写（分别设置四条边的边框）

border-top:边框的宽度 边框的样式 边框的颜色；

border-left:边框的宽度 边框的样式 边框的颜色；

border-right:边框的宽度 边框的样式 边框的颜色；

border-bottom:边框的宽度 边框的大学分数样式 边框的颜色；

注意点：

（1）边框的宽度可以省略，但是显示非常细

（2）边框的样式我们记住两个就够了

dashed虚线，solid实线，样式是不能省略的！！！

其他的就去w3cshool就可以了

（3）边框的颜色省略不写默认黑色

举例：

        .aaa{            background-color: red;            width: 100px;            height: 100px;            border: 5px solid blue;/*中间样式记住两个就够了，dashed虚线，solid实线        }........省略代码.......<div class="aaa"></div>

三、源码：

d103_elf_image_exerci.html​

地址:

https://github.com/ruigege66/html_learning/blob/master/d103_elf_image_exerci.html

2.csdn：https://blog.csdn.net/weixin_44630050（心悦君兮君不知-睿）

3.博客园：https://www.cnblogs.com/ruigege0000/

4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取java大数据学习视频礼包