CSS页面基本排版技术.ppt

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