摘要：主体内容区域小米首页下小米商城的主题内容区域，也是整体网页面积最广的区块实在不知道定主体内容区块时也可以根据面积比重来划分，最大的那块一定是主题中心，布局的重复性很高。
单就深入了解布局规范都足够说上一个月的，今天我就不论大范围，挑选小米网站首页的部分区块布局来讲解吧！
下面是小米官网的首页，很多人一看到这样的网页就傻眼，不知道咋弄，要么就随性布局，要么就干看着，其实遇到问题首先一点就是不要慌，先分析，将你认为难的问题拆分成多个问题区块，还解决不了就再拆分，直到变成能解决的小问题，一个个解决那些小问题最终大问题也就搞定了。咱们布局网页前也是一样套路，先分析整体的架构，画出布局图将大块拆分为小块，这样会更加直观看到网页的布局结构。我大致上用线框将网页内容划分为四个区块：顶部导航条区域topnav（蓝色线框）、头部分类导航区域header（绿色线框），主体内容区域main（紫色线框）、网页底部信息区域foot（橘色线框）。
（注意：在初学不知道如何布局时建议使用画图工具做辅助分析。且并非只有这一种区块划分方式，布局有很多种，我只从其中挑一种来写，讲不完=_=||）
这里我是按照整体网页的内容进行区块划分的：（每个线框都为一个标签盒子）
topnav（顶部导航区域）：从整体布局来看，topnav展示的内容都是小米网站下所有类别的子产品导航，而小米网站的首页主题是商城（直接展示电子类产品），它跟主题不符，所以这块区域多带带划分出来。整体区块使用nav标签，考虑兼容性的话就使用div标签。
header（头部分类信息导航区域）：这块区域主要包含不同商品的分类导航和其他的服务导航，和主题也不太相符。轮播和轮播下方图片因为位置原因，打开该网页第一眼看见的就是这部分区块，即便其中也包含商品，但更多的是具有广告位的性质，这里就多带带划分出header区块。整体区块使用header标签，考虑兼容性的话就使用div标签。
main(主体内容区域)：小米首页下小米商城的主题内容区域，也是整体网页面积最广的区块（实在不知道定主体内容区块时也可以根据面积比重来划分，最大的那块一定是主题中心），布局的重复性很高。整体区块使用main标签，考虑兼容性的话就使用div标签。
footer（网页底部信息区域）：这部分几乎没啥好说的，展示的都是网站特色、网站信息，也多带带划分一个块。整体区块使用footer标签，考虑兼容性的话就使用div标签。
代码如下：（考虑兼容IE）
这样咱们就将网页划分为四大块了，看起来难度是不是比之前要小一点了呢？那下一步就是将各个区块看做单个的整体，对它进行分析再拆分。
topnav布局分析红色线框：顶部导航栏区域（）
黄色线框：内容盒子
蓝绿色线框：左右两块列表区域
如下布局图所示，顶部导航栏区域中，内容盒子宽度在1226px，水平居中，其内部又分为左右两块列表区域和一个div盒子（购物车），都包含着文字链接。
对应标签结构代码：
标签搭建好结构还需要搭配css来使用，这里顺便把相关的css技巧我也讲几个
.container（黄色线框）本身就是一个块级元素，不改变元素类型的前提下实现水平居中有以下几种方式：
第一种：（当前场景下推荐使用这种居中方式）
page-topnav .container{
width:1226px; margin：0 auto；
}
使用margin：auto实现自动计算达到水平居中，注意这种居中方式作用对象必须是块级标签，且有固定的宽度才可以实现
第二种：
page-topnav .container{
position: relative; left: 50%; width: 1226px; margin-left: -613px;
}
使用相对定位，通过设置left让.container向右移动50%的相对距离，再利用负左外边距向左移动自身宽度的一半距离，达到水平居中的效果。参考下图：
两个左右ul分别添加左浮动float:left;和右浮动float:right;就能实现左右对齐
li中的文本实现水平垂直居中的几种方式：
第一种：
.container .topbar li{
height: 40px; /*盒子高度*/ line-height: 40px; /*行高*/ font-size: 14px; /*文字大小*/ text-align: center; /*盒子内的文本水平居中*/
}
将文本的行高与li盒子高度设为一致，达到文本垂直居中效果。
第二种：
.container .topbar li{
padding: 10px;
}
给li添加内边距，实现文本上下左右居中效果，但会造成li高度不固定。所以当前场景下推荐第一种方式
--------临时有事，明天接着补，如果对文章有疑问或基础学习上有问题可以和我交流----
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/117505.html
摘要：主体内容区域小米首页下小米商城的主题内容区域，也是整体网页面积最广的区块实在不知道定主体内容区块时也可以根据面积比重来划分，最大的那块一定是主题中心，布局的重复性很高。 单就深入了解布局规范都足够说上一个月的，今天我就不论大范围，挑选小米网站首页的部分区块布局来讲解吧！ 下面是小米官网的首页，很多人一看到这样的网页就傻眼，不知道咋弄，要么就随性布局，要么就干看着，其实遇到问题首先一点就...
摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践 本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...
摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践 本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...
摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践 本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...
摘要：我们都知道您是国内知名的专家，是什么样的情结使得您愿意将魔法作为自己的别名大家好，很荣幸接受图灵的专访。在这一堆书里，有一套上下册教程叫作谈是由图灵引进的哦。从偶像那里得来一个名字，很荣幸而且这其中也有图灵的功劳，也是缘份。 非商业转载请注明作译者、出处，并保留本文的原始链接：http://www.ituring.com.cn/article/216538 showImg(https:...
阅读 2729·2021-09-28 09:42
阅读 3163·2021-09-22 15:21
阅读 997·2021-07-29 13:50
阅读 3224·2019-08-30 15:56
阅读 3179·2019-08-30 15:54
阅读 1104·2019-08-30 13:12
阅读 1032·2019-08-29 17:03
阅读 1064·2019-08-29 10:59
