CSS+div网页布局

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,8,章,CSS+div,网页布局,1,学习目标,CSS,排版是将页面首先在整体上进行,标记分块，然后对各个块进行,CSS,定位，最后再在各个块中添加相应的内容。通过,CSS,排版的页面，更新十分容易，甚至是页面的拓扑结构，都可以通过修改,CSS,属性来重新定位。,ppt,中所有实例参考,网页设计与制作电子教材及源代码,2,8.1,将页面用,div,分块,CSS,排版要求设计者首先对页面有一个整体的框架规划，包括整个页面分为哪些模块，各个模块之间的父子关系，等等。以最简单的框架为例，页面由,Banner,、主体内容,(content),、菜单导航,(links),和脚注,(footer),几个部分，各个部分分别用自己的,id,来标识，整体内容如下图所示：,3,8.1,将页面用,div,分块,4,8.1,将页面用,div,分块,上图中每个色块都是一个,，这里直接用,CSS,的,ID,标识方法来标识各个块。页面的所有,div,块都属于块,#container,，一般的,div,排版都会在最外面加上一个父,div,，便于对页面的整体进行调整。对于每个子,div,块，还可以再加入各种块元素或者行内元素，以,#content,和,#links,为例：如下图：,5,8.1,将页面用,div,分块,6,框架代码如文件,8-1.html,所示：,CSS,排版,7,8.2,设计各块的位置,当页面的内容已经确定后，则需要根据内容本身考虑整体的页面版型，例如单栏、双栏或左中右等。这里考虑到导航条的易用性，采用常见的双栏模式，如下图所示：,8,8.2,设计各块的位置,9,8.3,用,CSS,定位,整理好页面的框架后，便可以利用,CSS,对各个块进行定位，实现对页面的整体规划，然后再往各个模块中添加内容。首先对,标记与,#container,父块进行设置，其他代码参考源文件：,body,margin:0px;,font-size:13px;,font-,family:Arial,;,#container,position:relative,;,width:100%;,10,8.4,固定宽度且居中的版式,宽度固定而且居中的版式是网络中最常见的排版方式之一 ，下面介绍两种方法实现对下面页面的居中设计：,固定宽度且居中的版式,页面具体内容,11,8.4,固定宽度且居中的版式,方法一,body,，,html,margin:0;,text-,align:center,;,#container,position:relative,;,margin:0 auto;,width:700px;,text-,align:left,;,12,8.4,固定宽度且居中的版式,方法二：,body,html,margin,：,0px,；,#container,position,：,relative,；,left,：,50%,；,width:700px;,margin-left:-350px;,13,8.4,固定宽度且居中的版式,14,8.5,左中右版式,将页面分割为左中右,3,块也是网页中常见的一种排版模式，本节以此结构为例来进一步讲解,CSS,排版的方法，页面结构如下图所示：,15,8.5,左中右版式,首先搭建,HTML,的结构框架，代码如下：,左中右,left,正文内容,right,16,8.5,左中右版式,首先搭建,HTML,的结构框架，代码如下：,左中右,left,正文内容,right,17,8.5,左中右版式,设置,标记的样式，包括,margin,、,padding,、字体、颜色和背景色等，这些对整体结构都没有太大的影响，代码如下：,body,margin:0px; padding:0px;,font-,family:arial,;,color:#060;,background-,color:#CCCCCC,;,然后分别设置,#left,、,#middle,和,#right,的样式,18,8.5,左中右版式,#left,position:absolute,;,top:0px;,left:0px;,margin:0px;,background:#FFF,;,width:190px;/*,固定宽度 *,/,#middle,padding:10px;,background:#FFF,;,margin:0px 190px 0px 190px;/*,左右空,190px */,margin-top:0px;,#right,position:absolute,;,top:0px;,right:0px;,margin:0px;,background:#FFF,;,width:190px;/*,固定宽度 *,/,19,