一、精灵图练习

练习:用精灵图表示出“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;

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

        }

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

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

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

<div class="box3"></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_exercise.html​

地址:

https://github.com/ruigege66/HTML_learning/blob/master/d103_elf_image_exercise.html

2.CSDN:https://blog.csdn.net/weixin_44630050(心悦君兮君不知-睿)

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

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

HTML连载36-精灵图练习、边框属性(上)的更多相关文章

  1. 从零开始学 Web 之 CSS(五)可见性、内容移除、精灵图、属性选择器、滑动门

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  2. CSS的背景属性和边框属性

    CSS的背景属性: background 简写属性,作用是将背景属性设置在一个声明中 background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-co ...

  3. CSS之精灵图(雪碧图)与字体图标

    本文内容: 精灵图 字体图标 首发日期:2018-05-01 精灵图: 在以前,每个图片资源都是独立的一张张图片,浏览器访问网站中的不同网页时是重复获取这一张张图片的,这代表需要访问很多次资源. 为了 ...

  4. CSS3的新增边框属性

    一.CSS3 新增的边框属性 属性 版本 简介 border-image CSS3 设置或检索对象的边框使用图像来填充 border-image-source CSS3 设置或检索对象的边框是否用图像 ...

  5. Web前端篇:CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

    目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

  6. CSS雪碧图(精灵图)使用

    1:CSS雪碧图:CSS雪碧图 即 CSS Sprites,也有人叫它CSS精灵图. 2:雪碧图的由来:一个网站的页面需要大量的小图片或者小图标,但是大量的图片如果放在服务器上,每次当打开网站并且向服 ...

  7. 前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位

    前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位 一丶css选择器的优先级 行内 > id选择器 > 类选择器 ...

  8. css精灵图使用

    1. 精灵技术的使用 CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),然而,各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图,就需要使用CSS的b ...

  9. css雪碧图(精灵图)与字体图标的介绍以及对比

    css雪碧图(精灵图)与字体图标的介绍以及对比 设想一个实际场景:在一个页面为了展示,我们放置了很多独立的小图片,浏览器在显示页面的时候,就需要向服务器就会发送很多请求,来获取并加载这些小图片,但是这 ...

随机推荐

  1. 【游记】NOIP2019初赛

    声明 我的游记是一个完整的体系,如果没有阅读过往届文章,阅读可能会受到障碍. ~~~上一篇游记的传送门~~~ 前言 (编辑中) 文章推荐:[游记]NOIP2019复赛

  2. SpringBoot:如何优雅地处理全局异常?

    之前用springboot的时候,只知道捕获异常使用try{}catch,一个接口一个try{}catch,这也是大多数开发人员异常处理的常用方式,虽然屡试不爽,但会造成一个问题,就是一个Contro ...

  3. indexedDB添加,删除,获取,修改

    [toc] 在chrome(版本 70.0.3538.110)测试正常 编写涉及:css, html, js 在线演示codepen html代码 <h1>indexedDB</h1 ...

  4. Java——标准异常

    Throwable这个java类被用来表示任何可以作为异常被抛出的类,Throwable可以分为两种类型,Error用来表示编译时和系统错误,Exception是可以被抛出的基本类型. 1.Runti ...

  5. C# 一个计算器功能实现引发的思考

    一.需求 计算器功能需求,这个众所周知,很明确了. 二.步骤分析 1)初级实现计算器 static int Calculator(int a,int b,string str) { switch(st ...

  6. SpringBoot:实现定时任务

    一.定时任务实现的几种方式: Timer 这是java自带的java.util.Timer类,这个类允许你调度一个java.util.TimerTask任务.使用这种方式可以让你的程序按照某一个频度执 ...

  7. 盘一盘 NIO (三)—— Selector解析

    Selector是个啥? Selector是Java NIO核心组件中的选择器,用于检查一个或多个Channel(通道)的状态是否处于可读.可写.实现一个单独的线程可以管理多个channel,从而管理 ...

  8. Python之函数(一)定义函数以及传参

    定义函数以及传参 函数的定义 def 函数名(): 函数体 例子: def func():#def关键字--定义 func函数名--和变量定义规则一样 ()必须要写格式 :声明 语句结束 s=[1,2 ...

  9. 安装yarn集群

    安装yarn集群 # mapreduce运行平台YARN mapreduce程序应该是在很多机器上并行启动,而且先执行map task,当众多的maptask都处理完自己的数据 后,还需要启动众多的r ...

  10. 云原生生态周报 Vol. 17 | Helm 3 发布首个 beta 版本

    本周作者 | 墨封.衷源.元毅.有济.心水 业界要闻 1. Helm 3 首个 beta 版本 v3.0.0-beta.1 发布 该版本的重点是完成最后的修改和重构,以及移植其他 Helm 2 特性. ...