静态页面串讲：京东

目录

1. 新人的常见错误
2. 京东首页仿制
3. 作业评奖（如有时间）
4. 问答

新人的

常见错误

1. 拼写错误
2. 拼写错误
3. 拼写错误
4. 全角符号
5. 不看开发者工具

学习HTML/CSS时

京东首页仿制

Preview

需要用到的知识

1. HTML 语义化
2. CSS 各种布局
3. CSS 各种属性
4. 前端解构
5. jQuery
6. 开一点点脑洞

原则

1. 正交
   1. HTML / CSS / JS 尽量不互相依赖
2. 分治
   1. 把一个复杂的问题分成两个或更多的相同或相似的子问题
   2. 直到最后子问题可以简单的直接求解
   3. 原问题的解即子问题的解的合并。

教程

1. 从无到有
2. 骨架（Backbone）
3. 分治
   1. 用户所在地
   2. 一个导航
   3. logo
   4. 搜索和一些推荐的关键词
   5. 购物车按钮，以及几个 icon（图标）
   6. 商品分类
   7. 业务分类
   8. 大图广告轮播
   9. 新闻
   10. 一些小工具、服务
   11. 五个图片

基本属性记不记得？Google it

垂直居中？Google "div verticel align"

文字溢出显示省略号？Google text overflow ellipsis

CSS 的技巧怎么学

—— 不要等人教你

任何样式都能用三种以上的 CSS 实现方案。

你有没有挑战自己？

CSS 怎么提升？

—— 不要只学皮毛

CSS实现垂直居中的5种方法

Topbar

分治、正交

1. 所在地：http://js.jirengu.com/yahi/1/edit?html,css,output
2. 导航：http://js.jirengu.com/puye/1/edit?html,css,output
3. 所在地+导航：http://js.jirengu.com/wef/2/edit

Logo + 搜索 + 按钮

分治、正交

知识点：

1. 如何让不同高度的块分布在同一行

1. 方案一：确定最高的元素，其他随意
2. 方案二：清除浮动

http://js.jirengu.com/heqi/1/edit?html,css,output

商品分类

分治、正交

知识点：

1. jQuery 操作 DOM

2. 定位

http://js.jirengu.com/xoma/1/edit?html,css,output

http://js.jirengu.com/tiri/1/edit?html,js,output

大图轮播

分治、正交

http://js.jirengu.com/sasu/1/edit?html,css,js

知识点：

1. 使用别人的 jQuery 插件
   1. Google
   2. 看 GitHub star 数
   3. 看文档
   4. 抄代码
2. 我不了解这个东西，但是我会用这个东西（非常重要的能力）

新闻+小工具

分治、正交

汇总+重构