你们要的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%的相对距离,再利用负左外边距向左移动自身宽度的一半距离,达到水平居中的效果。参考下图:
      • clipboard.png
  • 两个左右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高度不固定。所以当前场景下推荐第一种方式

--------临时有事,明天接着补,如果对文章有疑问或基础学习上有问题可以和我交流----

阅读 591更新于 3月8日
推荐阅读
目录