代码改变世界

很酷的页面布局框架

2012-03-12 22:34  AndrewCja  阅读(5799)  评论(15)  编辑  收藏  举报

建高楼大厦时，我们总是先用钢筋水泥搭好骨架，然后再加砖添瓦，布置每套房屋。编写一个网页也是这样，须先将布局框架搭好稳固，之后才能游刃有余。本博文阐述如何实现了两栏布局（main栏和sub栏），三栏布局（main栏、sub栏和extra栏），以及布局中各栏的排列顺序。

本示例布局框架具有以下特性：

  1. 跨浏览器：兼容IE6。
  2. 稳固性：布局稳固，不受内容的影响。
  3. 有利于seo：从代码角度，main栏处于sub栏和extra栏之前。
  4. 宽度自适应：main栏宽度随容器的宽度变化而变化。
  5. 可扩展性：每种布局的html代码都相同，通过css代码渲染出不同的排列。

两栏布局以及栏的排列，效果如下图所示：

 

三栏布局以及栏的排列，效果如下图所示：

 

上边列出的1点和2点就不必多费口舌了，那是布局框架的必然要求。: )

要理解第3点首先要有些seo的知识。seo的首要原则是内容为王，最原创的东西最受搜索引擎青睐。而网页中最原创的内容（比如一篇文章）就放在main栏，sub栏和extra栏放不同页面共用的链接或者广告。从代码角度，main栏内容处于其他栏内容之前，更有利于搜索引擎收录。

对于第4点——main栏宽度自适应，您可以改变#container选择符的width属性值，然后在浏览器中查看效果。补充说明一下，上图的sub230表示sub栏的宽度固定为230像素，extra160表示extra栏的宽度固定为160像素。

对于第5点——可扩展性，要说明的是，每种布局的html代码并非完全相同，有一点不同是选择符命名空间，这很酷很重点。两栏布局中命名空间用.m-s230和.s230-m，三栏布局中用.e160-m-s230和.s230-m-e160。名称指明了栏的顺序和宽度，.m-s230表示main栏在左边，sub栏在右边；相反.s230-m表sub栏在左边，main栏在右边。您能推出.e160-m-s230和.s230-m-e160各表示什么。: )

PS：这里且用命名空间这个术语，在面向对象编程中，它用于区分同名的类，这里用于区分同名选择符。

最后还是老实confess，本示例代码并非原创，而是从友商网站部的黄建伦帅哥那里偷师而来。从他那里学了不少，感激不尽！: )

粘出源码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
.main_wrap{background-color:#DDD;}
.col_sub{background-color:#CCC;}
.col_extra{background-color:#EAEAEA;}

#container{width:960px;margin:30px auto 0;}
.layout{zoom:1;}
.layout:after{clear:both;content:".";display:block;height:0;visibility:hidden;}
.col_main{float:left;width:100%;min-height:1px;}
.col_sub,.col_extra{float:left;}
</style>
</head>
<body>
<style type="text/css">
.m-s230 .main_wrap{margin-right:240px;}
.m-s230 .col_sub{width:230px;margin-left:-230px;}
</style>
<div id="container">
    <div class="layout m-s230">
        <div class="col_main">
            <div class="main_wrap">
                main
            </div>
        </div>
        <div class="col_sub">
            sub230
        </div>
    </div>
</div>
<style type="text/css">
.s230-m .main_wrap{margin-left:240px;}
.s230-m .col_sub{width:230px;margin-left:-100%;}
</style>
<div id="container">
    <div class="layout s230-m">
        <div class="col_main">
            <div class="main_wrap">
                main
            </div>
        </div>
        <div class="col_sub">
            sub230
        </div>
    </div>
</div>
<style type="text/css">
.e160-m-s230 .main_wrap{margin-left:170px;margin-right:240px;}
.e160-m-s230 .col_sub{width:230px;margin-left:-230px;}
.e160-m-s230 .col_extra{width:160px;margin-left:-100%;}
</style>
<div id="container">
    <div class="layout e160-m-s230">
        <div class="col_main">
            <div class="main_wrap">
                main
            </div>
        </div>
        <div class="col_sub">
            sub230
        </div>
        <div class="col_extra">
            extra160
        </div>    
    </div>
</div>
<style type="text/css">
.s230-m-e160 .main_wrap{margin-left:240px;margin-right:170px;}
.s230-m-e160 .col_sub{width:230px;margin-left:-100%;}
.s230-m-e160 .col_extra{width:160px;margin-left:-160px;}
</style>
<div id="container">
    <div class="layout s230-m-e160">
        <div class="col_main">
            <div class="main_wrap">
                main
            </div>
        </div>
        <div class="col_sub">
            sub230
        </div>
        <div class="col_extra">
            extra160
        </div>    
    </div>
</div>
</body>
</html>

 

PS：关于页面布局，还有最简单的实现方案，请阅读我的另一篇文章：自适应两栏布局的最简实现。