学成在线案例制作

---

前言

文章参考B站黑马视频pink老师，以及https://github.com/JERRY-Z-J-R/I-love-you-3-thousand/tree/master/我爱你，不止三千遍/HTML CSS的参考

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、准备素材和工具

• 学成在线 PSD 源文件
• 开发工具 = PS（切图）+ VSCode（代码）+ Chrome（测试）

二、案例准备工作

我们本次采取结构与样式相分离思想：

1. 创建 study 目录文件夹（用于存放我们这个页面的相关内容）
2. study 目录内新建 images 文件夹，用于保存图片
3. 新建首页文件 index.html（以后我们网站首页统一规定为 index.html）
4. 新建 style.css 样式文件作为我们本次采用的外链样式表
5. 将样式引入到我们的 HTML 页面文件中
6. 样式表写入清除内外边距的样式，来检测样式表是否引入成功

三、CSS属性书写顺序

建议遵循以下顺序：

1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
2. 自身属性：width / height / margin / padding / bo