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

最新推荐文章于 2025-10-11 14:46:19 发布

原创最新推荐文章于 2025-10-11 14:46:19 发布 · 765 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #web前端 #前端教程 #前端开发 #css

本文介绍了web前端开发中的精灵图练习，使用Adobe Fireworks进行裁剪并展示如何通过设置背景图片属性来显示字母。此外，文章还讲解了边框的基本概念，包括边框的宽度、样式和颜色，强调了边框样式的重要性以及颜色的默认设定。

一、精灵图练习

练习：用精灵图表示出“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>
web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

（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;

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

        }

..........省略代码..........

<div class="box1"></div>

<div class="box2"></div>

<div class="box3"></div>

如果大家对编程，web前端感兴趣，想要了解学习，打算深入了解这个行业的朋友，可以加下我们的前端学习扣qun : 784783012 ，不论你是学生还是想转行的朋友，我都欢迎，不定期分享干货，整理的一份2019最新的web前端学习资料和0基础入门教程分享给大家：学习前端我们是认真的

二、什么是边框

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>
web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）