淘宝的页面布局中,最经典的应该是它的 【子列】 【主列】 【附加列】这三个概念。通过查看淘宝店铺页面的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
><
br
> <
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属性即可实现。