本次目标
基于前端技术（HTML+CSS3），完成小米官网的排版。
要求：
- 实现页面整体布局
- 实现页面动画效果
实现效果
首屏效果
二屏闪购效果
产品分类效果1
产品分类效果2
底部效果
课程适用对象
有一定前端基础。熟练掌握以下技能：
- 了解HTMl+CSS的基本标签和常用属性
- CSS布局定位
- CSS3高级选择器（伪类选择器、动态伪类）
- 掌握CSS3动画使用（过渡动画、关键帧动画）
- 阿里字体库使用
需求拆解
我们可以把整个大的需求拆分成以下几个部分实现：
- 网页的整体结构设计出来
- 按照布局的结构，从上往下排版，实现头部排版
- 实现对导航以下banner部分排版
- 对闪购效果进行排版
- 再往下各个产品分类展示比较类似，我们只需排出两种展示效果（往后的排版可以复制）
- 尾部排版
布局方式
1.静态布局 ：创建网页设计时经常用，网页上的所有元素的尺寸都使用px为单位。pc的网站都是静态（定宽度）布局。
2.流式布局：页面元素根据屏幕的分辨率进行调整，但是整体的布局不变。
3.自适应布局：为了不同屏幕分辨率定义布局。
4.响应式布局：随着CSS3中的媒体查询技术而出现的响应式设计的概念呢。
5.弹性布局：（rem/em布局）
