网页学习按钮练习

最新推荐文章于 2023-09-01 16:34:23 发布

乡下鲨的目光

最新推荐文章于 2023-09-01 16:34:23 发布

阅读量87

点赞数

分类专栏：笔记文章标签：前端 css html 学习

本文链接：https://blog.csdn.net/qq_63074394/article/details/124588159

版权

笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:link{
            display: block;
            width: 100px;
            height: 60px;
            background-color: pink;
            /* btn设置不动 */
            background-image: url(/exercise/img/02/按钮练习png.png);

        }
        a:hover{
            background-image: url(/exercise/img/02/按钮练习hover.png);
        }
        a:active{
            background-image: url(/exercise/img/02/按钮练习active.png);
        }
        /* 
         注意：图片属于网页的外部资源，外部资源需要浏览器单独发送请求加载
         浏览器加载外部资源是按需要加载的，用则加载，不用则不加载
         解决方法：放到一张大图中
        */
        /* 雪碧图使用方法：
            1.先确定好图标
            2.测量好大小
            3.根据测量结果创建一个元素
            4.将雪碧图设置为背景图片
            5.设置偏移量以显示所需图标
            理解就是盒子大小与边框的配合

        */
        .box1{
            width: 200px;
            height: 100px;
          
             background-image: url(/exercise/img/02/按钮练习2.png.png);
             background-position: -200px -600px;
             background-repeat: no-repeat;
           
        }
    </style>
</head>
<body>
    <a href="javascript:;"></a>
    <div class="box1">

    </div>
</body>
</html>

乡下鲨的目光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页学习按钮练习

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
复制链接

扫一扫