本文介绍了网页制作的基本结构，包括图片和样式的组织，以及如何使用精灵图来提高页面加载速度。此外，详细讲解了CSS中的背景图片大小、文字阴影、盒子阴影和过渡效果的使用，提升网页视觉效果和用户体验。同时，探讨了项目前置认知，如DOCTYPE声明、字符编码和SEO优化，强调了SEO三大标签（title、description、keywords）的重要性。
一、网页制作
根目录
图片文件夹：images
样式文件夹：CSS
首页：index.html
< link rel = " stylesheet " href = " ./CSS/index.css" >
二、项目样式补充
精灵图
场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图
优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度
精灵图的使用步骤
- 创建一个盒子，设置盒子的尺寸和小图尺寸相同
- 将精灵图设置为盒子的背景图片
- 修改背景图位置
背景图片大小
作用：设置背景图片的大小
语法：background-size：宽度 高度；
取值
background连写拓展
文字阴影
作用：给文字添加阴影效果，吸引用户注意
属性名：text-shadow
取值
盒子阴影
作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节
属性名：box-shadow
取值
过渡
作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验
属性名：transition
常见取值
注意点：
1. 过渡需要：默认状态 和 hover状态样式不同，才能有过渡效果
2. transition属性给需要过渡的元素本身加
3. transition属性设置在不同状态中，效果不同的
① 给默认状态设置，鼠标移入移出都有过渡效果
② 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果
三、项目前置认知
网站与网站的关系
骨架结构标签
DOCTYPE文档说明
<!DOCTYPE html>文档类型声明，告诉浏览器该网页的 HTML版本
注意点：DOCTYPE需要写在页面的第一行，不属于HTML标签
网页语言
字符编码（了解）
SEO三大标签
SEO（Search Engine Optimization）：搜索引擎优化
作用：让网站在搜索引擎上的排名靠前
提升SEO的常见方法：
1. 竞价排名
2. 将网页制作成html后缀
3. 标签语义化（在合适的地方使用合适的标签）
SEO三大标签
title：网页标题标签
description：网页描述标签
keywords：网页关键词标签
ico图标设置
版心
CSS书写顺序
四、项目结构搭建
文件和目录准备
完成后的目录及文件结构
基础公共样式
场景：一般项目开始前，首先会 去除掉浏览器默认样式，设置为 当前项目需要的初始化样式
作用：防止不同浏览器中标签默认样式不同的影响，统一不同浏览器的默认显示效果，方便后续项目开发
index页面骨架
2022/9/9 Caroline finish
扫一扫
3767
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
