CSS实现页面布局.ppt
CSS实现页面布局,第六章,本章关键字,float 浮动div 层span 层absolute 据对定位,本章目标,了解与页面布局相关的CSS属性理解CSS的盒状模型理解DIV标签和SPAN标签掌握CSS实现页面布局,与页面布局相关的CSS样式属性,外边距和内边距 尺寸 定位 分类,外边距和内边距,外边距和内边距属性示例,*margin:0;padding:0;body background-color:#fedcba;#outerDiv border:1px solid blue;width:400px;margin:20px;padding:10px;background-color:#abcdef;#innerDiv border:1px solid red;width:300px;margin:20px;padding:10px;background-color:#cccccc;p border:1px solid green;,这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。,尺寸,尺寸属性示例,CSS样式属性_尺寸#mytable height:180px;border:4px double black;border-collapse:collapse;#mytable tdwidth:150px;border:1px solid gray;pline-height:28px;,段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字单元格单元格段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字,定位,定位属性示例,p border:1px solid gray;#p_pos_left position:relative;left:20px;#p_pos_top position:relative;top:20px;,段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字,定位属性示例,*margin:0px;padding:0px;div border:1px solid blue;p border:1px dashed red;#first position:absolute;z-index:1;left:20px;top:10px;width:220px;height:250px;background-color:#abcdef;#secondposition:absolute;z-index:3;left:250px;top:10px;width:180px;height:150px;background-color:#abcdef;#third position:absolute;background-color:#fedcba;left:-20px;top:50px;#forthposition:absolute;z-index:2;left:100px;top:120px;width:180px;height:100px;background-color:red;,first div 位于 body 中second div 位于 body 中third div 位于 second div 中forth div 位于 body 中,定位属性示例,#footerposition:fixed;bottom:10px;right:10px;width:350px;height:50px;background-color:#fedcba;,不管页面如何滚动，我自始至终都在这里。页面正文页面正文页面正文页面正文页面正文页面正文页面正文页面正文页面正文页面正文页面正文页面正文页面正文页面正文页面正文页面正文,定位属性示例,#mytablewidth:250px;border:4px double gray;border-collapse:collapse;#mytable tdvertical-align:top;border:1px solid gray;#mydivwidth:300px;height:250px;overflow:scroll;border:1px solid blue;,段落文字段落文字单元格单元格单元格H2OY=2X2+3X+4,分类,分类属性示例,body cursor:move;p display:inline;#mydiv display:none;,第一个段落第二个段落div的内容第三个段落第四个段落第五个段落,分类属性示例,#mydiv width:80px;border:1px solid gray;text-align:center;float:right;margin:5px;#myul li float:left;background-color:#cccccc;margin:2px;width:100px;text-align:center;a text-decoration:none;,真有趣！段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字菜单项一菜单项二菜单项三菜单项四,分类属性示例,.imgfloatfloat:left;clear:both;#mypclear:left;,段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字,CSS的盒状模型(Box Model),页面中可放置内容的窗口元素称为盒子即Box。每个盒子都有内容Content，内边距Padding，边框Border，外边距Margin。盒状模型用于描述它们之间的层次、关系与相互的影响。,CSS盒状模型,盒状模型示例,*margin:0;padding:0;border:none;body background-color:white;#divouterbackground-color:#abcdef;margin:40px;padding:20px;border:solid 5px blue;width:400px;height:240px;#divinnerbackground-color:#fedcba;margin:20px;padding:40px;border:solid 10px green;width:200px;height:120px;,Content,CSS实现页面布局,使用div标签分割页面中的各组元素。使用float、clear、position、left、top等样式属性控制各个div的位置。使用width、height属性控制div的大小。,总结,margin属性描述元素的外边距，padding属性描述元素的内容与边框之间的间隙。width属性和height属性描述元素内容的尺寸。position属性描述元素的定位方式，默认为static，其他定位方式还有absolute、relative、fiexed。display属性和visibility属性描述元素如何显示及是否显示。float属性和clear属性描述元素向哪一侧浮动及禁止哪一侧的浮动元素。页面上的一个元素即是一个盒子，盒子由内容、间隙、边界、边距组成。盒状模型描述盒子的各个组成部分之间的关系。多个元素可以在垂直于浏览器平面的方向上层叠，z-index属性描述它们的层叠顺序。div标签和span标签没有明确的语义。它们一般作为其他页面元素的容器，以方便实现样式设置。,
