HTML与CSS学习第8天-CSDN博客

本文链接：https://blog.csdn.net/qq_33938234/article/details/122822422

HTML与CSS学习第八天

在这里插入图片描述

1. 项目样式补充（精灵图，阴影效果，过渡效果）

1.1.1 精灵图

定义：项目中将多张小图片，合并为一张大图片，这张大图片称之为精灵图
优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度
图解

在这里插入图片描述

1.1.2 精灵图的使用

步骤：
1. 创建一个盒子
2. 通过pxcook量取小图片大小，设置盒子大小为小图片大小
3. 设置精灵图为盒子的背景图片
4. 通过pxcook量取小图片左上角坐标，分别取负值设置给盒子的background-position：x，y

示例

<!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>
        /* 清除默认边距 */
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            /* 设置宽高为小图片大小 */
            width: 24px;
            height: 24px;
            /* 设置背景图片为精灵图 */
            background-image: url("images/taobao.png");
            /* 设置位置为精灵图左上角坐标的负值 */
            background-position: 0 -264px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</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>
        /* 清除默认边距 */
        *{
            padding: 0;
            margin: 0;
        }

        div{
            width: 400px;
            height: 300px;
            /* 填充背景图片 */
            background-image: url("images/1.jpg");
            /* 不平铺 */
            background-repeat: no-repeat;
            /* 边框 */
            border: 1px solid #000;
            /* overflow: visible; */
            margin: 100px auto;
        }

        /* background-size */
        /* 1.宽度，高度 */

        
        div:nth-child(2){
            background-size: 400px 300px;
        }

        div:nth-child(3){
            /* 2.百分比，相对于div盒子宽高百分比 
            设置一个相对于宽高相同的百分比*/
            background-size: 100% 100%;
        }

        div:nth-child(4){
            /* contain 等比例缩放，放大到不超出盒子 */
            background-size: contain;
        }

        div:nth-child(5){
            /* 等比例缩放，填满整个盒子 */
            background-size: cover;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

效果图

在这里插入图片描述

1.3 背景图片连写扩展

完整连写：background:color image repeat position/size;
注意点：background-size和background连写同时设置时，需要注意覆盖问题
解决方法：
1. 单独的样式写在连写下方
2. 单独的样式写在连写里面

示例

<!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>
        /* 清除默认边距 */
        *{
            margin: 0;
            padding: 0;
        }

        .box{
            width: 400px;
            height: 300px;
            border: 1px solid #000;
            /* background属性连写形式 */
            background: url('images/1.jpg') no-repeat center center/400px 400px;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

效果图

在这里插入图片描述

1.4 文字阴影

作用：给文字添加阴影效果，吸引用户注意
属性名：text-shadow
属性值

参数作用
h-shadow 必须，水平偏移量，允许负值
v-shadow 必须，垂直偏移量，允许负值
blur 可选，模糊度
color 可选，阴影颜色
拓展
- 阴影可以叠加设置，每组阴影之间以逗号隔开

示例

<!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>
        /* 清除默认边距 */
        *{
            padding: 0;
            margin: 0;
        }

        .box{
            font-size: 100px;
            font-weight: 700;
            text-align: center;
            line-height: 300px;
            /* 设置阴影 */
            text-shadow: 10px 10px 6px green, 20px 20px 6px red;
        }
    </style>
</head>
<body>
    <div class="box">
        我是大傻逼
    </div>
</body>
</html>

效果图

在这里插入图片描述

注意点

可以使用调试工具调节阴影的各项数值，调好后在写入代码中

1.5 盒子阴影

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

属性值

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

示例

<!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>
        /* 清除默认边距 */
        *{
            margin: 0;
            padding: 0;
        }

        .box{
            width: 400px;
            height: 400px;
            background-color: pink;
            /* border: 100px solid #000; */
            /* 盒子阴影，自然包括盒子边框 */
            /* 设置盒子阴影属性 */
            box-shadow: 10px 10px 4px 100px green inset;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

效果图

在这里插入图片描述

1.6 过渡

作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验
属性名：transition
常见取值

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

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

注意点

过渡需要：默认状态和hover状态的样式不同，才有过渡效果
transition需要给要过渡的元素添加
transition属性设置在不同状态中，效果不同
1. 给默认状态设置，鼠标移入移出都有过渡
2. 给hover状态设置，鼠标移入有过渡，移出无过渡

示例

<!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>
        /* 清除默认边距 */
        *{
            margin: 0;
            padding: 0;
        }

        .box{
            width: 400px;
            height: 400px;
            background-color: pink;
            /* 设置过渡，可以多重设置 */
            transition: width 1s ,background-color 1s;
        }

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

    </div>
</body>
</html>

效果图

在这里插入图片描述

2. 项目前置认知

2.1 网页和网站

网站：提供特定服务的一组网页集合
网页：网站中的每一页

2.2 骨架结构标签

2.2.1 DOCTYPE文档说明

```
<!DOCTYPE html>
```
文档类型说明，告诉浏览器该网页的HTML版本

注意点

DOCTYPE需要写在页面的第一行，不属于HTML标签

2.2.2 网页语言

<html lang="en">         识别网页使用的语言

作用：搜索引擎归类+浏览器翻译
常见语言：zh-CN简体中文/en英文

2.2.3 字符编码

<meta charset="UTF-8">     识别网页使用的字符编码

作用：保存和打开的字符编码需要统一设置，否则可能会出现乱码
常见的字符编码：
1. UTF-8：万国码，国际化的字符编码，收录了全球语言的文字
2. GB2312：6000+汉字
3. GBK：20000+汉字

注意点

开发中统一使用UTF-8编码即可

2.3 SEO简介

定义：SEO（Search Engine Optimization）：搜索引擎优化
作用：让网站在搜索引擎上的排名靠前
提示SEO的常见方法：
1. 竞价排名
2. 将网页制作成HTML后缀
3. 标签语义化（在合适的地方使用合适的标签）
4. …

2.3.1 SEO三大标签

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

在这里插入图片描述

2.4 ico图标设置

场景：显示在标签页标题左侧的小图标，习惯用.ico格式的图标

代码：

    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">

效果图

在这里插入图片描述

2.5 版心的介绍

场景：把页面的主体内容约束在网页中间
作用：让不同大小的屏幕都能看到页面的主体内容

代码：

.container{
            width: 1240px;
            margin: 0 auto;
        }

版心的常用类名：container，wrapper，w

2.6 CSS属性书写顺序

不同的书写顺序会影响浏览器的渲染性能，推荐前端工程师使用专业的书写顺序习惯

顺序	类别	属性
1	布局属性	display，position，float，clear，visiblity，overflow
2	盒子模型+背景	width，height，margin，padding，border，background
3	文本内容属性	color，font，text-decoration，text-align，line-height
4	点缀属性	cursor，border-radius，text-shadow，box-shadow

注意点

开发中推荐多用类+后代，但不是层级越多越好，一个选择器中的类选择器个数推荐不要超过3个

3. 项目结构搭建

3.1 文件和目录准备

步骤

新建文件夹xtx-pc-client，在vscode中打开
- 在实际开发中，项目文件夹不建议使用中文
- 所有项目文件都保存在xtx-pc-client中
复制favicon.ico到xtx-pc-client目录下
- 一般习惯将ico图标放在项目根目录下
复制images和uploads文件夹到xtx-pc-client中
- images：存放网站固定使用的图片素材，如logo，样式修饰图片，精灵图…
- uploads：存放网站非固定使用的图片素材，如商品图片，宣传图片…
新建index.html在根目录
新建CSS文件夹保存网站的样式，并新建以下CSS文件
1. base.css:基础公共样式
2. common.css:该网站中多个网页相同模块的重复样式，如头部，尾部
3. index.css：首页样式

结构图

在这里插入图片描述

3.2 基础公共样式

场景：一般项目开始前，首先会去除掉浏览器默认样式，设置为当前项目需要的初始化样式
作用：防止不同浏览器中标签默认样式的不同，统一不同浏览器的默认显示效果，方便后续项目开发
代码

/* 去除常见标签默认的margin和padding */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
input{
    margin: 0;
    padding: 0;
}

/* 设置网页统一的字体大小，行高，字体系列相关属性 */
body{
    font:16px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei",
    "Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
}

/* 去除列表默认样式 */
ul,
ol{
    list-style: none;
}

/* 去除默认的倾斜效果 */
em,
i {
    font-style: normal;
}

/* 去除a标签默认下划线，并设置默认文字颜色 */
a {
    text-decoration: none;
    color: #333;
}

/* 设置img的垂直对齐方式为居中对齐，去除img默认下间隙 */
img {
    vertical-align: middle;
}

/* 去除input默认样式 */
input {
    border: none;
    outline: none;
    color: #333;
}

/* 左浮动 */
.fl {
    float: left;
}

/* 右浮动 */

.fr {
    float: right;
}

/* 双伪元素清除法 */
.clearfix::before,
.clearfix::after {
    content: '';
    display: table;
}

.clearfix::after{
    clear:both;
}

3.3 index页面骨架

<!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>
    <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
    <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    
</body>
</html>