第15章CSS+div布局方法剖析.ppt

1、网页制作综合技术教程网页制作综合技术教程第第4部分部分 CSS页面布局设计页面布局设计 CSS CSS排版观念排版观念15.115.1固定宽度且居中的版式固定宽度且居中的版式15.215.2左中右版式左中右版式15.315.3 块的背景色问题块的背景色问题15.415.4divdiv排版与传统的表格方式排版的分析排版与传统的表格方式排版的分析15.515.5排版实例：电子相册排版实例：电子相册15.615.6 在第在第14章中主要介绍了章中主要介绍了CSS对页面中各对页面中各个元素的定位，本章在此基础上，从页面的个元素的定位，本章在此基础上，从页面的整体排版出发，介绍整体排版出发，介绍CSS排

2、版的观念和具体排版的观念和具体方法，包括方法，包括CSS排版的整体思路、两种具体排版的整体思路、两种具体的排版结构、电子相册的几种版式制作，以的排版结构、电子相册的几种版式制作，以及与传统表格排版方法的比较。及与传统表格排版方法的比较。15.1 CSS15.1 CSS排版观念排版观念15.1.1 15.1.1 将页面用将页面用divdiv分块分块 #container #banner #content #links #footer 图图15.1 页面内容框架页面内容框架 #content .blog .date .blogcontent .update .page #links .calend

3、arhead .calendartable .friends .syndicate .side 图图15.2 子块的内容子块的内容15.1.2 15.1.2 设计各块的位置设计各块的位置#container #banner #content #links #footer 图图15.3 各块的位置各块的位置15.1.3 15.1.3 用用CSSCSS定位定位#container #banner #content #links #footer 图图15.4 页面效果页面效果 图图15.5 页面效果页面效果 #container #banner #content #links #footer 图图1

4、5.6 调整后的效果调整后的效果 图图15.7 一种特殊情况一种特殊情况15.2 15.2 固定宽度且居中的版式固定宽度且居中的版式15.2.1 15.2.1 方法一方法一方法一的思路很清晰，代码如下：方法一的思路很清晰，代码如下：body, html margin:0; text-align:center; #container position:relative; margin:0 auto; width:700px; text-align:left; 图图15.8 页面效果页面效果15.2.2 15.2.2 方法二方法二下面来介绍第下面来介绍第2种方法，换一种角度思种方法，换一种角度思考

5、这个问题，代码如下：考这个问题，代码如下：body, html margin:0px; #container position: relative; left:50%; width:700px; margin-left:-350px; body container left: 50% 图图15.9 移动左边框至移动左边框至50%处处 container left: 50% margin-left: -350px; 图图15.10 向回移动宽度的一半向回移动宽度的一半15.3 15.3 左中右版式左中右版式#left #middle #right 图图15.12 左中右的结构左中右的结构 图图15.13 左中右结构左中右结构 #left #middle #right #banner #footer 图图15.14 加入加入#banner和和#footer 15.4 15.4 块的背景色问题块的背景色问题#left 背景色没有延伸 #right 背景色没有延伸 图图15.15 两边的背景色不正常两边的背景色不正常15.5 div15.5 div排版与传统的表格方式排版的分析排版与传统的表格方式排版的分析15.6 15.6 排版实例：电子相册排版实例：电子相册15.6.1 15.6.1 搭建框架搭建框架15.6.2 15.6.2 幻灯片模式幻灯片模式