一、项目样式补充
1、精灵图
- 项目中将多张小图片，合成一张大图片，这张大图片称之为精灵图
- 优点：减少服务器发送次数，减轻服务器压力，提高页面加载速度
- 精灵图的使用：
a、创建一个盒子，设置盒子尺寸与小图尺寸相同
b、将精灵图设置为盒子的背景图片
c、修改背景图位置background-position: x y;
2、背景图片大小
background-size: 宽度 高度;- 取值：
| 取值 | 场景 |
|---|
| 数字+px | 简单方便，常用 |
| 百分比 | 相当于当前盒子自身的宽高百分比 |
| contain | 包含，等比例缩放，直到不会超过盒子的最大 |
| cover | 覆盖，等比例缩放，直到刚好填满整个盒子没有空白 |
- 完整连写：
background:color image repeat position/size background与background-size同时设置时，注意覆盖问题
3、盒子阴影
- 例：
box-shadow：5px 5px 5px 5px red inset - 取值：
| 参数 | 场景 |
|---|
h-shadow | 必须，水平偏移量，允许负值 |
v-shadow | 必须，垂直偏移量，允许负值 |
blur | 可选，模糊度 |
spread | 可选，阴影扩大 |
color | 可选，阴影颜色 |
inset | 可选，将阴影改为内部阴影 |
4、过渡
- 让元素样式慢慢变化，常配合hover使用，增强网页交互体验
transition- 常见取值：
| 参数 | 取值 |
|---|
| 过渡的属性 | all：所有能过渡的属性都过渡、 具体属性名：width：只有width有过渡 |
| 过渡的时长 | 数字+s（秒） |
- 默认状态与hover状态样式不同，才能有过渡效果
- transition属性给需要过渡的元素本身加
- 给默认状态设置，鼠标移入溢出都有过渡效果
- 给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>
.box{
width: 200px;
height: 200px;
background-color: rgb(174, 223, 159);
transition: all 1s;
}
.box:hover{
width: 400px;
height: 400px;
background-color: rgb(79, 184, 48);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
二、项目前置认知
1、骨架结构标签
<!DOCTYPE html>文档类型声明，告诉浏览器该网页的HTML版本<html lang="en">标识网页使用的语言，常见语言：zh-CN简体中文 / en英文，作用：搜索引擎归类+浏览器翻译<meta charset="UTF-8">标识网页使用的字符编码
2、SEO三大标签
- SEO：搜索引擎优化
- 作用：让网站在搜索引擎上的排名靠前
- 提升SEO的方法：
a、竞价排名
b、将网页制作成html后缀
c、标签语义化（在合适的地方使用合适的标签）
d、······ - SEO三大标签：
title 网页标题标签、description 网页描述标签、keywords 网页关键字标签
<title>网页标题</title>
<meta name="description" content="网页描述">
<meta name="keywords" content="网页关键字">
3、.ico图标
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
扫一扫
95
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
