CSS布局之--淘宝双飞翼布局

▼魔方 西西 提交于 2020-02-09 18:05:04

淘宝的页面布局中,最经典的应该是它的  【子列】  【主列】 【附加列】这三个概念。通过查看淘宝店铺页面的DOM结构及其CSS可以发现:淘宝使用的左中右三列布局采用的方式与我们平常有很大差别。一般我们是下面这种做法:

<div class="sub">子列</div>
<div class="main">主列</div>
<div class="extra">附加列</div>

然后,对于sub    main   extra 分别设置宽度为190   550   190及float:left,并调好边距。这种做法,我相信会一点CSS的都已经知道了。它的特点是:页面在被浏览器解析时,按照子   主    附加的顺序进行加载。

如果仔细看淘宝店铺的DOM结构发现,淘宝在DOM中是按主列   子列     扩展列的顺序书写的,此时网页被浏览器解析时,按照主    子    附加的顺序进行加载 —— 也就是我们常说的”重要的内容先加载”。这种结构会更好一些。它的结构大概如下:

<div class="grid-s5m0e5">
  <div class="col-main">我是主列</div>
  <div class="col-sub">我是子列</div>  <div class="col-extra">我是附加列</div>
</div>

以上DOM,grid-s5m0e5是一个布局框,然后其中分包含了col-main     col-sub     col-extra,即主列    子列     附加列三栏,它们分别所占的位置是页面的“左   中   右”部分。现在的问题是“在不改变DOM结构的情况下如何让col-main展示在中间呢?”。接下来,轮到CSS上场了。。。

.grid-s5m0e5 { width:100%;}
.grid-s5m0e5 .col-main { float:left; width:100%; min-height:30px; background:#000; }
.col-sub { float:left; width:190px; min-height:30px; background:#f00; margin-left:-100%; }
.col-extra { float:left; width:190px; min-height:30px; background:#00f; margin-left:-190px; }

下面逐行分析一下:

第1行.grid-s5m0e5 是一个布局框的名称,我们为其定义了宽度100%(在IE6一不定义100%时,有点小问题,亲们自己可以一试)

第2行.col-main 【主列】:浮动左侧,宽度100%(宽度全让它给占了,左右两侧的层该怎么办?)

第3行.col-sub 【子列】:浮动左侧,宽度190,左边界为-100%(此处是关键:浮动情况下,负边界值会导致DIV上移,而使用-100%可以确实它移动到最左侧。)

第4行.col-extra 【附加列】:左浮动,宽度190,左边界为-190px(道理同上,注意的是,负左边界一定要大于或等于该DIV的宽度,才能靠到上一行去)

 

能过上面的CSS设置之后,网页的呈现基本上已经是【子】【主】【附加】的排列了。貌似完成了,可是别高兴得太早,,,DOM中有一个“我是主列”的文字怎么没有了?再次经过DOM的分析发现,原来被.col-sub给挡住了。那么,现在的问题是:【子列】【附加列】的位置对了,但是【主列】会被子列和附加列给挡住,如何正确的给【主列】定位呢?下面是淘宝的做法:

1、DOM结构的改变:在.col-main下再次添加一个 .main-wrap【这就是淘宝的布局中col-main下有一个main-wrap,而col-sub下却没有sub-wrap的原因,我猜的^_^】

2、利用CSS调整.main-wrap的位置。【这里很简单,就是把左右被挡住的部分,设置为main-wrap的左   右边界即可】

经过以上两步骤后,DOM结构如下:

<div class="grid-s5m0e5">
    <div class="col-main">
        <div class="main-wrap">
            我是主列,出来吧!
        </div>
    </div>
    <div class="col-sub">我是子列</div>
    <div class="col-extra">我是附加列</div>
</div>

CSS如下:

.grid-s5m0e5 { width:100%; margin-right:auto; margin-left:auto; }
.grid-s5m0e5 .col-main { float:left; width:100%; min-height:30px; background:#000; }
.grid-s5m0e5 .col-main .main-wrap {
    margin-left:200px;  /*与col-sub产生10像素距离*/
    margin-right:200px; /*与col-extra产生10像素距离*/
    background:#0f0;
    min-height:30px;
}
.col-sub { float:left; width:190px; min-height:30px; background:#f00; margin-left:-100%; }
.col-extra { float:left; width:190px; min-height:30px; background:#00f; margin-left:-190px; }

 

那么它最终实现的是一个怎样的布局呢?—— 左右190,中间自动伸缩并与左右保持10个像素的距离。

这种布局的好处

之一是:可以实现主要的内容先加载的优化;

那么第二个好处是:兼容目前所有的主流浏览器,包括IE6在内哦。

第三个好处是:不同的布局框,可以通过调整.col-sub、.col-extra、.col-main、.col-main .main-wrap的相关CSS属性即可实现。

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!