第一次仿写小米官方首页总结

自学前端有一个多月了，学完HTML+CSS基础部分也有一些时间了，于是就想着通过仿制网站来掌握和提高基础技能。
仿制页面是一种不错的学习方式，通过敲代码就能发现很多存在的问题，加以改进，并总结成自己的东西。
这次选的网站是小米官网首页，它的整体布局非常工整，标准流+浮动就可以解决大部分布局了，挺喜欢这种风格的，比较适合练手。
总共花了两天半的时间，学习的时候看到视频里老师几分钟就可以制作一个模块，什么时候也可以达到这样的水平呀。

目标

    和原来的页面一模一样，不会写的HTML标签和CSS属性可以查阅文档和资料。

技能水平

    HTML5+CSS3基本布局，不涉及JavaScript的知识（基础布局掌握后，加上JS再重写一遍）。

心得

1. 加深了一些HTML标签语义的理解，用的比较多的div标签、a链接标签、列表标签、标题和段落标签，span、i 等内联标签也有用到，表单标签和表格标签这次用的不是很多。
2. CSS样式属性也是主要的一块，格式的书写、选择器的使用、各属性的掌握程度和书写顺序也值得注意，这都关乎写出来的代码是否优雅。
3. 盒子模型、定位、浮动、伪元素选择器就用的比较多了，使用起来也得心应手。
4. 还有字体图标，不过精灵图用到的不多。
5. 这次在仿制小米首页的时候，体会更深的是开发人员对于CSS的三大特性（层叠、继承、优先级）的使用，这一块我还可以多深挖一下，可以减少很多不必要的类，类名多了找起来很麻烦的说。
6. 并集选择器，这个在小米官网是有使用的，而且帮助特别大，这里也是感悟深的一点，虽然也使用过，但是怎么用好这个还是得花点心思。
7. 英文单词，因为要定义类名，就去查了相关的单词并记了下来，以后也用的到。

待改进的地方

1. 各个模块的整体布局，这是第一次主动去布局一个页面，然后和官方的布局对比，不管是整体还是局部模块，就发现有划分不合理的地方。
2. 有些 li 是有加阴影的，但是为了布局就给 ul 的父标签添加了overflow：hidden；属性，导致部分阴影也被隐藏了，应该在布局上调整一下，预留足够的空间。
3. 关于类选择器，有些重复模块是有相同的样式，因此只定义一个类即可，如果有个别属性有区别，可以利用CSS的层叠性将其覆盖，当然还要注意它的权重。
4. HTML标签和属性还需要更熟练些。
5. 敲代码前的分析很重要，把一个模块的大体布局分析清楚，可以节省很多时间，避免乱了节奏。

放上两张完成后代码图，分别是HTML和CSS的总代码量，下一次看能不能缩减一下，让代码更优雅


想少吃点社会的苦，那就多吃点学习的苦咯，学习是很公平的，只要付出就会有结果。