0基础学web----小鲜项目搭建（拓展）_零基础搭建web前端项目csdn-CSDN博客

本文链接：https://blog.csdn.net/QQ675396947/article/details/122262635

01-CSS精灵-作用

02-CSS精灵-使用

<!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>
        .one{
            width: 20px;
            height: 25px;
            background-color: black;
            background-image: url(./images/taobao.png);
            background-position: -2px 0px;

        }
        .two{
            margin-top: 20px;
            width: 24px;
            height: 20px;
            background-color:blue;
            background-image: url(./images/taobao.png);
            background-position: 0px -90px;

            
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>
</html>

03-背景图缩放

<!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>
        .box{
            width: 300px;
            height: 400px;
            background-color: blue;
            background-image: url(./images/1.jpg);
            background-repeat: no-repeat;
            /* background-size: 宽300px 高400px; */

            background-size: 300px 400px;

            /* background-size: 100%; */

            /*图片等比例拉满*/
            background-size: contain;

            /*图片把盒子拉满，不留空格*/
            /* background-size: cover; */

        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

background-size: contain; /*图片等比例拉满*/

background-size: cover; /*图片把盒子拉满，不留空格*/

04-盒子阴影

text-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>Document</title>
    <style>
         .text{
             text-shadow: 3px 6px 2px red;
         }
    </style>
</head>
<body>
    
    <div class="text"><h1>多喝热水啊</h1></div>
</body>
</html>

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>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: blue;

            /* box-shadow: 水平20px 垂直30px 模糊度5px 颜色red;*/
            box-shadow: 20px 30px 5px red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

05-过度

<!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>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            /*all所有属性进行过度*/
            transition: all  3s;
        }
        .box:hover{
            width: 600px;
            background-color: paleturquoise;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

鼠标悬停前

鼠标悬停后

06-骨架标签

07-SEO

<!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>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
    <meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。">
    <meta name="keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东">
</head>
<body>
    
</body>
</html>

08-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">
    <title>小鲜项目搭建</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
    
</body>
</html>