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


猜你喜欢
- 使用python实现双向循环链表,供大家参考,具体内容如下双向循环链表: 将所有的数据存放到节点中,每一个节点相连接,首尾链接,每一个节点中
- 凡搞WEB开发的人都离不开HTTP(超文本传输协议),而要了解HTTP,除了HTML本身以外,还有一部分不可忽视的就是HTTP消息头。做过S
- Select CONVERT(varchar(100), GETDATE(), 0): 05 16 2006 10:57AM Select
- 业务需求 识别验证码图片中的数字信息,用pyt
- MFCC梅尔倒谱系数(Mel-scaleFrequency Cepstral Coefficients,简称MFCC)。MFCC通常有以下之
- 本文实例讲述了Python基础之条件控制操作。分享给大家供大家参考,具体如下:if 语句Python中if语句的一般形式如下所示:if co
- 前言本篇文章,阐述一下Flask中数据库的迁移为什么要说数据库迁移呢?比如我们以前有一个数据库,里面的信息有 id, name现在我想再加一
- 问题描述大家都知道, MySQL 中按某字段升序排列的 SQL 为 (以 id 为例,下同):SELECT * FROM `MyTable`
- pandas官方文档:https://pandas.pydata.org/pandas-docs/stable/?v=20190307135
- 前言晚上回家闲来无事,想打开某直播平台,看看小姐姐直播。看着一个个多才多艺的小姐姐,眼花缭乱,好难抉择。究竟看哪个小姐姐直播好呢?今天我们就
- 本文实例讲述了Python数据类型之Set集合。分享给大家供大家参考,具体如下:set集合1.概述set与dict类似,但set是一组key
- 一、Jupyter Notebook是什么?1.notebook jupyter简介Jupyter Notebook是一个开源Web应用程序
- MySQL是一个真正的多用户、多线程SQL数据库服务器。MySQL是以一个客户机/服务器结构的实现,它由一个服务器守护程序mys
- 一、简介你一定用过那种“OCR神器”,可以把图片中的文字提取出来,极大的提高工作效率。今天,我们就来做一款实时截图识别的小工具。顾名思义,运
- php文件 <?php class xpathExtension{ public static function getNodes($
- 索引和切片相当于是对数组中内容的读(read)或者查询(inquiry)。是我们获取有用信息(demanded infomation)的重要
- 前言最近在研究怎么对图片资源进行无损压缩,网上也找了一些资料。总而言之,收获不少,所以想对最近的学习做个总结。无损压缩其实是相对而言的,目的
- 代码class Shuxing(): def __init__(self, size = 10): s
- 1. 概念显著性检测,就是使用图像处理技术和计算机视觉算法来定位图片中最“显著”的区域。显著区域就是
- 本文实例讲述了Python实现带参数的用户验证功能装饰器。分享给大家供大家参考,具体如下:user_list = [ {'