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. SE Springer小组之《Spring音乐播放器》可行性研究报告一、二（转载）

         此文转载自组员小明处~~ 1 引言 1．1编写目的 <软件工程>课程,我们团队计划开发一个音乐播放器.本文档是基于网络上现有的音乐播放器的特点,团队计划实现的音乐播放器功能和团队 ...

  2. HDU 2096 小明A+B

    http://acm.hdu.edu.cn/showproblem.php?pid=2096 Problem Description 小明今年3岁了, 现在他已经能够认识100以内的非负整数, 并且能 ...

  3. 求两个整数的最大公约数GCM

    思路分析: (1)求差判定法:  如果两个数相差不大,可以用大数减去小数,所得的差与小数的最大公约数就是原来两个数的最大公约数．例如:求78和60的最大公约数．78-60＝18,18和60的最大公约数 ...

  4. Xshell 使用数字小键盘进行vim 写入操作.

    Copy From http://blog.csdn.net/shenzhen206/article/details/51200869 感谢原作者 在putty或xshell上用vi/vim的时候,开 ...

  5. Lucene最重要的功能是对一段话的分析

    Lucene最重要的功能是对一段话的分析

  6. pgm终

    这里罗列一些看完此书后遗留的问题: 常用 model 通过 BP/LBP 重新审视 inference 部分 Lauritzen algorithm/Lauritzen-Spiegelhalter a ...

  7. BZOJ2178 圆的面积并（simpson积分）

    板子题.可以转一下坐标防止被卡.精度和常数实在难以平衡. #include<iostream> #include<cstdio> #include<cmath> # ...

  8. windows7下GithubDesktop和极域学生客户端冲突导致无法正常打开解决方案

    [出现问题] 很悲伤,今天GithubDesktop打开直接报错导致无法开启 报错如下 我的天呢,你敢相信连原因都不给我,但是这特么怎么可能难道我呢! 打开系统日志查看原因最终找到罪魁祸首!!! 计算 ...

  9. Borg Maze POJ - 3026 (BFS + 最小生成树)

    题意: 求把S和所有的A连贯起来所用的线的最短长度... 这道题..不看discuss我能wa一辈子... 输入有坑... 然后,,,也没什么了...还有注意 一次bfs是可以求当前点到所有点最短距离 ...

  10. Shebang(#!)[转]

    原博文 使用Linux或者unix系统的同学可能都对#!这个符号并不陌生,但是你真的了解它吗? 首先,这个符号(#!)的名称,叫做"Shebang"或者"Sha-bang ...