【讲义】第11课:CSS 的使用

直播讲义

(方方) #1

预习

作业

我们的 CSS 学习将弱化概念,以动手为主

  1. 看完《学习CSS布局》教程
  2. 看完《CSS 3 Flex 布局 》视频
  3. 独立完成《最简单的页面
  4. 完成问卷

一个页面的诞生过程

理想中的情况:

  1. 产品经理理清需求(你需要反馈)
  2. 设计师画出设计稿(你需要反馈)
  3. 你拿到需求和设计稿,与产品经理、设计师和后台开发讨论可行性
  4. 与后台商定接口
  5. 开始开发
  6. 联调(前后端分离的噩梦)
  7. 测试
  8. 功能演示
  9. 部署上线
  10. 总结

实际情况:

需求不全,设计残缺,后端一问三不知,没人测试,上线之后才知道有 bug。

这就要求前端工程师对需求、用户体验、Photoshop、测试、部署,都有一些了解。

响应式页面的诞生

  1. 设计师给出 PC 设计稿和手机设计稿
  2. 前端开发者根据两套设计稿写代码

错误的步骤:

  1. 设计师给出 PC 设计稿
  2. 老板要求前端自己弄出手机页面
  3. 前端:WTF

这就要求前端工程师对一些没有常识的人,要进行批评教育

一个简单的页面

基本思想:

  1. 正交原则(写 HTML 的时候不考虑 CSS,写 CSS 的时候尽量不要改 HTML)
  2. 分模块(模块 == 豆腐块、代码块、页面块、随便什么块)
  3. 尽量不要写「死」宽高,除非迫不得已。

需求

  1. 一个企业官网页面
  2. PC、手机皆可展示

设计稿

后台

没有。(静态页面)

开始开发

  1. 看看有几个模块
  2. 依次完成每个模块

居中

  1. 内联元素如何居中
  2. 块级元素如何居中
  3. 绝对定位元素如何居中(绝对定位是什么)

疑问

我不会用 CSS 实现这个效果

  1. 看别人怎么实现得
  2. 抄过来运行
  3. 理解之,然后按照需求修改

CSS 的效果只能一个一个学吗

半年内是的,等你知道的效果足够多,就能自己想出一些效果了。

比如,在你知道「border可以实现三角形」之前,自己能想出来吗?
在你知道之后,还会忘记吗?

自己做过就学会了,没做过就学不会。

所以,你要抓住一切机会学新效果

  1. 看到任何一个网站有你不会的效果,就要学着做
  2. 订阅 Codrops、CSS Tricks
  3. 自己写一个 UI 套件

(方方) #2

(方方) #3