[翻译]标记语言和样式手册 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规则,就可以马上完成两栏布局.
0
投稿猜你喜欢
解决usageerror: line magic function "％％time" not found问题
Python返回数组/List长度的实例
python实现可逆简单的加密算法
微软建议的ASP性能优化28条守则(3)
Python迭代器定义与简单用法分析
python print()函数的end参数和sep参数的用法说明
MySQL 不允许从远程访问的解决方法
python 解决flask 图片在线浏览或者直接下载的问题
Python+pyecharts绘制双动态曲线教程详解
MySQL8.0开启远程连接权限的方法步骤
SecureCRTSecure7.0查看连接密码的步骤
ThinkPHP5中如何使用redis
python去除文件中空格、Tab及回车的方法
一小时学会TensorFlow2之基本操作1实例代码
Bootstrap table学习笔记（2） 前后端分页模糊查询
MySql 5.6.35 winx64 安装详细教程
Python多线程编程（八）：使用Event实现线程间通信
asp如何取回已忘记的密码？
SQL Server中导入导出数据的三种方式
python+opencv实现的简单人脸识别代码示例
