CSS+Div网页布局中的结构与表现


在Web标准中一个很重要的概念就是强调页面的结构与表现分离。说的通俗一点就是XHTML中应该没有样式化的东西,而且Web在浏览器中除内容外都应该由CSS表现,这包括布局与其它样式。一旦一个标准的XHTML代码写完之后,那么CSS可以实现其实百变面孔。其实XHTML是一个演员,CSS是编剧,XHTML演什么角色,都由CSS来决定的。

    这听起来似乎有点理想主义,实现起来似乎就没有那么容易了。不过我还是想通过一个简单的例子来说问题。

    我们在设计页面的时候遵循的一个原则就是:重要内容首先加载,将要内容稍后加载。因此我们会发现像我的博客一样,主内容代码是写在侧边栏前面的。但是我们却可以通过CSS使侧边栏位于左侧,如果不看代码只看在页面中的表现,这和先加载侧边栏没有什么不同。这就是结构和表现分离的好处。

    假设我们有一个三栏的布局,其中两个是主内容区域,一个是侧边栏的次内容区域。那么按照上面的原则,我们应该把两个主内容区域的代码写在侧边栏次内容区域的前面,这样浏览器才会首先加载他们。那么我们就要构建下面的代码段:

<div id="content"> 
  <div id="primaryContent"></div> 
   <div id="secondaryContent"></div> 
 <div id="sideContent"></div> 
</div> 

前面已经说过,结构和表现分离的好处就是我们可以任意地安排这三栏的位置。比如我们要把“sideContent”放在页面的左侧,主内容区位于中间和左侧,同时栏与栏之间有10px的间距。我们设定页面宽度为760px,扣除两个10px的间隔,那么内容区的共有740px的宽度,我们可以设定请内容区为290px,侧边栏为160px。于是有

#primaryContent {  
 float:left;  
   width:290px;  
  height:300px;  
}  
#secondaryContent {  
 float:left;  
   width:290px;  
  height:300px;  
}  
#sideContent {  
  float:left;  
   width:160px;  
  height:300px;  

注:为了演示方便没有优化代码。

float:left为使三个div元素水平对齐的常用方法。这样我们预览页面的时候,三个div便会出现在同一行内。

    接下来,我们要移动它们的位置。把primaryContent移动到160+10px的位置(10px)为间距,那么可以设置为

margin-left:170px;

把sendcondary依此向右移动,和primaryContent的距离也是10px,需要

margin-left:10px;

那么这个时sideContent已经被挤出content了,并且其左边缘正好是content的右边缘,因此我们要使用负的边距把它拉回到正常位置:

margin-left:-760px;

这样位置就正好了。

(自己查看运行效果)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> div+css布局中的结构和表现分离 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <style type="text/css">
 body { font-size:middle;font-family:Tahoma,Arial, Helvetica, sans-serif,"雅黑","宋体"; background-color:#999;}
 div { background-color:#ccc; }
 #wrap {
  width:760px;
  padding:10px;
  margin:0 auto;
  background-color:#fff;
 }
 #header {
  height:100px;
 }
 #content {
  height:300px;
  margin-top:10px;
  background-color:#fff;
 }
 #primaryContent {
  float:left;
  height:300px;
  width:290px;
  margin-left:170px;
 }
 #secondaryContent {
  float:left;
  height:300px;
  width:290px;
  margin-left:10px;
 }
 #sideContent {
  float:left;
  height:300px;
  width:160px;
  margin-left:-760px;
 }
 #footer {
  height:100px;
  margin-top:10px;
 }
 pre { font-family:tahoma; }
  </style>
 </head>
 <body>
 <div id="wrap">
  <div id="header">header
  </div>
  <div id="content">
   <div id="primaryContent"><h3>主内容区1</h3>
   这是主内容区,为了增强用户体验,使用主要内容首先显示,它往往在放在其它内容的前面。
<pre>
 #primaryContent {
  float:left;
  height:300px;
  width:290px;
  margin-left:170px;
 }</pre>
   </div>
   <div id="secondaryContent"><h3>主内容区2</h3>这是主内容区,为了增强用户体验,使用主要内容首先显示,它往往在放在其它内容的前面。
<pre>
 #secondaryContent {
  float:left;
  height:300px;
  width:290px;
  margin-left:10px;
 }</pre>
   </div>
   <div id="sideContent"><h4>次内容区</h4>这是将要内容区域,它往往出现在页面的后部。
<pre>
#sideContent {
 float:left;
 height:300px;
 width:160px;
 margin-left:-760px;
}
</pre>
   </div>
  </div>
  <div id="footer">footer <br/><a href="http://www.dudo.org/" style="color:#000;text-decoration:none;">http://www.dudo.org/</a>
  </div>
 </div>
 </body>
</html>

(修正bug,请使用Internet Explorer 7、Firefox等浏览器查看)

对于两样一段XHTML代码,我们只需要修改CSS样式就可以实现多种布局:

代码1(自己查看运行效果)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> div+css布局中的结构和表现分离 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <style type="text/css">
 body { font-size:middle;font-family:Tahoma,Arial, Helvetica, sans-serif,"雅黑","宋体"; background-color:#999;}
 div { background-color:#ccc; }
 #wrap {
  width:760px;
  padding:10px;
  margin:0 auto;
  background-color:#fff;
 }
 #header {
  height:100px;
 }
 #content {
  height:300px;
  margin-top:10px;
  background-color:#fff;
 }
 #primaryContent {
  float:left;
  height:300px;
  width:290px;
 }
 #secondaryContent {
  float:left;
  height:300px;
  width:290px;
  margin-left:180px;
 }
 #sideContent {
  float:left;
  height:300px;
  width:160px;
  margin-left:-460px;
 }
 #footer {
  height:100px;
  margin-top:10px;
 }
 pre { font-family:tahoma; }
  </style>
 </head>
 <body>
 <div id="wrap">
  <div id="header">header
  </div>
  <div id="content">
   <div id="primaryContent"><h3>主内容区1</h3>
   这是主内容区,为了增强用户体验,使用主要内容首先显示,它往往在放在其它内容的前面。
<pre>
 #primaryContent {
  float:left;
  height:300px;
  width:290px;
 }</pre>
   </div>
   <div id="secondaryContent"><h3>主内容区2</h3>这是主内容区,为了增强用户体验,使用主要内容首先显示,它往往在放在其它内容的前面。
<pre>
 #secondaryContent {
  float:left;
  height:300px;
  width:290px;
  margin-left:180px;
 }</pre>
   </div>
   <div id="sideContent"><h4>次内容区</h4>这是将要内容区域,它往往出现在页面的后部。
<pre>
#sideContent {
 float:left;
 height:300px;
 width:160px;
 margin-left:-460px;
}
</pre>
   </div>
  </div>
  <div id="footer">footer <br/><a href="http://www.dudo.org/" style="color:#000;text-decoration:none;">http://www.dudo.org/</a>
  </div>
 </div>
 </body>
</html>

代码2(自己查看运行效果)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> div+css布局中的结构和表现分离 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <style type="text/css">
 body { font-size:middle;font-family:Tahoma,Arial, Helvetica, sans-serif,"雅黑","宋体"; background-color:#999;}
 div { background-color:#ccc; }
 #wrap {
  width:760px;
  padding:10px;
  margin:0 auto;
  background-color:#fff;
 }
 #header {
  height:100px;
 }
 #content {
  height:300px;
  margin-top:10px;
  background-color:#fff;
 }
 #primaryContent {
  float:left;
  height:300px;
  width:290px;
 }
 #secondaryContent {
  float:left;
  height:300px;
  width:290px;
  margin-left:10px;
 }
 #sideContent {
  float:left;
  height:300px;
  width:160px;
  margin-left:10px;
 }
 #footer {
  height:100px;
  margin-top:10px;
 }
 pre { font-family:tahoma; }
  </style>
 </head>
 <body>
 <div id="wrap">
  <div id="header">header
  </div>
  <div id="content">
   <div id="primaryContent"><h3>主内容区1</h3>
   这是主内容区,为了增强用户体验,使用主要内容首先显示,它往往在放在其它内容的前面。
<pre>
 #primaryContent {
  float:left;
  height:300px;
  width:290px;
 }</pre>
   </div>
   <div id="secondaryContent"><h3>主内容区2</h3>这是主内容区,为了增强用户体验,使用主要内容首先显示,它往往在放在其它内容的前面。
<pre>
 #secondaryContent {
  float:left;
  height:300px;
  width:290px;
  margin-left:10px;
 }</pre>
   </div>
   <div id="sideContent"><h4>次内容区</h4>这是将要内容区域,它往往出现在页面的后部。
<pre>
#sideContent {
 float:left;
 height:300px;
 width:160px;
 margin-left:10px;
}
</pre>
   </div>
  </div>
  <div id="footer">footer<br/>
  <a href="http://www.dudo.org/" style="color:#000">http://www.dudo.org/</a>
  </div>
 </div>
 </body>
</html>

    其实还能实现更复杂的布局。我举这个例子当然不是在讲布局的技巧,只是说说为什么一下强调结构与表现分例,光说不练可不好理解它的真谛。



相关阅读:
LINUX FSCK数据出错灾难应急方案
详尽介绍VISTA的各个版本
页面内文字的滚动代码详解
css中border:none;与border:0;的区别说明
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
vb.net入门——Windows窗体的继承
解决ASP.NET的进程帐户没有访问 IIS的权限
php教程:php设计模式介绍之观测模式
国人开发的比较优秀的js框架:como js
PHP 反射机制实现动态代理的代码
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
msxml3.dll 错误 80070005 拒绝访问
定义标题的最好方法
常用VBS代码 值得一看
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 运动会3000米广播稿 脾气任性,福不加身 遇见曹方作文800字 思想教育要力戒简单 读《毁树容易种树难》 给妈妈的一封信作文800字 远程教育工作体会:与远程教育一起成长 班旗授旗仪式讲话稿 财务工作意见及建议 公司年会节目 寂寞都市 狐狸的尾巴作文400字 邮寄雪花 猴子和豹子 我的三角爱 描写秋天的好段(8) 在全市治理商业贿赂领导小组第一次会议上的讲话 周杰伦最感人的二十八句歌词 一次快乐的春游作文 友谊说 清 泉 心理决定成败 2016年教师见习期工作总结 短暂的生命作文 初三记叙文:感恩教师节 MyFavouriteFlower 蚂蚁和老鹰 爱打呼噜的爸爸作文200字 静电力 放弃大都市,生活才是自己的 中秋月作文600字 《我的女巫生涯》读后感 简短入团申请书范文 教师演讲稿:让每个学生快乐成长 留言条上的爱 2016年学习师德规范心得体会 《中华人民共和国国旗》读后感作文300字 小学三年级作文300字:难忘的金沙滩之旅 从严以用权来看怎样正确运用民主集中制 道听途说800字作文 尊师的作文600字 伤感赌气的句子 全世界我都可以放弃、更何况区区一个你 远亲不如近邻600字 杭州租房合同范本 党员教师三严三实对照检查材料 职场法则:职场暗语潜规则 我不平凡作文700字 小班数学活动教案:2的形成 五龙潭作文500字 春寒里的思念(淡泊如水发表了日志)

Copyright © 2016 phpStudy |