HTML&CSS基础-雪碧图的制作和使用

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

一.使用PS将3张图片合并为一张(温馨提示:整合图片适合整理背景图，如果是img引用的图片并不使用)

1>.将准备的图依次拖入到PS中

2>.拉一根辅助线，并点击"图像"--->"画布大小"会弹出当前logo所占的画布大小信息

3>.计算出宽度，修改画布大小并选择定位

4>.如下图所示，确认宽度和定位后，点击确定

5>.测量矩形的大小并拖拽参考线，便于后面讲其它两张图片拖拽过来存放

6>.将hover.png和active.png的按钮拖入到link.png途中咱们预先给它们量准备的位置

7>.雪碧图拖拽完成，接下来就是得把咱们制作的成功保存下来了

8>.如下图所示，点击"文件" ---> "存储为web所用格式",选择图片的存储格式为“PNG-24”并点击"存储"按钮

9>.将图标存储到本地

10>.图片保存成功

二.使用咱们自己制作的雪碧图制作按钮背景

1>.将图片拷贝到项目路径

2>.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/my_btn.png);

                /*设置图片不重复*/

                background-repeat: no-repeat;

             }

             .btn:hover{

                 /*设置鼠标移入链接时的背景图片*/

                 /*background-image: url(img/btn/hover.png);*/

                 background-image: url(img/btn/my_btn.png);

                 /*当hover状态时，希望图片可以向左移动*/

                 background-position: -93px 0px;

             }

             .btn:active{

                 /*设置鼠标正在点击链接时的背景图片*/

                 /*background-image: url(img/btn/active.png);*/

                 background-image: url(img/btn/my_btn.png);

                 /*当active状态时，希望图片可以再一次向左移动*/

                 background-position: -186px 0px;

             }

         </style>

    </head>

    <body>

        <!--创建一个超链接-->

        <a class="btn" href="#"></a>

    </body>

</html>

3>. 浏览器打开以上代码渲染结果

因缺失log4j.properties 配置文件导致flume无法正常启动。的更多相关文章

  1. Log4j学习（使用流程，Log4j.properties配置文件，配置到多个不同目标）

    参考网址: [http://blog.csdn.net/drift_away/article/details/7403658] [http://blog.csdn.net/lxzo123/articl ...

  2. 2018.8.6 学习 log4j.properties 配置文件

    配置文件的话第一步当然是解决乱码问题 Eclipse中properties文件中文乱码解决方式 打开eclipse的properties文件时你会发现,其中部分中文注释乱码了,下面将写出如何设置pro ...

  3. 解决web项目存在多个log4j.properties配置文件，导致日志级别配置不生效问题

    java开启log4j的debug模式 -Dlog4j.debug=true tomcat启动debug模式: linux打开catalina.sh导入: export JAVA_OPTS=" ...

  4. log4j.properties配置文件及详解

    log4j配置文件有三个主要的组件:Logger,Appender和Layout,分别为日志类型,日志输出目的地,日志输出格式. 1. 配置日志级别及appenderName log4j.rootLo ...

  5. mybatis显示sql语句 log4j.properties配置文件

    log4j.properties配置如下: 将ibatis log4j运行级别调到DEBUG可以在控制台打印出ibatis运行的sql语句,方便调试: ### 设置Logger输出级别和输出目的地 # ...

  6. log4j.properties配置文件详解

    Log4J的配置文件(Configuration File)就是用来设置记录器的级别.存放器和布局的,它可接key=value格式的设置或xml格式的设置信息.通过配置,可以创建出Log4J的运行环境 ...

  7. log4j.properties配置文件

    #配置根 Logger,其语法为:log4j.rootLogger = level,appenderName1,appenderName2,... #优先级:ALL < DEBUG < I ...

  8. ibatis/mybatis显示sql语句 log4j.properties配置文件

    将ibatis/mybatis log4j运行级别调到DEBUG可以在控制台打印出ibatis运行的sql语句,方便调试: ### 设置Logger输出级别和输出目的地 ### log4j.rootL ...

  9. IDEA中log4j.properties配置文件详解

    配置实例 ### 配置根 ### log4j.rootLogger = debug,console ,fileAppender,dailyRollingFile,ROLLING_FILE,MAIL,D ...

随机推荐

  1. spring引入HikariCP连接池

    1.导入jar包 2.applicationContext.xml中配置 <bean id="dataSource" class="com.zaxxer.hikar ...

  2. mybaits拦截器+自定义注解

    实现目的:为了存储了公共字典表主键的其他表在查询的时候不用关联查询(所以拦截位置位于mybaits语句查询得出结果集后) 项目环境 :springboot+mybaits 实现步骤:自定义注解——自定 ...

  3. 剑指offer：树的子结构

    题目描述: 输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构) 解题思路: 同样考虑用递归来做. 利用两个递归函数,一个用于判断两棵树树否相等,另一个递归取A的 ...

  4. [转帖]ASP.NET Core的Kestrel服务器

    ASP.NET Core的Kestrel服务器 https://cloud.tencent.com/developer/article/1023247 在这篇文章中: 何时使用Kestrel和反向代理 ...

  5. SAP PP顾问面试题及资料

    SAP PP顾问面试试题及资料 1.主数据 组织架构 •SAP中主要的组织架构有哪些?哪些用于PP的组织架构?•成本控制范围.公司代码.估价范围.工厂.库存地点之间的关系 物料主数据 •不同的物料主数 ...

  6. 关于python 文件操作os.fdopen(), os.close(), tempfile.mkstemp()

    嗯.最近在弄的东西也跟这个有关系,由于c基础渣渣.现在基本上都忘记得差不多的情况下,是需要花点功夫才能弄明白. 每个语言都有相关的文件操作. 今天在flask 的例子里看到这样一句话.拉开了文件操作折 ...

  7. git常用命令及用法小计

    git init 初始化一个本地git仓库repository git status 查看状态 git add <file> 将工作区修改加到暂存区(stage) git commit - ...

  8. python之tkinter使用-窗口居中显示

    # 窗口居中显示 import tkinter as tk def set_win_center(root, curWidth='', curHight=''): ''' 设置窗口大小,并居中显示 : ...

  9. pinv

    moore-penrose pseudoinverse of matrix伪逆

  10. 封装caffe版的deeplab为库供第三方使用

    1.解决deeplab编译问题 http://m.2cto.com/kf/201612/579545.html