小兔鲜儿装饰-黑马程序员-web前端零基础

目录

1.CSS精灵

精灵图使用步骤

2.背景图片大小background-size:宽度 高度；

3.盒子阴影box-shadow

4.过渡transition

5.SEO搜索引擎优化

---

1.CSS精灵

项目中将多张小图片，合成一张大图片，这张大图片就是精灵图

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

精灵图使用步骤

1. 创建一个盒子，设置盒子的尺寸和小图尺寸相同（精灵图的标签都用行内标签 span b i）
2. 将精灵图设置为盒子的背景图片
3. 修改背景图位置      background-position: -2px -3px;    

背景图位置属性：改变背景图的位置

水平方向位置  垂直方向位置

想要向左侧移动图片，位置取负数

2.背景图片大小background-size:宽度 高度；

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

工作中，图的比例和盒子的比例都是相同的，contain和cover的效果都一样

background：color image repeat position/size

3.盒子阴影box-shadow

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

4.过渡transition

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

transition属性设置在不同状态中，效果不同的

• 给默认状态设置，鼠标移入移出都有过渡效果
• 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果

    <style>
        /* 过渡配合hover使用，谁变化谁加过渡属性 */
        .box
        {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 宽度200，悬停时宽度变为600，花费一秒钟 */
            /* transition: width 1s,background-color 2s; */
            /* 设置多个属性时，要加英文的, */
            transition: all 3s;
        }
        .box:hover
        {
            width: 600px;
            background-color: rgb(215, 155, 155);
        }
    </style>

5.SEO搜索引擎优化

让网站在搜索引擎上的排名靠前

用了position: absolute;就不用写display: block;

绝对定位，盒子具备行内块特点