大家要的HTML布局技巧：如何规范搭建网页架构？

单就深刻了解布局规范都足够说上一个月的，今天我就不论大范围，挑选小米网站首页的部分区块布局来说解吧！

下面是小米官网的首页，不少人一看到这样的网页就傻眼，不知道咋弄，要么就随性布局，要么就干看着，其实遇到问题首先一点就是不要慌，先分析，将你认为难的问题拆分红多个问题区块，还解决不了就再拆分，直到变成能解决的小问题，一个个解决那些小问题最终大问题也就搞定了。我们布局网页前也是同样套路，先分析总体的架构，画出布局图将大块拆分为小块，这样会更加直观看到网页的布局结构。我大体上用线框将网页内容划分为四个区块：顶部导航条区域topnav（蓝色线框）、头部分类导航区域header（绿色线框），主体内容区域main（紫色线框）、网页底部信息区域foot（橘色线框）。

（注意：在初学不知道如何布局时建议使用画图工具作辅助分析。且并不是只有这一种区块划分方式，布局有不少种，我只从其中挑一种来写，讲不完=_=||）

这里我是按照总体网页的内容进行区块划分的：（每一个线框都为一个标签盒子）

• topnav（顶部导航区域）：从总体布局来看，topnav展现的内容都是小米网站下全部类别的子产品导航，而小米网站的首页主题是商城（直接展现电子类产品），它跟主题不符，因此这块区域单独划分出来。总体区块使用nav标签，考虑兼容性的话就使用div标签。
• header（头部分类信息导航区域）：这块区域主要包含不一样商品的分类导航和其余的服务导航，和主题也不太相符。轮播和轮播下方图片由于位置缘由，打开该网页第一眼看见的就是这部分区块，即使其中也包含商品，但更多的是具备广告位的性质，这里就单独划分出header区块。总体区块使用header标签，考虑兼容性的话就使用div标签。
• main(主体内容区域)：小米首页下小米商城的主题内容区域，也是总体网页面积最广的区块（实在不知道定主体内容区块时也能够根据面积比重来划分，最大的那块必定是主题中心），布局的重复性很高。总体区块使用main标签，考虑兼容性的话就使用div标签。
• footer（网页底部信息区域）：这部分几乎没啥好说的，展现的都是网站特点、网站信息，也单独划分一个块。总体区块使用footer标签，考虑兼容性的话就使用div标签。

代码以下：（考虑兼容IE）

<div id="pagewrap">
    <div id="page-topnav"></div> <!--导航区域-->
    <div id="page-header"></div> <!--头部分类信息导航区域-->
    <div id="page-main"></div> <!--主体内容区域-->
    <div id="page-footer"></div> <!--网页底部信息区域-->
</div>

这样我们就将网页划分为四大块了，看起来难度是否是比以前要小一点了呢？那下一步就是将各个区块看作单个的总体，对它进行分析再拆分。

topnav布局分析

• 红色线框：顶部导航栏区域（）
• 黄色线框：内容盒子
• 蓝绿色线框：左右两块列表区域
  以下布局图所示，顶部导航栏区域中，内容盒子宽度在1226px，水平居中，其内部又分为左右两块列表区域和一个div盒子（购物车），都包含着文字连接。

对应标签结构代码：

<div id="page-topnav">
    <div class="container">
        <ul class="topbar">
            <li><a href="#">小米商城</a></li>
            <li><a href="#">小米商城</a></li>
            <li><a href="#">小米商城</a></li>
            <li><a href="#">小米商城</a></li>
            <li><a href="#">小米商城</a></li>
            <li><a href="#">小米商城</a></li>
            <li><a href="#">小米商城</a></li>
            <li><a href="#">小米商城</a></li>
            <li><a href="#">小米商城</a></li>
            <li><a href="#">小米商城</a></li>
            <li><a href="#">小米商城</a></li>
            <li><a href="#">小米商城</a></li>
        </ul>
        <ul class="info">
            <li><a href="#">登陆</a></li>
            <li><a href="#">登陆</a></li>
            <li><a href="#">登陆</a></li>
        </ul>
        <div class="cart">
            <a href="#">购物车</a>
        </div>
    </div>
</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高度不固定。因此当前场景下推荐第一种方式

--------临时有事，明天接着补，若是对文章有疑问或基础学习上有问题能够和我交流----