按钮练习 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        /*
            做完功能后，在第一次切换图片时，会发现图片有一个非常快的闪烁
              这个闪烁会造成一次不佳用户体验
            产生闪烁原因
                背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源
                    需要单独发送一次请求，但是外部资源不是同时加载，浏览器会在
                    资源被使用才去加载资源
                    
                此项目中，浏览器只会加载link.png由于hover和active的状态没有马上
                    触发，所以hover.png和active.png并不是立即加载
                当hover被触发时，浏览器才会去加载active.png
                由于加载图片需要时间，在加载和显示过程中会有一段时间真空期
                所以会出现闪烁
                
                解决该项目中的问题，可以将三个图片整合为一，这样可以同时将
                    三张图片一起加载，就不会闪烁
                通过background-position来切换显示的图片位置
                技术叫图片整合技术（CSS-Sprite）
                    优点：
                        1 将多个图片整合为一，浏览器只需发送一次请求，就可同时加载多个图片
                            提高访问效率
                        2 多个图片整合为一，减小大小，提高效率和请求速度
                
        */
            .btn:link{
                /*内联元素转换为块元素*/
                display: block;
                /*设置宽高*/
                width: 93px;
                height: 29px;
                /*设置背景图片*/
                background-image: url(img/btn/btn.png);
                /*设置背景图片不重复*/
                background-repeat: no-repeat;
            }
            .btn:hover{
                background-image: url(img/btn/btn.png);
                /*当是hover时，希望图片向左移动*/
                background-position: -93px 0;
            }
            .btn:active{
                background-image: url(img/btn/btn.png);
                /*当是active时，希望图片向左移动*/
                background-position: -186px 0;
            }
        </style>
    </head>
    <body>
        <!-- 创建超链接 -->
        <a class="btn" href="#"></a>
    </body>
</html>

此节内容运用伪类，background-position background-image设置按钮注意不平铺

　　图片整合技术以及雪碧图的优点

　　　　多个图片整合为一，浏览器只需一次请求，提高访问效率

　　　　减小大小提高效率和请求速度

posted @ 2021-07-06 16:43  2237774566  阅读(74)  评论(0)    收藏  举报