《第15章 CSS页面基本排版技术》由会员分享，可在线阅读，更多相关《第15章 CSS页面基本排版技术（14页珍藏版）》请在金锄头文库上搜索。
1、第15章 CSS页面基本排版技术在学习CSS布局的基础知识后，本章继而讲解如何综合应用 各种布局方式来实践DIV+CSS排版。要实现复杂的页面 排版，首先要从简单的页面布局开始。本章主要讲述多种 整体页面布局方式，主要包括固定宽度布局、自适应宽度 布局和弹性布局等。本章内容包括： 使用DIV+CSS的布局方式实现页面排版 介绍常用的页面排版方式15.1 固定宽度布局固定宽度布局是页面排版中最常用的一种布局方式。页面中 用于分区的容器的宽度都是用像素来定义的。这种排版方 法能令网页设计师很好地控制布局和定位。若将一个容器 的宽度设置为760像素，那么这个容器在任何浏览器上都 显示为760像素宽。
2、15.1.1 一列水平居中布局一列水平居中布局是网页中最常见的布局方式，常用于个人博客和 简洁的企业网站。一列水平居中布局就是网页中所有内容都位于 一竖列中，该竖列水平居中于页面。尽管图中的网页布局看似非 常复杂，但是它最基本的布局仍然是一列水平居中布局。15.1.2 两列浮动布局接下来的两节都是讲解基于浮动的固定宽度布局，包括两列 浮动布局和三列浮动布局。在实际应用中，基于浮动的布 局是最常用也是最易用的布局方式。15.1.3 三列浮动布局三列浮动布局和两列浮动布局的原理是相似的。首先要给网页进 行分块，其分块框架如图所示。15.2 自适应宽度布局在上一节中讲述的布局方式为固定宽度布局，所有
3、页面的容 器都用像素值来设置宽度。自适应宽度布局使用的尺寸是 百分比。使用百分比设置容器宽度后，页面会随着浏览器 窗口伸缩。同样的道理，在不同的分辨率下，页面也会自 适应地表现为合适用户的大小。15.2.1 两列布局：两列自适应宽度要实现两列布局仍然要利用浮动来布局。但是在设置浮动元 素的宽度时，要使用百分比。实例15-4修改了实例15-2中 对元素宽度的设置而实现宽度自适应的布局。15.2.2 两列布局：左列固定右列自适应在【示例15.13】中，缩放浏览器时，页面也随之缩放，页 面中的所有容器宽度也会改变。但在很多网页中，某些列 的宽度是固定不变的。在两列布局中，可以设定其中一列 为固定列，
4、另外一列自适应。当缩放浏览器或者屏幕分辨 率发生变化时，一列保持原来的像素值，另外一列根据父 元素的宽度变化而变化。15.2.3 三列布局：中间列自适应三列布局比两列布局要复杂一些。三列布局常用的自适应布 局方式有两种。第一种是三列都自适应，这个设定的方法 和两列是一致的，只要把三个浮动的元素的宽度都设定为 百分比即可。第二种是三列中左右两列为固定宽度，中间 列为自适应宽度的布局。本小节就要讲解如何制作一个中 间列自适应宽度的三列布局。15.3 复杂的页面排版在上一节中讲述的布局都属于基本的布局，页面相对比较简 单。当涉及到多栏布局时，页面制作就变得复杂。因为在 一栏布局中，页面的浮动元素的高
5、度都是自适应的。而在 多栏布局中，页面元素的高度就要受到限制。栏与列越多 ，页面布局就越复杂。15.3.1 复杂的页面排版：垂直布局垂直布局的排版方法主要是把页面分为垂直排列的分块。这 些垂直排列的分块按照常规流的方式垂直排列，不需要应 用任何浮动。然后在这些分块中再细分网页上的各个栏目 。【示例15.23】利用垂直布局制作复杂页面。15.3.2 复杂的页面排版：水平布局水平布局的排版方法主要是把页面分为水平排列的分块。通常会按照三列 布局的方式先把页面分为高度自适应的列排列。然后对每一列再分块 ，在每一列中的分块通常都是使用常规流的方法使其垂直排列。【示 例】利用水平布局制作复杂页面。15.4 常见面试题问题1：建立大型门户网站时候使用自适应宽度吗？ 问题2：建立复杂的门户网站时，是否可以不指定分块的高 度?15.5 小结本章讲解了基本的排版布局方式和复杂的排版布局方式。基 本的布局有固定宽度布局和自适应宽度布局，使用浮动和 定位技术能实现多种基本布局方式。本章的重点是掌握几 种不同的基本排版方式。本章的难点是综合应用这些排版 技术实现复杂的页面效果。下一章将讲解CSS的HACK技 术和浏览器的兼容问题。 时时瘦(http:/)
