6.1Div+CSS布局技术简介6.1.1Div+CSS布局的优点采用Div+CSS布局方式的优点如下：Div用于搭建网站结构，CSS用于创建网站表现，将表现与内容分离。缩短了网站的改版时间。强大的字体控制和排版能力，使设计者能够更好的控制页面布局。使提高搜索引擎对网页的索引效率。用户可以将许多网页的风格格式同时更新。机械工业出版社

6.2典型的CSS布局样式6.2.1两列布局样式页面布局整体上分为上、中、下3个部分，即header区域、container区域和footer区域。其中的container又包含mainBox（主要内容区域）和sideBox（侧边栏），布局示意图如图6-4所示。机械工业出版社

6.2典型的CSS布局样式6.2.1两列布局样式【演练6-4】使用高度自适应的方法进行三行两列宽度固定布局。机械工业出版社

6.2典型的CSS布局样式6.2.2三列布局样式2．三列自适应结构【演练6-6】三列自适应结构。三列自适应结构的页面效果如图6-11所示。将浏览器窗口进行缩放，三列自适应宽度的效果，如图6-12所示。机械工业出版社

6.3综合案例——制作光影世界最近活动局部页面6.3.2页面的制作过程1．前期准备（1）栏目目录结构在栏目文件夹下创建文件夹images和css，分别用来存放图像素材和外部样式表文件。（2）页面素材将本页面需要使用的图像素材存放在文件夹images下。（3）外部样式表在文件夹css下新建一个名为style.css的样式表文件。2．制作页面机械工业出版社

6.4实训——制作家具商城产品明细局部页面6.4.1页面布局规划通过成熟的构思与设计，家具商城产品明细局部内容的页面效果如图6-15所示，页面局部布局示意图如图6-16所示。机械工业出版社

6.4实训——制作家具商城产品明细局部页面6.4.2页面的制作过程1．前期准备（1）栏目目录结构在栏目文件夹下创建文件夹images和css，分别用来存放图像素材和外部样式表文件。（2）页面素材将本页面需要使用的图像素材存放在文件夹images下。（3）外部样式表在文件夹css下新建一个名为style.css的样式表文件。2．制作页面机械工业出版社