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