div+css技术应用网页效果预览

3、>     主题2区左底部主题2区左底部左边       主题2区左底部右边        主题2区右主题2区顶部     主题2区底部

4、>  底部区域3.新建一个CSS文档，命名为“style.css”,并保存在站点文件夹下。body{font:12pxTahoma;margin:0px;text-align:center;background:#FFF;}/*页面层容器*/#content{width:100%}/*页面头部*/#head{width:1000px;margin:0auto;height:100px;background:#900000}/*页面主体1*/#webbody1{width:10

5、00px;margin:0auto;height:200px;background:#FEFEFE}/*页面主体1*/#webbody2{width:1000px;margin:0auto;height:200px;background:#FCFCFC}/*页面底部*/#foot{width:1000px;margin:0auto;height:50px;background:#900000}/*主题1区左*/#webbody1Left{width:746px;/*设定宽度*/text-align:left;/*文字左对齐*/float:

6、left;/*浮动居左*/clear:left;/*不允许左侧存在浮动*/overflow:hidden;/*超出宽度部分隐藏*/}/*主题1区右*/#webbody1Right{width:254px;text-align:left;float:right;/*浮动居右*/clear:right;/*不允许右侧存在浮动*/overflow:hidden}/*主题2区左*/#webbody2Left{……}/*主题2区右*/#webbody2Right{……}/*主题2区左底部左边*/#webbody2LeftFootLeft{width

7、:373px;/*设定宽度*/……}/*主题2区左底部右边*/#webbody2LeftFootRight{width:373px;text-align:left;……}4.“zzrsb.html”链接“style.CSS”文件，链接方法同第八讲中内容，到此为止，网页框架制作完毕。效果图如下：图2-9-4CSS控制DIV后布局图 网页内部内容的添加和前面文字、多媒体元素、链接等内容添加相同，这里不再累述。四、DIV+CSS页面布局常见错误分析1.检查HTML元素是否有拼写错误、是否忘记结束标记　　即使是老手也经常会弄错div的嵌套关系。可

8、以用dreamweaver的验证功能检查一下有无错误。　　2.检查CSS是否正确检查一下有无拼写错误、是否忘记结尾的“}”等。可以利用CleanCSS来检查CSS的拼写错误。CleanCSS本