当前位置:首页 > css > 正文

代码分享:CSS布局之–淘宝双飞翼布局

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

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

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

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

下面逐行分析一下:

第1行.grid-s5m0e5 是一个布局框的名称,我们为其定义了宽度100%(在IE6一不定义100%时,有点小问题,亲们自己可以一试:楼主说明:
IE6的width: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结构如下:

CSS如下:

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

这种布局的好处

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

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

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

简单介绍下inline-block:
简单来说就是将对象呈递为内联对象,但是对象的内容作为块对象呈递。
在css中,inline-block:将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。display:inline-block
旁边的内联对象会被呈递在同一行内,允许空格

本文转自:http://www.cnblogs.com/langzs/archive/2013/01/27/taobaoshuangfeiyi.html#commentform

3 条评论

  1. 沙发2014-05-29 上午7:35
    博彩吉祥物

    I’ll right away take hold of your rss feed as I can’t in finding your e-mail subscription link or newsletter service. Do you have any? Kindly allow me recognize in order that I could subscribe. Thanks.

    • 2014-05-29 下午8:09
      admin

      I will tell u when I setup the rss.

发表评论

您必须 [ 登录 ] 才能发表留言!