前端学习-HTML+CSS(8)

Michelle209

已于 2023-04-13 20:43:15 修改

阅读量102

点赞数

分类专栏： HTML/CSS 文章标签： css 学习 html5

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

本文链接：https://blog.csdn.net/Michelle209/article/details/129619219

版权

HTML/CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

一、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>

2.2 SEO搜索引擎优化

作用: 让网页在在搜索引擎的排名更靠前

提升SEO方法：

竞价排名
将网页制作成.html后缀
标签语义化

SEO三大标签

title 网页标题
description 网页描述
keywords 网页关键词

2.3 图标设置

写在标签页标题左侧的小图标

三、项目结构搭建

1.1 文件和目录准备

1. 新建项目文件夹 xtx-pc-client，在VScode中打开

在实际开发中，项目文件夹不建议使用中文
所有项目相关文件都保存在 xtx-pc-client 目录中

2. 复制 favicon.ico 到 xtx-pc-client 目录

3. 复制 images 和 uploads 目录到 xtx-pc-client 目录中

images ：存放网站固定使用的图片素材，如：logo、样式修饰图片… 等
uploads：存放网站非固定使用的图片素材，如：商品图片、宣传图片…等

4. 新建 index.html 在根目录

5. 新建 css 文件夹保存网站的样式，并新建以下CSS文件：

base.css：基础公共样式
common.css：该网站中多个网页相同模块的重复样式，如：头部、底部
index.css：首页样式

Michelle209

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端学习-HTML+CSS(8)

3. 复制 images 和 uploads 目录到 xtx-pc-client 目录中。2. 复制 favicon.ico 到 xtx-pc-client 目录。1. 新建项目文件夹 xtx-pc-client，在VScode中打开。position和size只能写一个，另一个如果要写就单列出来再写。属性值：水平偏移值垂直偏移值模糊半径阴影颜色。优点：减少服务器的发送次数，减轻服务器压力。属性名：background-size。属性名：text-shadow。属性值：box-shadow。
复制链接

扫一扫

专栏目录