很酷的页面布局框架
2012-03-12 22:34 AndrewCja 阅读(5808) 评论(15) 编辑 收藏 举报建高楼大厦时,我们总是先用钢筋水泥搭好骨架,然后再加砖添瓦,布置每套房屋。编写一个网页也是这样,须先将布局框架搭好稳固,之后才能游刃有余。本博文阐述如何实现了两栏布局(main栏和sub栏),三栏布局(main栏、sub栏和extra栏),以及布局中各栏的排列顺序。
本示例布局框架具有以下特性:
-
跨浏览器:兼容IE6。
-
稳固性:布局稳固,不受内容的影响。
-
有利于seo:从代码角度,main栏处于sub栏和extra栏之前。
-
宽度自适应:main栏宽度随容器的宽度变化而变化。
-
可扩展性:每种布局的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,本示例代码并非原创,而是从友商网站部的黄建伦帅哥那里偷师而来。从他那里学了不少,感激不尽!: )
粘出源码如下:
<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:关于页面布局,还有最简单的实现方案,请阅读我的另一篇文章:自适应两栏布局的最简实现。