网页制作综合技术教程温谦赵伟胡静李占波第15章CSSdiv布局方法剖析.pptVIP

馋死 PPT研究院 POWERPOINT ACADEMY * * * 尚辅网 / 网页制作综合技术教程 第4部分 CSS页面布局设计 第15章 CSS+div布局方法剖析 CSS排版观念 15.1 固定宽度且居中的版式 15.2 左中右版式 15.3 块的背景色问题 15.4 div排版与传统的表格方式排版的分析 15.5 排版实例：电子相册 15.6 在第14章中主要介绍了CSS对页面中各 个元素的定位，本章在此基础上，从页面的 整体排版出发，介绍CSS排版的观念和具体 方法，包括CSS排版的整体思路、两种具体 的排版结构、电子相册的几种版式制作，以 及与传统表格排版方法的比较。 15.1 CSS排版观念 15.1.1 将页面用div分块 图15.1 页面内容框架 图15.2 子块的内容 15.1.2 设计各块的位置 图15.3 各块的位置 15.1.3 用CSS定位 图15.4 页面效果 图15.5 页面效果 图15.6 调整后的效果 图15.7 一种特殊情况 15.2 固定宽度且居中的版式 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 方法二 下面来介绍第2种方法，换一种角度思 考这个问题，代码如下： body, html{ margin:0px; } #container{ position: relative; left:50%; width:700px; margin-left:-350px; } 图15.9 移动左边框至50%处 图15.10 向回移动宽度的一半 15.3 左中右版式 图15.12 左中右的结构 图15.13 左中右结构 图15.14 加入#banner和#footer 15.4 块的背景色问题 图15.15 两边的背景色不正常 15.5 div排版与传统的表格方式排版的分析 15.6 排版实例：电子相册 15.6.1 搭建框架 15.6.2 幻灯片模式 在线教务辅导网： 更多课程配套课件资源请访问在线教务辅导网 * *