学成在线案例
前言
文章参考B站黑马视频pink老师,以及https://github.com/JERRY-Z-J-R/I-love-you-3-thousand/tree/master/我爱你,不止三千遍/HTML CSS的参考
提示:以下是本篇文章正文内容,下面案例可供参考
一、准备素材和工具
- 学成在线
PSD
源文件 - 开发工具 =
PS
(切图)+VSCode
(代码)+Chrome
(测试)
二、案例准备工作
我们本次采取结构与样式相分离思想:
- 创建
study
目录文件夹(用于存放我们这个页面的相关内容) study
目录内新建images
文件夹,用于保存图片- 新建首页文件
index.html
(以后我们网站首页统一规定为index.html
) - 新建
style.css
样式文件作为我们本次采用的外链样式表 - 将样式引入到我们的
HTML
页面文件中 - 样式表写入清除内外边距的样式,来检测样式表是否引入成功
三、CSS属性书写顺序
建议遵循以下顺序:
- 布局定位属性:
display / position / float / clear / visibility / overflow
(建议display
第一个写,毕竟关系到模式) - 自身属性:<