初识python面向对象编程
HTML&CSS基础-图片按钮闪烁解决方案
作者：尹正杰
版权声明：原创作品，谢绝转载！否则将追究法律责任。
一.图片按钮存在闪烁的案例
1>.HTML源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片按钮</title>
<style type="text/css">
/**
* 做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，这个闪烁会造成一次不佳的体验。
*
* 产生闪烁的原因:
* 背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独发一次http请求,但是我们
* 外部资源并不是同时加载，浏览器惰性的，它默认会在资源被使用时才去加载资源。也就是说，在咱们这个案例中，一
* 上来只会加载link.png这个背景图片，由于伪类hover和active的状态没有马上触发，所以hover.png和
* active.png并不是立即加载的，而是当hover被触发时浏览器才会去加载hover.png，当active被触发时才回去
* 加载active.png。由于加载图片需要一定的时间，所以在加载和显示过程会有一段时间，背景图片无法显示，导致出现
* 闪烁的情况。当第二次再去触发时咱们又会发现就不会出现闪烁的情况，那是因为浏览器使用了第一次下载图片的缓存。
*
*/
.btn{
/*将a转换为块元素*/
display: block;
/*设置宽高*/
width: 93px;
height: 29px;
/*设置背景图片*/
background-image: url(img/btn/link.png);
/*设置图片不重复*/
background-repeat: no-repeat;
} .btn:hover{
/*设置鼠标移入链接时的背景图片*/
background-image: url(img/btn/hover.png);
} .btn:active{
/*设置鼠标正在点击链接时的背景图片*/
background-image: url(img/btn/active.png);
}
</style>
</head>
<body> <!--创建一个超链接-->
<a class="btn" href="#"></a>
</body>
</html>
2>.浏览器打开以上代码渲染结果
二.解决图片按钮闪烁方案-图片整合技术(CSS-Sprite)
1>.HTML源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片按钮</title>
<style type="text/css">
/**
* 做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，这个闪烁会造成一次不佳的体验。
*
* 产生闪烁的原因:
* 背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独发一次http请求,但是我们
* 外部资源并不是同时加载，浏览器惰性的，它默认会在资源被使用时才去加载资源。也就是说，在咱们这个案例中，一
* 上来只会加载link.png这个背景图片，由于伪类hover和active的状态没有马上触发，所以hover.png和
* active.png并不是立即加载的，而是当hover被触发时浏览器才会去加载hover.png，当active被触发时才回去
* 加载active.png。由于加载图片需要一定的时间，所以在加载和显示过程会有一段时间，背景图片无法显示，导致出现
* 闪烁的情况。当第二次再去触发时咱们又会发现就不会出现闪烁的情况，那是因为浏览器使用了第一次下载图片的缓存。
*
* 解决方案:
* 为了解决上述d问题，可以将三个图片整合为一张图片，这样可以同时将三张图片一起加载，就不会出现闪烁的问题了，
* 然后通过background-position属性来切换显示图片的位置，这种技术叫做图片整合技术(CSS-Sprite),这种技术有
* 以下优点:
* 1>.将多个图片整合为一张图片里，浏览器只需要发送一次http请求可以同时加载多个图片(提高了访问效率,也提高了用户体验)
* 2>.将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加的用户体验
*
* 温馨提示:
* 图片中会保存一个叫颜色表属性，如果下载三个图片就会保存三个图片的颜色表，下载一个图片只需要保存一个颜色表从而节省了一定的存储空间
*
*
*/
.btn{
/*将a转换为块元素*/
display: block;
/*设置宽高*/
width: 93px;
height: 29px;
/*设置背景图片*/
/*background-image: url(img/btn/link.png);*/
background-image: url(img/btn/btn.png);
/*设置图片不重复*/
background-repeat: no-repeat;
} .btn:hover{
/*设置鼠标移入链接时的背景图片*/
/*background-image: url(img/btn/hover.png);*/
background-image: url(img/btn/btn.png);
/*当hover状态时，希望图片可以向左移动*/
background-position: -93px 0px;
} .btn:active{
/*设置鼠标正在点击链接时的背景图片*/
/*background-image: url(img/btn/active.png);*/
background-image: url(img/btn/btn.png);
/*当active状态时，希望图片可以再一次向左移动*/
background-position: -186px 0px;
}
</style>
</head>
<body> <!--创建一个超链接-->
<a class="btn" href="#"></a>
</body>
</html>
2>.浏览器打开以上代码渲染结果
初识python面向对象编程的更多相关文章
- python 面向对象编程学习
1. 问题:将所有代码放入一个py文件:无法维护 方案:如果将代码才分放到多个py文件,好处: 1. 同一个名字的变量互相不影响 2.易于维护 3.引用模块: import module 2.包:解决 ...
- 初识python面向对象
一.初识python面向对象: class Person: #使用class关键字定义一个类 age=0 #类变量(静态变量) def eat(self,food): #定义一个方法 self.age ...
- python 面向对象编程（一）
一.如何定义一个类 在进行python面向对象编程之前,先来了解几个术语:类,类对象,实例对象,属性,函数和方法. 类是对现实世界中一些事物的封装,定义一个类可以采用下面的方式来定义: class c ...
- Python面向对象编程指南
Python面向对象编程指南(高清版)PDF 百度网盘 链接:https://pan.baidu.com/s/1SbD4gum4yGcUruH9icTPCQ 提取码:fzk5 复制这段内容后打开百度网 ...
- python面向对象编程进阶
python面向对象编程进阶 一.isinstance(obj,cls)和issubclass(sub,super) isinstance(obj,cls)检查是否obj是否是类 cls 的对象 1 ...
- Python面向对象编程（下）
本文主要通过几个实例介绍Python面向对象编程中的封装.继承.多态三大特性. 封装性 我们还是继续来看下上文中的例子,使用Student类创建一个对象,并修改对象的属性.代码如下: #-*- cod ...
- Python 面向对象编程——访问限制
<无访问限制的对象> 在Class内部,可以有属性和方法,而外部代码可以通过直接调用实例变量的方法来操作数据,这样,就隐藏了内部的复杂逻辑.但是,从前面Student类的定义来看(见:Py ...
- Python 面向对象编程 继承 和多态
Python 面向对象编程 继承 和多态 一:多继承性 对于java我们熟悉的是一个类只能继承一个父类:但是对于C++ 一个子类可以有多个父亲,同样对于 Python一个类也可以有多个父亲 格式: c ...
- Python 面向对象编程基础
Python 面向对象编程基础 虽然Pthon是解释性语言,但是Pthon可以进行面向对象开发,小到 脚本程序,大到3D游戏,Python都可以做到. 一类: 语法: class 类名: 类属性,方法 ...
随机推荐
- Number.toString SyntaxError
问题分析 问题 20.toString(); VM163:1 Uncaught SyntaxError: Invalid or unexpected token 分析 "."号的原 ...
- 3dmax2020下载安装3dmax2020破解中文版下载安装
3dmax在室内设计.建筑设计领域是最专业的效果图制作软件,也是在游戏动画等领域中在场景方面最专业的软件,目前最新3dmax2020版本已出,我分享亲测好用的软件包,拿走不谢! 3dmax2020安装 ...
- 推荐一个MacOS苹果电脑系统解压缩软件
废话少说,直入主题: 连接:https://www.keka.io/en/ 开源免费好用(个人觉得比betterzip好用哈),附一张这货的图标:
- 浅谈我的UI设计之路
时光匆匆,进入UI学习已经快两个月了,这段时间过得很充实,因为有压力才有收获. 还记的刚刚学习手绘的时候,对于这个行业只有一个初步的认识,知道自己喜欢,但是真正学习的时候才发现,我要学习的东西还有很多 ...
- 分布式理论：深入浅出Paxos算法
前言 Paxos算法是用来解决分布式系统中,如何就某个值达成一致的算法.它晦涩难懂的程度完全可以跟它的重要程度相匹敌.目前关于paxos算法的介绍已经非常多,但大多数是和稀泥式的人云亦云,却很少有人能 ...
- A - 摆仙果
题目描述 Adrian, Bruno与Goran三人参加了仙界的宴会,宴会开始之前先准备了一些仙果供三人品尝,但是仙果的摆放有顺序要求,如果把仙果摆错了位置,仙果就会消失而无法品尝到. 由于三人是第一 ...
- LeetCode 637. Average of Levels in Binary Tree二叉树的层平均值 (C++)
题目: Given a non-empty binary tree, return the average value of the nodes on each level in the form o ...
- web框架-Struts开始
问题: 为什么有structs 作为一种框架(frameset)可以与传统的mvc进行比较? MVC是一种模式数据处理.显示和数据输入分开,来规范开发,但是却又并不规范.可以这样想:有三家公司,他们对 ...
- extjs几个奇怪的错误
在用Extjs进行网页开发的时候,遇见了一下两个错误,这两个错误的位置用firebug调试显示在extjs-all.js Ext.resetElement is undefined g.el is n ...
- mosquitto集群配置
--------------------------------------------------------前言------------------------------------------ ...