DIV+CSS布局.ppt

1、DIV+CSS布局,一、网页布局方式,表格 框架 Div+CSS,二、DIV CSS基本属性,1.div DIV 全称 division，意为“分区”，使用 DIV 的方法跟使用其他 tag 的方法一样。 如果单独使用 DIV 而不加任何 CSS，那么它在网页中的效果和使用 是一样的。 DIV本身就是容器性质的，不但可以内嵌table还可以内嵌文本和其它的HTML代码 注意：标签可以用来组合其它的HTML元素，但不能嵌套在段落元素中，例如：aabbcc的结果是不确定的。,什么是DIV+CSS,DIV+CSS布局 div承载的是内容，而css承载的是样式。 内容和样式的分离对于所见即所得的传统T

2、ABLE编辑方式确实是一个很大的冲击，尤其是设计人员很难接受设计一个他们不能立即看到的样式。,DIV+CSS标准的优点,结构化HTML，提高易用性 结构清晰，表现和内容相分离 更好的控制页面布局 结构的重构性强，缩短改版时间 大大缩减页面代码，提高页面浏览速度，缩减带宽成本 结构清晰，容易被搜索引擎搜索到,SPAN,SPAN的用法与DIV一样 这是DIV标记 这是SPAN标记 DIV与SPAN的区别 DIV是块元素，使用会产生分行 SPAN是一个行内元素，使用不会产生分行,例： divbackground-color:#090 spanbackground-color:#06C 这是DIV标记

3、 这是SPAN标记,盒子模型,每个HTML元素都可以看作一个装了东西的盒子 盒子具有宽度（width）和高度（height） 盒子里面的内容到盒子的边框之间的距离即填充（padding） 盒子本身有边框（border） 盒子边框外和其他盒子之间，还有边界（margin）,例：1.html,DIV的宽度 = width + padding + border + margin,DIV的宽度 = width + margin,在Firefox、Opera、Google、IE8、IE7浏览器中，宽度的计算公式是：,IE6的宽度计算是：,Width包含了padding、border大小,Margin边界

4、属性,Margin：margin-top、margin-right、margin-bottom、margin-left，外边距顺序依次是上、右、下、左 例如： Margin:20px; /*各边界均为20px*/ margin-top:20px;margin-right:10px;margin-bottom:10px;margin-left:20px; Margin:20px 10px 10px 20px; margin:0px auto；/*上下为0，左右边界自动调整，可以使层自动居中*/ margin:2em 4em; /*上下为2em，左右为4em */,Padding填充距属性,Pad

5、ding：padding-top、padding-right、padding-bottom、padding-left，内边距指文本边框与文本之间的距离，顺序依次是上、右、下、左,border边框属性,Float浮动属性,float 属性定义元素浮动到左侧或右侧。 在 CSS 中，任何元素都可以浮动，浮动元素会生成一个块级元素。 元素对象设置了float属性之后，将不再独自占据一行，浮动块可以向左或向右移动，直到它的外边缘碰到包含它的框或另一个浮动块的边框为止。 float值： Left 和Right ：分别浮动元素到各自的方向 None (默认的) ：使元素不浮动 Inherit ：将会从父级

6、元素获取float值,例：2.html,Clear清除属性,设定是否允许浮动元素之存在，一般和float配合使用； Clear取值： clear:left;清除左浮动 clear:right;清除右浮动 clear:none;左右都可以有浮动 clear:both;左右都不可以有浮动,Display显示属性,控制对象的形状或类型以及是否显示 取值： block：对象被指定为块元素，作为一个新段落，换行显示 none：不显示 inline：对象以内嵌方式显示在当前段落，不换行 list-item：对象以列表形式显示，换行,float: left;,clear: left;,width: 600p

7、x;,height: 400px;,padding-top: 1px; padding-right: 2px; padding-bottom: 3px; padding-left: 4px;,margin: 5px;,位置,位置属性就是指定元素的位置，它是CSS-P（Cascading Style Sheets Positioning）中的内容，CSS-P是CSS的一个扩展，它可用来控制任何网页元素在游览器文档窗口中的位置。 position static：静态，默认值 relative：相对定位，需要通过top、bottom、left、right配合 absolute：绝对定位，将对象元素定

8、位在页面任意位置，以浏览器左上角的距离为参照物 left right top bottom z-index,position: absolute;,visibility: visible;,z-index: 5;,overflow: scroll;,clip: rect(1px 2px 3px 4px);,left: auto; top: 5px; right: 5px; bottom: 5px;,height: 400px; width: 600px;,三、常用网页结构布局实例,单列结构 3.html 上下结构 4.html 上中下结构 5.html 左右结构 6.html 左中右结构 7.html 两行两列结构 8.html 两行三列结构 9.html 混合结构 10.html,经典应用：blog网站 采用div+css构架 内容和样式的分离 在重构页面布局或者更换皮肤的时候，只用针对每一个div元素重新定义其具体位置、样式。,DIV+CSS应用,四、编写DIV+CSS布局页面,结构图,五、Dreamw中创建DIV+CSS布局页面,文件-新建-空白页-HTML：选择一种布局,六、AP元素布局,AP 元素：绝对定位元素，是分配有绝对位置的 HTML 页面元素，就是 div 标签或其它任何标签。 AP 元素可以包含文本、图像或其它任何可放置到 HTML 文档