前端入门-第七天（写案例啦）

1.准备工作

1.1 工具和素材（认知）

1. 工具 = VSCode（代码）+ Chrome（调试）+ PxCook（文字+颜色+测量）

   • IT 职场更多会使用蓝湖、摹客，但是只支持在线团队开发，不适合授课；
   • PxCook 的使用与蓝湖、摩客基本一致，支持离线使用，更适合授课；
   • 更多的设计师开始使用 Sketch，不再使用 Photoshop。

2. 素材文件

   1. PSD 源文件：设计稿文件，可以用工具（PxCook）提取素材并测量；

   2. JPG 文件：页面效果图，对比最终完成的网页效果；

   3. 切图文件

      ：由设计师提供，其中：

      1. images：网站固定使用图片素材，例如：Logo、修饰图片等；
      2. uploads：非固定素材，例如：由后台定制的课程图片、宣传图片等。

1.4 页面布局整体思路

第 2 节课 / 5’41’’

1. 确认版心，居中可视区域，需要测量；
2. 确认行模块（父级标准流）和列模块（子级浮动）；
3. 从上到下逐一完成行模块，循环重复以下三步，直到页面完成：
   1. 分析确认每个列的大小（width & height），再确认列的位置 (margin & padding)；
   2. 制作 HTML 结构，浏览确认结构正确。

1.3 确定公共样式

/* 基础公共样式 */
* {
  margin: 0;
  padding: 0;
}
body {
  font: 14px/1.5 sans-serif;
  color: #050505;
  background-color: #f3f5f7;
}
li {
  list-style: none;
}
em,
i {
  font-style: normal;
}
a {
  text-decoration: none;
  color: #050505;
}
a:hover {
  color: #00a4ff;
}
img {
  vertical-align: middle;
}
button {
  cursor: pointer;
}
.clearfix:before,
.clearfix:after {
  content: '';
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

1.3 CSS 属性书写顺序(重要)

顺序	类别	属性
01	布局定位	display、position、float、clear、visibility、overflow
02	盒子模型和背景	width、height、margin、 padding、border、background
03	文本属性	color、font、text-decoration、 text-align、vertical-align、white-space、break-word
04	其他属性	content、cursor、border-radius、 box-shadow、text-shadow

1. CSS 的书写顺序会影响到浏览器的渲染性能，书写顺序记忆套路如下：
   1. 找位置 —— 标准流、浮动、定位
   2. 圈地盘 —— 宽高、间距、边框、背景
   3. 定内容 —— 文本、颜色、下划线、对齐、文本换行
   4. 做点缀 —— 鼠标形状、边框圆角、阴影、文本阴影

2. 学生在线案例制作注意点

第一步首先确定版心：

/* 版心 */
.w {
  width: 1200px;
  margin: 0 auto;
}

提醒：

每个模块要注释好。写完折叠起来
背景颜色 bcg 回车，左手中指 ddd 很顺手；

header 区域完成之前不要删除背景色，这样可以辅助调试。

在开发长页面的过程中，可以临时设置一下 body 的高度，通过滚动更方便调试页面底端的布局效果。

选中多行，按 alt + shift + ↑ / ↓ 可以复制多行。

在开发时应该养成清除浮动的习惯，而不要等到出问题再去考虑为什么。

不要给清除浮动添加到通栏上，因为通栏内部只有版心一个标准流的盒子。

有些相同的样式直接复制即可。

心情:
第一遍案例是跟着老师写的，听得还是很明白的，听完之后感觉自己可以写出来了。“不出我所料”，到自己写的时候磕磕绊绊，各种检查调试。不过终于还是写出来了，舍弃了中午睡觉的时间，从9点半写到下午4点，中间吃饭休了一会。其实还是有点挫败感的，老师带着写了一遍，从头自己写竟然还是用了这么长时间.写页面只看是不行的，还是要自己亲自去敲去构思，老师讲下来让我们少走了很多弯路，也学到了很多技巧。第一个案例成功写完，继续加油鸭！！！