1、CSS+DIV布局排版,目标,了解CSS排版观念 掌握常用的几种排版方法 理解div排版与传统的表格排版的区别,2,概述,CSS排版观念 固定宽度且居中的版式 左中右排版 块的背景色问题 div排版与传统的表格方式排版的分析,3,CSS排版观念,将页面用div分块,4,bannerdateothers ,CSS排版观念,设计各块的位置,5,CSS排版观念,用CSS定位,6,body margin:0px;font-size:13px;font-family:Arial; #containerposition:relative;width:100%; ,#bannerheight:80px;bo
2、rder:1px solid #000000;text-align:center;background-color:#a2d9ff;padding:10px;margin-bottom:2px; ,#contentfloat:left;text-align:center;padding-right:200px; /* 内容往回挤200px */ #linksfloat:right;width:200px;border:1px solid #000000;text-align:center; ,固定宽度且居中的版式,方法一,7,body, htmlmargin:0px;text-align:ce
3、nter; #containerposition: relative;margin: 0 auto;width:700px;text-align: left; ,固定宽度且居中的版式,方法二,8,body, htmlmargin:0px; #containerposition: relative;left:50%width:700px;margin-left:-350px; ,左中右排版,HTML布局,9, leftright ,块的背景色问题,用背景图片填补空白,10,#container margin:0px; padding:0px; background:url(bg2.jpg) repeat-y;/* 用背景图片填补#left的空白，又不影响#right */ ,总结,本章介绍了CSS排版的观念，讲解了常用的几种排版方法，着重指出在排版中遇到的块的背景色问题的解决方法，以及通过总结目前网页制作中使用最多的表格排版的优点和缺点分析了div排版与传统的表格方式排版的区别。,11,
