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; 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-精灵图练习、边框属性(上)的更多相关文章
- 从零开始学 Web 之 CSS(五)可见性、内容移除、精灵图、属性选择器、滑动门
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- CSS的背景属性和边框属性
CSS的背景属性: background 简写属性,作用是将背景属性设置在一个声明中 background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-co ...
- CSS之精灵图(雪碧图)与字体图标
本文内容: 精灵图 字体图标 首发日期:2018-05-01 精灵图: 在以前,每个图片资源都是独立的一张张图片,浏览器访问网站中的不同网页时是重复获取这一张张图片的,这代表需要访问很多次资源. 为了 ...
- CSS3的新增边框属性
一.CSS3 新增的边框属性 属性 版本 简介 border-image CSS3 设置或检索对象的边框使用图像来填充 border-image-source CSS3 设置或检索对象的边框是否用图像 ...
- Web前端篇:CSS常用格式化排版、盒模型、浮动、定位、背景边框属性
目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...
- CSS雪碧图(精灵图)使用
1:CSS雪碧图:CSS雪碧图 即 CSS Sprites,也有人叫它CSS精灵图. 2:雪碧图的由来:一个网站的页面需要大量的小图片或者小图标,但是大量的图片如果放在服务器上,每次当打开网站并且向服 ...
- 前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位
前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位 一丶css选择器的优先级 行内 > id选择器 > 类选择器 ...
- css精灵图使用
1. 精灵技术的使用 CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),然而,各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图,就需要使用CSS的b ...
- css雪碧图(精灵图)与字体图标的介绍以及对比
css雪碧图(精灵图)与字体图标的介绍以及对比 设想一个实际场景:在一个页面为了展示,我们放置了很多独立的小图片,浏览器在显示页面的时候,就需要向服务器就会发送很多请求,来获取并加载这些小图片,但是这 ...
随机推荐
- 【游记】NOIP2019初赛
声明 我的游记是一个完整的体系,如果没有阅读过往届文章,阅读可能会受到障碍. ~~~上一篇游记的传送门~~~ 前言 (编辑中) 文章推荐:[游记]NOIP2019复赛
- SpringBoot:如何优雅地处理全局异常?
之前用springboot的时候,只知道捕获异常使用try{}catch,一个接口一个try{}catch,这也是大多数开发人员异常处理的常用方式,虽然屡试不爽,但会造成一个问题,就是一个Contro ...
- indexedDB添加,删除,获取,修改
[toc] 在chrome(版本 70.0.3538.110)测试正常 编写涉及:css, html, js 在线演示codepen html代码 <h1>indexedDB</h1 ...
- Java——标准异常
Throwable这个java类被用来表示任何可以作为异常被抛出的类,Throwable可以分为两种类型,Error用来表示编译时和系统错误,Exception是可以被抛出的基本类型. 1.Runti ...
- C# 一个计算器功能实现引发的思考
一.需求 计算器功能需求,这个众所周知,很明确了. 二.步骤分析 1)初级实现计算器 static int Calculator(int a,int b,string str) { switch(st ...
- SpringBoot:实现定时任务
一.定时任务实现的几种方式: Timer 这是java自带的java.util.Timer类,这个类允许你调度一个java.util.TimerTask任务.使用这种方式可以让你的程序按照某一个频度执 ...
- 盘一盘 NIO (三)—— Selector解析
Selector是个啥? Selector是Java NIO核心组件中的选择器,用于检查一个或多个Channel(通道)的状态是否处于可读.可写.实现一个单独的线程可以管理多个channel,从而管理 ...
- Python之函数(一)定义函数以及传参
定义函数以及传参 函数的定义 def 函数名(): 函数体 例子: def func():#def关键字--定义 func函数名--和变量定义规则一样 ()必须要写格式 :声明 语句结束 s=[1,2 ...
- 安装yarn集群
安装yarn集群 # mapreduce运行平台YARN mapreduce程序应该是在很多机器上并行启动,而且先执行map task,当众多的maptask都处理完自己的数据 后,还需要启动众多的r ...
- 云原生生态周报 Vol. 17 | Helm 3 发布首个 beta 版本
本周作者 | 墨封.衷源.元毅.有济.心水 业界要闻 1. Helm 3 首个 beta 版本 v3.0.0-beta.1 发布 该版本的重点是完成最后的修改和重构,以及移植其他 Helm 2 特性. ...