光是深入了解布局规范就够谈上一个月了。今天不拘小节，选取小米官网首页的一些区块布局进行讲解！以下是小米官网首页。很多人看到这样的网页都傻眼了。他们不知道该怎么办。把认为难的问题分成多个问题块，再拆分，直到变成一个可以解决的小问题。把那些小问题一个一个解决，最后大问题就解决了。在我们布局网页之前，我们执行相同的例程。我们先分析一下整体结构，画出布局图，把大块拆成小块，这样可以更直观的看出网页的布局结构。我大致用线框把网页内容分成四块：顶部导航栏区topnav（蓝色线框）、头部分类导航区header（绿色线框）、主要内容区main（紫色线框）、信息网页底部的区域脚（橙色线框）。（注：初学者不会布局的时候建议使用画图工具辅助分析，而且分块的方式也不是唯一的，布局有很多种，我只选择其中一种来写，我看不完=_=||）这里我按照网页整体的内容来分块：（每个线框都是一个标签框）topnav（顶部导航区）：从整体布局的角度来看，内容topnav显示的都是小米网站下所有品类的子产品导航，而小米网站首页的主题是商城（直接展示电子产品），与主题不符，所以单独划分这个区域.整块使用nav标签，如果考虑兼容性，使用div标签。header（头部分类信息导航区）：该区主要包括不同商品的分类导航和其他服务导航，不太符合主题。由于轮播的位置和轮播下方的图片，这部分块是您打开页面时首先看到的。尽管它也包含商品，但它更像是一个广告空间。这里，头块被单独划分。.整体块使用header标签，如果考虑兼容性，使用div标签。main（主要内容区）：小米首页下的小米商城主题内容区，也是整个网页面积最大的块（确定主要内容的时候真的不知道块，也可以按面积比例划分，最大的块一定是主题中心），布局重复性高。整块使用main标签，如果考虑兼容性，使用div标签。Footer（网页底部的信息区）：这部分几乎没什么好说的。显示了网站的所有功能和信息，并且还分为一个单独的块。整块使用footer标签，如果考虑兼容性，使用div标签。代码如下：（考虑兼容IE）
