代码改变世界

很酷的页面布局框架

2012-03-12 22:34  AndrewCja  阅读(5808)  评论(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:关于页面布局,还有最简单的实现方案,请阅读我的另一篇文章:自适应两栏布局的最简实现。