1、DIV+CSS布局,Div+Css特点,DIV+CSS是网站标准（或称“WEB标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位,Div+CSS布局的优势,代码精简 表格的嵌套问题 速度问题 方便搜索引擎的搜录 重构页面的方便性,盒状编程模型,DIV+CSS通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页 内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性,一共分为四个区块，每个区
2、块的框架是一样的，这个框架就是用CSS写出来的，样式写一次，就可以被无数次调用了(用class调用，而不是ID)，只要改变其中的文字内容就可以生成风格统一的众多板块了，,演示的相关文件, 前言 正文内容 CSS盒子模式 正文内容 转变思想 正文内容 熟悉步骤 正文内容 演示文件,DIV+CSS设计思路,用div来定义语义结构； 然后用CSS来美化网页，如加入背景、线条边框、对齐属性等； 最后在这个CSS定义的盒子内加上内容，如文字、图片等,设计效果图,分析页面布局形式,设置主要4个盒子,将盒子装入Body盒子,定义整体样式,body font-family: Arial, Helvetica,
3、 sans-serif; font-size: 12px; margin: 0px auto; height: auto; width: 760px; border: 1px solid #006633; ,分别定义各个盒子样式,#header height: 100px; width: 760px; background-image: url(headPic.gif); background-repeat: no-repeat; margin:0px 0px 3px 0px; ,设置更小的盒子,#nav height: 25px; width: 760px; font-size: 14px;
4、 list-style-type: none; #nav li float:left; #nav li a color:#000000; text-decoration:none; padding-top:4px; display:block; ,最终盒状模型结构代码, 首 页 文 章 相册 Blog 论 坛 帮助 前言 第一段内容 理解CSS盒子模式 第二段内容 客服中心 | Q Q留言 | 网站管理 | 会员登录 |Copyright 2006 - 2008 Keith Dan. All Rights Reserved 演示代码,练习一个实例,初始效果图设计,布局与规划,顶部部分，其中又包
5、括了LOGO、MENU和一幅Banner图片； 内容部分又可分为侧边栏、主体内容； 底部，包括一些版权信息。,布局与规划,分析,结构分析,DIV结构如下： body /*这是一个HTML元素，具体我就不说明了*/ #Container /*页面层容器*/ #Header /*页面头部*/ #PageBody /*页面主体*/ #Sidebar /*侧边栏*/ #MainBody /*主体内容*/ #Footer /*页面底部*/,编写主题内容,color=#aaaaaa/color color=#aaaaaa/color color=#aaaaaa/color color=#aaaaaa/co
6、lor color=#aaaaaa/color color=#aaaaaa/color ,菜单的制作, 首页 博客 设计 相册 论坛 关于 ,重要的属性设置,#menu ul list-style:none;margin:0px; list-style:none，这一句是取消列表前点，因为我们不需要这些点。 margin:0px，这一句是删除UL的缩进，这样做可以使所有的列表内容都不缩进。 #menu ul li float:left;margin:0 10px这里的 float:left 的左右是让内容都在同一行显示，因此使用了浮动属性(float)。 margin:0 10px的作用就是让
7、列表内容之间产生一个20像素的距离(左：10px，右：10px)，预览的效果如下：,到此，我们的基本雏形已经形成了，剩下的工作就是如何美化菜单，我们需要添加一条竖线 .menuDiv width:1px;height:28px;background:#999,典型的左右分割,#pagebody width:730px; /*设定宽度*/ margin:8px auto; /*居中*/ #sidebar width:160px; /*设定宽度*/ text-align:left; /*文字左对齐*/ float:left; /*浮动居左*/ clear:left; /*不允许左侧存在浮动*/ o
8、verflow:hidden; /*超出宽度部分隐藏*/ #mainbody width:570px; text-align:left; float:right; /*浮动居右*/ clear:right; /*不允许右侧存在浮动*/ overflow:hidden ,典型的左右分割,固定大小,浮动大小,重要的属性float,如果float为none则不能发生任何浮动，块元素各占一行, #content_a width:200px; height:80px; border:1px solid #000; margin:10px; background:#ccc; #content_b widt
9、h:200px; height:80px; float:left; border:1px solid #000; margin:10px; background:#999; , #content_a width:200px; height:80px; float:left;border:1px solid #000; margin:10px; background:#ccc; #content_b width:200px; height:80px; float:left; border:1px solid #000; margin:10px; background:#999; ,这是第一个DI
10、V 不应用浮动 这是第二个DIV 向左浮动 新的一个Div,取消浮动, #content_a width:200px; height:80px; float:left;border:1px solid #000; margin:10px; background:#ccc; #content_b width:200px; height:80px; float:left; border:1px solid #000; margin:10px; background:#999; #foot clear:both; ,Div+Css将替代Table布局吗？,在表格类的网页中使用table布局更方便 大量的样式将造成Css文件的庞大，不利于应用在过多样式的网页中 Div+Css的最大优点在于样式与内容分离，而Table最大优势在于内容的复杂与应用。 Div+Css无法解决多浏览器的兼容。 在商业网站中Div+Css应用更多，而行业应用中Table应用更多。,
