仿写小米官网 简单的HTML+CSS练习

说明：

1.由于本人只学习了部分html和css，所以本文没有涉及到js部分。
2.本文并没有实现小米官网首页的全部功能，还存在很多问题。如果以后技能提升，会继续更新实现未完成的功能。
3.这个练习会为分几篇文章介绍从最初分析到最后实现的代码，如果发现问题或者有更好的方法请联系本人探讨更正。

目标：仿写小米官网的部分首页，小米官方首页如下图：

总体分析：观察小米官网的整体结构，发现整体框架如下：

注意：
1.产品导航栏在网页中只在中间部分区域显示内容，但设计布局占整个宽度。
2.中间部分轮播图大小占中间部分整体区域（包括左边导航栏部分）。
3.中间部分旁边的空白区域宽度相等，初步想法用 margin-auto 实现。
4.图中未画出部分为右边的工具导航栏，这部分固定在页面右侧，在首页中位置固定。

根据上述分析，将整个页面分为几部分来完成（我将会在后面的文章中逐步介绍）：
1.顶部导航栏 见博文《仿写小米网站首页 顶部导航栏部分》
2.产品导航栏 见博文
《仿写小米网站首页 产品导航栏》
3.中间部分 见博文
《仿写小米网站首页 中间部分》
4.底部 见博文
《仿写小米网站首页 底部》
5.右边工具导航栏
《仿写小米网站首页 右边工具导航栏》
完成后效果如下图：