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

《第15章CSS+div布局方法剖析》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、网页制作综合技术教程第4部分CSS页面布局设计第15章CSS+div布局方法剖析CSS排版观念15.1固定宽度且居中的版式15.2左中右版式15.3块的背景色问题15.4div排版与传统的表格方式排版的分析15.5排版实例：电子相册15.6在第14章中主要介绍了CSS对页面中各个元素的定位，本章在此基础上，从页面的整体排版出发，介绍CSS排版的观念和具体方法，包括CSS排版的整体思路、两种具体的排版结构、电子相册的几种版式制作，以及与传统表格排版方法的比较。15.1CSS排版观念15.1.1将页面用div分块图

2、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:0auto;width:700px;text-align:left;}图15.8页面效果15.2.2方

3、法二下面来介绍第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和#footer15.4块的背景色问题图15.15两边的背景色不正常15.5div排版与传统的表格方式排版的分析15.

4、6排版实例：电子相册15.6.1搭建框架15.6.2幻灯片模式