前端学习-HTML+CSS(8)

原创已于 2023-04-13 20:43:15 修改 · 205 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #学习 #html5

于 2023-03-17 17:19:29 首次发布

HTML/CSS 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了CSS中的精灵图技术以减少服务器请求，提升性能。详细讲解了如何设置背景图片大小，包括contain和cover两种模式。还提到了text-shadow和box-shadow属性用于创建文字和盒子阴影效果，以及transition属性实现元素的平滑过渡。此外，文章讨论了项目前置认知，包括HTML骨架结构、SEO优化策略以及项目结构搭建的初步步骤。

一、CSS样式补充

1.1 精灵图

多张小图片合并成一张大图片，这张大图片称之为精灵图

优点：减少服务器的发送次数，减轻服务器压力

步骤：

创建一个盒子，设置盒子尺寸和小图尺寸一致

将精灵图设置为盒子的背景图片

修改背景图的位置（background-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>
        .phone{
            display: inline-block;
            width: 18px;
            height: 24px;
            background-color: pink;
            background-image: url(./taobao.png);
            background-position: -3px 0;
        }
        .pig{
            display: inline-block;
            margin-left: 5px;
            width: 24px;
            height: 21px;
            background-color: pink;
            background-image: url(./taobao.png);
            background-position: 0 -89px;
        }

    </style>
</head>
<body>
    <span class="phone"></span>
    <span class="pig"></span>
</body>
</html>

1.2 背景图片大小

属性名：background-size

属性值：

数字+px	规定长款
百分比	相对于当前盒子自身的宽高百分比
contain	包含，将图片等比例缩放，直到不超出盒子的最大
cover	将图片等比例缩放直到填满整个盒子没有空白

<!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: 400px;
            height: 300px;
            background-color: pink;
            background-image: url(./1.jpg);
            background-repeat: no-repeat;
            /* background-size: 300px; */
            /* background-size: 50%; */

            /* 盒子的宽和高较小的那个可以适应图片的尺寸 */
            /* 此例中背景图变成300*300 */
            /* background-size: contain; */

            /* 盒子宽和高较大的 那个可以适应图片的尺寸 */
            /* 现在背景图变成400*400 */
            background-size: cover;
            
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

1.3 background属性连写

background: color image repeat position/size;

position和size只能写一个，另一个如果要写就单列出来再写

1.4 文字阴影

属性名：text-shadow

属性值：水平偏移值垂直偏移值模糊半径阴影颜色

1.5 盒子阴影

属性值：box-shadow

属性值：

1.6 过渡

让元素样式慢慢变化，提升交互体验，一般配合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>
        .box{
            height: 100px;
            width: 200px;
            color: skyblue;
            margin: 50px auto;
            border: 1px solid skyblue;
            line-height: 100px;
            text-align: center;
            transition: all 1s;
        }
        .box:hover{
            background-color: skyblue;
            color:white;
            border-radius: 50px;
        }
    </style>
</head>
<body>
    <div class="box">开始</div>
</body>
</html>

二、项目前置认知

2.1 骨架结构标签

<!-- 文档类型说明，告诉浏览器该网页的HTML版本 下面就是HTML5 -->
<!DOCTYPE html>
<!-- 标识网页使用的语言 zh-CN/en 中/英 -->
<html lang="en">
<head>
    <!-- 规定网页的字符编码 -->
    <!-- UTF-8 万国码 GB2312 6000+汉字 GBK 20000+汉字 -->
    <meta charset="UTF-8">
    <!-- 解决IE浏览器兼容 IE已经无了 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 宽度 = 设备宽度 移动端网页要用 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>