[翻译]标记语言和样式手册 Chapter 12 CSS布局
作者:zhaozy 来源:3user.com 发布时间:2008-02-13 14:19:00
Chapter 12 CSS布局
本书到此为止,讨论的主要是页面内部元素,也就是内容,但是大结构怎么办?长久以来,设计者都依赖表格进行分栏布局,常常在表格之内嵌套其他表格以便达成恰巧正确的间隔,视觉效果.这些庞大的排版内容不仅下载很慢,维护起来也很费心力,更别提文字浏览器,屏幕阅读器,小屏幕设备根本无法正确读取了.
在这一章内,将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局.
稍后在"技巧延伸"中,将会讨论Windows版Internet Explorer 5.0盒模型的问题,以及绕过它的方法.也将分享一个以CSS达成等宽栏位的简单秘密.
要如何以CSS作出两栏版面布局?
答案是有好几种方法,为了带领你起步,同时帮助你了解两种常见方法的差异(浮动与定位),因此先把焦点放在四种不同的方法上,在此每一种方法都能做出两栏布局,同时具备页首和页尾.
我的愿望是:你能以本章作为指引开始构建一个网站,并发挥本书其他章节之内的方法制作内容.
我们将讨论的四种方法都应用在文档的<body>与</body>标签之间,同时我会在开始讨论每种方法之前介绍将会使用的标记语法结构.
为了让你了解围绕着每种方法的页面结构,让我们大致看一下还需要加入些什么:
<!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" lang="en" xml:lang="en">
<head>
<title>CSS Layouts</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
...方法示范...
</body>
</html>
为了让你可以了解要达成的版面配置,请看图12-1:这就是我们想要完成的分栏版面布局.
图12-1 两栏布局的框线图
让我们开始吧!首先介绍第一种方法,它使用float属性.
方法A:浮动侧边栏
<div id="header">
...页头部分...
</div>
<div id="sidebar">
...侧边栏部分...
</div>
<div id="content">
...主体部分...
</div>
<div id="footer">
...页脚部分...
</div>
上面就是我们要以CSS的float属性制作成分栏布局的标记源代码,使用<div>标签把页面元素分成几个逻辑段落,每个都设定了唯一的id:
#header: 包含标题图片,导航栏等
#sidebar: 包含额外的内容链接与相关资讯
#content: 包含主要的文字内容,也是页面的焦点所在.
#footer: 包含版权信息,作者,辅助链接等
把这些页面段落拆开,能让我们能完全控制版面布局,只要指定几条CSS规则,就可以马上完成两栏布局.
猜你喜欢
- 改版背景创建专业的电子商务垂直搜索,以及把原有的信息聚合平台转型为在线采购批发交易平台。根据行业特点及交易需要,对原有的零批(小额批发)搜索
- 非常不错,大家可以自己应用下。<% '//数据处理部分 dim Content,Num,I,st
- ASCII码键盘ASCII 码键盘ASCII 码键盘ASCII 码键盘27ESC32SPACE33!34"35#36$37%38&
- 一、 网页设计中的对比原则一件网页设计作品由许多元素构成,它们的重要性各不相同,其中一些元素的重要性要高于其它元素。一些相互关联,而另一些则
- 我们的规范到底做到哪一步算是发挥良好的价值?其实一件事物我们理解错根本目的会导致出大不一样的结果,直接反应在设计师到底要体现什么的价值。想想
- Q0.创建用户【前提】 你必须有CREATE USER系统权限。当你使用CREATE USER语句创建一
- 初步介绍 当然,我知道现在有成千上万个关于 用CSS处理圆角 的教程,但不管怎么说,我仍然想把这篇文章展示给您。也希望您会发现这篇文章会非常
- 经常开发asp但对于细致的说法,真实不太清楚,这里简单的介绍下。一般情况下读取数据都是用rs.open sql,conn,1,1修改数据:r
- 有这么一个题目,说bt其实也不bt,为了重点突出其中的意图,特意加上了括号:var a = (++Math.P
- 1、灵活运用样式 熟悉网页设计的网友就知道,调用Style的方法很多,我们可以单击鼠标右键选择Custon Style来调用Style标准,
- 一个不错的二级联动下拉菜单源码,您一定会用得到的。运行代码:<html><head><title>Lis
- 代码如下:Create PROCEDURE Batch_Delete @TableName nvarchar(100), --表
- 做个性休闲类项目课程材料,对这方面要求多一些,要总结方法、手法、想法等等,头大了;这里总结了一个做个性字体设计的方法,分享一下;方法是比较简
- 有个帖子写的检查全角的 <script> fun
- 阅读上一章:[翻译]标记语言和样式手册 Chapter 15 为body指定样式Chapter 16 下一步现在你知道了如何使用标准改进你的
- 1 导言 Microsoft 在Microsoft SQL Server 2000中推出了与XML相关的功能以及Transact-SQL 关
- 作者:Henny Swan / co-lead of WaSP ILG译者:JunChen / member of WaSP ILG原文:h
- 使用 IE8 时发现其原生的 JSON 解析器存在 Bug,让我们先用 IE8 打开 DEMO 页面体验下。http://lab.grace
- 目录:分析和设计组件编码实现和算法用 Ant 构建组件测试 JavaScript 组件话说上期我们讨论了队列管理组件的设计,并且给它取了个响
- 1. 选用适合的ORACLE优化器 ORACLE的优化器共有3种: a. RULE (基于规则) b. COST (基于成本) c. CHO