精灵图，背景图缩放。盒子阴影，

Dn_wh

已于 2022-03-06 16:40:06 修改

阅读量359

点赞数

分类专栏： # css 文章标签：前端 css html

于 2022-03-04 17:29:08 首次发布

本文链接：https://blog.csdn.net/m0_51045721/article/details/123281552

版权

精灵图背景图大小过渡效果 SEO优化标题图标

关键词由CSDN通过智能技术生成

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章目录

精灵图

将小图合成一个大图

优点：减少服务器的发送次数，减轻服务器的压力，提高页面的加载速度
说白了就是限制访问量

三步：
1、创建一个盒子
2、把精灵图设置为盒子的背景图
3、修改背景图的位置

注意
一般精灵图的标签都使用行内标签（行内：加宽高不生效），比如span b i 等等

背景图位置修改:backgroud-position


<!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>
        span {
            display: inline-block;
            width: 18px;
            height: 24px;
            background-color: pink;
			/* 插入背景图要使用 url 的方法*/
            background-image: url(./images/taobao.png);
            /* 背景图位置属性: 改变背景图的位置 */
            /* 水平方向位置  垂直方向的位置 */
            /* 想要向左侧移动图片, 位置取负数;  */
            background-position: -3px 0;
        }

        b {
            display: block;
            width: 25px;
            height: 21px;
            background-color: green;
            background-image: url(./images/taobao.png);
            background-position: 0 -90px;
        }
    </style>
</head>
<body>
    <!-- <img src="./images/taobao.png" alt=""> -->
    <!-- 精灵图的标签都用行内标签  span, b, i -->
    <span></span>


    <b></b>
</body>
</html>

背景图大小

语法：background-size:宽度高度
取值：

数字+px
百分比  --相对于盒子自身宽高百分比
contain  --将背景图片等比例缩放，直到  不会超出盒子的最大
cover  --覆盖，将图片等比例缩放，直到  刚好填满整个盒子没有空白

连写

background: color image repeat position/size:

background-size 和 background 连写同时设置时，要注意覆盖的问题

要么单独样式的写在连写的下面
要么单独样式写在连写的里面

盒子阴影

box-shadow

在这里插入图片描述

<!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>盒子阴影</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 内阴影。。。。不写的话默认就是外阴影 */
            box-shadow: 5px 10px 20px 10px greenyellow inset;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

过渡

实现元素样式的慢慢变化，经常配合hover使用，增强网页的交互体验

属性：transition

过渡属性+过渡时长（一般是以秒为单位）

<!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>
        /* 过渡配合 hover */
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;

            /* 花费1秒 */
            /* transition: width 1s, background-color 2s; */


            如果变化的属性多的话，直接使用 all  表示所有
            transition: all 2s;
        }

        .box:hover {
            width: 600px;
            background-color: orange;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

骨架标签

<!DOCTYPE html> 文档声明，告诉浏览器该网页的版本
<html lang="en">网页语言，标识网页使用的语言
<meta charset="UTF-8"> 字符编码
width=device-width移动端网页的时候要用

SEO三大标签

SEO：搜索引擎优化
优化的是：让网站在搜索引擎上的排名靠前
1.竞价排行
2.将网页制作成.html后缀
3.标签语义化（在合适的地方使用合适的标签）

titie
description
keywords

在这里插入图片描述

标题图标–favicon

就是在网页打开的时候，网页上边的这个小图标
在这里插入图片描述
link-favicon

<!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">
    <meta name="description" content="xxxxxxxxx">
    <meta name="keywords" content="xxxxxx">
    <title>Document</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>

<body>

</body>

</html>