前端开发学习——项目样式补充

先吃点再说

于 2024-09-09 19:04:42 发布

阅读量430

点赞数 9

文章标签：学习

本文链接：https://blog.csdn.net/2302_80311379/article/details/142050517

版权

一、精灵图

1、精灵图的作用

场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图

优点：减少服务器发送次数，减轻服务器的压力，提高页面的加载速度

例如：需要在网页中展示八张小图片

8张小图片分别发送—8次
合并成1张精灵图—1次

2、精灵图的使用步骤

创建一个盒子，设置盒子的尺寸和小图尺寸相同
将精灵图设置为盒子的背景图片
修改背景图位置：通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position: x y

<head>
    <style>
        span {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: pink;
            background-image: url(./image.jpg);
            /* 背景图位置属性：改变背景图位置 */
            /* 水平方向位置 垂直方向位置 */
            /* 想要向左移动图片：位置取负数 */
            background-position: -756px 0;
        }
    </style>
</head>
<body>
    <!-- 精灵图的标签都用行内标签，span,b,i等 -->
    <span></span>
</body>

二、背景图缩放

1、背景图片大小

作用：设置背景图片的大小

语法：background-size：宽度高度；

取值	场景
数字+px	简单方便，常用
百分比	相对于当前盒子自身的宽高百分比
contain	包含，将背景图片等比例缩放，知道不会超出盒子的最大
cover	覆盖，将背景图片等比例缩放，知道刚好填满整个盒子没有空白

2、数字+px

        .box {
            width: 500px;
            height: 400px;
            background-color: pink;
            background-image: url(./image2.jpg);
            background-repeat: no-repeat;
            background-size: 500px 400px;
        }

浏览器运行效果：

3、百分比

        .box {
            width: 500px;
            height: 400px;
            background-color: pink;
            background-image: url(./image2.jpg);
            background-repeat: no-repeat;
            /* background-size: 500px 400px; */
            background-size: 50%;
        }

浏览器显示效果：

4、contain

        .box {
            width: 500px;
            height: 400px;
            background-color: pink;
            background-image: url(./image2.jpg);
            background-repeat: no-repeat;
            /* background-size: 500px 400px; */
            /* background-size: 50%; */

            /* 如果图的宽高与盒子的尺寸相同了，另一个方向停止缩放，导致盒子留白 */
            background-size: contain;
        }

浏览器显示效果：

5、cover

        .box {
            width: 500px;
            height: 400px;
            background-color: pink;
            background-image: url(./image2.jpg);
            background-repeat: no-repeat;
            /* background-size: 500px 400px; */
            /* background-size: 50%; */

            /* 如果图的宽高与盒子的尺寸相同了，另一个方向停止缩放，导致盒子留白 */
            /* background-size: contain; */
            /* 保证图片的宽高和盒子完全相同，导致图片显示不全 */
            background-size: cover;
        }

浏览器显示效果：

三、文字阴影

值	描述
h-shadow	必需。水平阴影的位置，允许负值
v-shadow	必需。垂直阴影的位置，允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。

<head>
    <style>
        div {
            text-shadow: 10px 10px 1px pink;
        }
    </style>
</head>
<body>
    <div>文字阴影</div>
</body>

浏览器显示效果：

四、盒子阴影

作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节

属性名：box-shadow

参数	作用
h-shadow	必须。水平偏移量。允许负值。
v-shadow	必须。垂直偏移量。允许负值
blur	可选。模糊度。
spread	可选。阴影扩大。
color	可选。阴影颜色。
inset	可选。将阴影改为内部阴影。

<head>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            box-shadow: 5px 10px 20px 10px green;
            /* 如果是内部阴影，则加上inset，外部不用加 */
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

浏览器显示效果：

五、过渡

作用：让元素的样式慢慢变化，常配合hover使用，增强网页的交互体验

属性名：transition

常见取值：

参数	取值
过渡的属性	all:所有能过渡的属性都过渡、具体属性名如：width：只有width过渡
过渡的时长	数字+s（秒）

注意点：

过渡需要：默认状态和hover状态样式不同，才能有过渡效果、
transition属性给需要过渡的元素本身加
transition属性设置在不同状态中，效果不同：
- 给默认状态设置，鼠标移入移出都有过渡效果
- 给hover状态设置，鼠标移入右过渡效果，移出没有过渡效果

<head>
    <style>
        /* 过渡配合hover使用,谁变化谁加过渡属性 */
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 宽度200，悬停的时会宽度600，花费1秒钟 */
            /* transition: width 1s,background-color 2s; */

            /* 如果变化的属性多，直接写all，表示所有 */
            transition: all 1s;
        }

        .box:hover {
            width: 600px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>