说说CSS+Div布局中的结构与表现
作者:dudo 来源:dudo博客 发布时间:2008-06-05 18:22:00
在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;
这样位置就正好了。
演示地址:标签示例.htm (1.97 KB)(修正bug,请使用Internet Explorer 7、Firefox等浏览器查看)
对于两样一段XHTML代码,我们只需要修改CSS样式就可以实现多种布局:
点击此处查看运行效果(1)
点击此处查看运行效果(2)
其实还能实现更复杂的布局。我举这个例子当然不是在讲布局的技巧,只是说说为什么一下强调结构与表现分例,光说不练可不好理解它的真谛。
猜你喜欢
- 源码: 代码如下: <% '隐藏并修改文件的最后修改时间的aspshell '原理:通过FSO可以修改文件的属性,比
- 在WEB2.0这个词未出现之前,是没有所谓的WEB1.0之说的,那时候的互联网也是没有时代之分的,能上的网站不多,值得上的网站更不多,很多的
- 第一节:WAP的潜能 这些日子,我们常听到WAP技术,一种手机上网的技术。从技术上讲,移动电话不可能和PC来竞争,移动电话的屏幕只能容下很少
- 今天帮助同事解决一个问题,问题是她做的一套页面在FF下显示正常,在IE6下样式却没有效果,也就是没有应用样式。最终发现是编码不匹配的问题,c
- rss.asp格式的 下面代码保存为rss.asp 代码如下:<!--#include file="conn.as
- 在一般的MIS应用中,会有大量的报表,此时我们可以在后台数据库编写相应的视图或存储过程,用ASP通过ADO调用以完成报表工作。下面用一个例子
- 从MySQL 5.0.2开始,通过mysql_stmt_attr_set() C API函数实现了服务器端光标。服务器端光标允许在服务器端生
- 在获得SA密码后,往往因为服务器管理者或”前人”将net.exe和net1.exe被限制使用,无法添
- 问题:数据库实际大小为600MB, 日志文件实际大小为33MB, 但日志文件占用空间为2.8GB!试了多种方式,SHIRNK DATABAS
- 现在很多以内容为核心的网站上都在文章底部添加了社会化分享按钮,能让浏览用户在发现一篇有价值的文章时,可以通过社会化网络快速分享给自己的好友,
- 代码如下:'************************************ '截取文字长度函数,支持UT
- 在SQL Server中进行开发会让你身处险地,并且寻找快速解决方案。我们编辑了前十名关于SQL Server开发的常见问题。对常见的针对表
- 哪的资料都不如官方资料权威。今天总算从MSDN中择出了ASP编码问题的解决方案。下面是MSDN中的一段话。Setting @CODEPAGE
- 主要讲 except 和 not in 的性能上的区别。 代码如下:CREATE TABLE tb1(ID int) CREAT
- 见下表:序号保留字序号保留字序号保留字1ADD80ESCAPE159OR2ABSOLUTE81EXCEPT160ORDER3ACTION82
- 原来看到这个代码的时候,觉得功能不错,调试并整理了一下也许大家用的到,对于越来越注重用户体验的今天,这种功能一定很受欢迎,当然本例子只是一个
- MySQL存储过程SAVEPOINT ROLLBACK to示例如下:DELIMITER $$DROP PROCEDURE IF EXIST
- 装了 Access 2003 安全更新 (KB981716) 之后 Access 打不开,office2003-KB981716-FullF
- 当一张的数据达到几百万时,你查询一次所花的时间会变多,如果有联合查询的话,我想有可能会死在那儿了。分表的目的就在于此,减小数据库的负担,缩短
- 如果你是一名Web Developer,而且还知道CSS Sprite这个词,请先去搜索一下,也许你正在使用这个技术,但只是不知道它的名字罢