补充
# 精灵图
场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图
优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度
例如：需要在网页中展示8张小图片
- 8张小图片分别发送 一> 发送8次
- 合成一张精灵图发送 → 发送1次
精灵图的使用步骤:
- 创建一个盒子，设置盒子的尺寸和小图尺寸相同
- 将精灵图设置为盒子的背景图片
- 修改背景图位置: 通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y
大图片：
样式：
<style>
span{
display:inline-block;
width:18px;
height:24px;
background-color:pink;
background-image:url(./images/taobao.png);
/*背景图位置属性：改变背景图的位置*/
/*水平方向位置垂直方向的位置*/
/*想要向左侧移动图片，位置取负数；*/
background-position:-3px θ;
}
b{
display:block;
width:25px;
height:21px;
background-color:green;
background-image: url(./images/taobao.png);
/*设置大图片上的小图片位置*/
background-position:0 90px;
}
</style>
<body>
<!--<img src="./images/taobao.png"alt=""> -->
<!--精灵图的标签都用行内标签span,b,i -->
<span></span>
<b></b>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
效果
# 背景图片大小/尺寸、缩放
作用：设置背景图片的大小
语法：background-size：宽度高度；
取值：
| 取值 | 场景 |
|---|---|
| 数字+px | 简单方便，常用 |
| 百分比 | 相对于当前盒子自身的宽高百分比 |
| contain | 包含，将背景图片等比例缩放，直到不会超出盒子的最大，图片的宽或者高跟盒子一样了，另外一个方向可能没有填充满 |
| cover | 覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白，图片的某个区域可能看不见 |
background-size: 300px;
background-size: 50%;
/*如果图的宽或高与盒子的尺寸相同了，另一个方向停止缩放导致盒子可能有留白*/
background-size: contain;
/*保证宽或高和盒子尺寸完全相同，导致图片显示不全*/
background-size: cover;
/*工作中，图的比例和盒子的比例都是相同的，contain和cover效果完全相同；*/
1
2
3
4
5
6
7
2
3
4
5
6
7
# background连写拓展
完整连写：background:color image repeatposition/size;
注意点：background-size和background连写同时设置时，需要注意覆盖问题
解决：要么单独的样式写连写的下面；要么单独的样式写在连写的里面
# 文字阴影
# 盒子阴影
阴影作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节
属性名：box-shadow
取值：
| 参数 | 作用 |
|---|---|
| h-shadow | 必须，水平偏移量。允许负值 |
| v-shadow | 必须，垂直偏移量。允许负值 |
| blur | 可选，模糊度 |
| spread | 可选，阴影扩大 |
| color | 可选，阴影颜色 |
| inset | 可选，将阴影改为内部阴影 |
<style>
.box{
width:200px;
height: 200px;
background-color:pink;
box-shadow:72px 89px 20px 10px green;
/* box-shadow:5px 10px 20px 10px green inset;*/
/*注意：外阴影，不能添加outset，添加了会导致属性报错*/
/*box-shadow:5px 10px 20px10px green outset;*/
</style>
<body>
<div class="box"></div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 过渡
场景：鼠标悬停时，动态变化
作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验
属性名：transition
常见取值：
| 参数 | 取值 |
|---|---|
| 过渡的属性 | all：所有能过渡的属性都过渡、具体属性名如：width：只有width有过渡 |
| 过渡的时长 | 数字+s（秒） |
注意点：
- 过渡需要：默认状态和hover状态样式不同，才能有过渡效果
- transition属性给需要过渡的元素本身加
- transition属性设置在不同状态中，效果不同的
- 给默认状态设置，鼠标移入移出都有过渡效果
- 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果
<style>
/*过渡配合hover使用，谁变化谁加过渡属性*/
.box{
width:200px;
height:200px;
background-color:pink;
/*宽度200，悬停的时候宽度600，花费1秒钟*/
/*transition:width 1s,background-color 2s;*/
/*如果变化的属性多，直接写all，表示所有*/
transition: all 1s;
}
.box:hover{
width:600px;
background-color:red;
}
</style>
<body>
<div class="box"></div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 骨架标签
DOCTYPE文档说明：<!DOCTYPE html>文档类型声明，告诉浏览器该网页的HTML版本
网页语言: <html lang="en"> 标识网页使用的语言。作用：搜索引擎归类+浏览器翻译；常见语言：zh-CN简体中文/en英文
字符编码（了解）：<meta charset="UTF-8"> 标识网页使用的字符编码。作用：保存和打开的字符编码需要统一设置，否则可能会出现乱码，常见字符编码：
- UTF-8：万国码，国际化的字符编码，收录了全球语言的文字
- GB2312: 6000+汉字
- GBK:20000+汉字
注意点：开发中统一使用UTF-8字符编码即可
<!-- ie(兼容性非常的差)/edge-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 宽度=设备宽度:移动端网页的时候要用 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
1
2
3
4
2
3
4
整体骨架
<!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, maximum-scale=1">
<title>Doc</title>
</head>
<body>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# SEO
SEO(（SearchEngineOptimization）：搜索引擎优化
作用：让网站在搜索引擎上的排名靠前
提升SEO的常见方法：
- 竞价排名: 带广告的
- 将网页制作成html后缀
- 标签语义化（在合适的地方使用合适的标签）
- .....
SEO三大标签
- title：网页标题标签
- description：网页描述标签 => 快捷键：
meta:desc - keywords：网页关键词标签 => 快捷键：
meta:kw
# favicon标题图标
场景：显示在标签页标题左侧的小图标，习惯使用.ico格式的图标
<link rel="shortcut icon" href="ico图标路径" type="image/x-icon">
1
上次更新: 2024/07/10, 18:38:04