《六章节CSS实现页面布局.ppt》由会员分享，可在线阅读，更多相关《六章节CSS实现页面布局.ppt（22页珍藏版）》请在三一文库上搜索。
1、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; backgro
2、und-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
3、; 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
4、_top position:relative;top:20px; ,段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字 段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字 段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字,定位属性示例,
5、* 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; #second position:absolute;z-index:3; left:250px;top:10px; width:180px;height:150px; background-color:#abcdef; #thi
6、rd position:absolute; background-color:#fedcba; left:-20px;top:50px; #forth position: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 中 ,定位属性示例, #footer position:fixed;
7、bottom:10px; right:10px; width:350px; height:50px; background-color:#fedcba; , 不管页面如何滚动，我自始至终都在这里。 页面正文页面正文页面正文页面正文页面正文页面正文页面正文页面正文页面正文页面正文页面正文页面正文页面正文页面正文页面正文页面正文 ,定位属性示例, #mytable width:250px;border:4px double gray; border-collapse:collapse; #mytable td vertical-align:top;border:1px solid gray; #m
8、ydiv width: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; ma
9、rgin:5px; #myul li float:left; background-color:#cccccc; margin:2px; width:100px; text-align:center; a text-decoration:none; , 真有趣！ 段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字
10、段落文字段落文字段落文字段落文字 菜单项一 菜单项二 菜单项三 菜单项四 ,分类属性示例, .imgfloat float:left; clear:both; #mypclear:left; , 段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字,CSS的盒状模型(Box Model),页面中可放置内容的窗口元素称为盒子即Box。 每个盒子都有内容Content，内边距Padding，边框B
11、order，外边距Margin。 盒状模型用于描述它们之间的层次、关系与相互的影响。,CSS盒状模型,盒状模型示例, * margin:0;padding:0;border:none; body background-color:white; #divouter background-color:#abcdef; margin:40px; padding:20px; border:solid 5px blue; width:400px; height:240px; #divinner background-color:#fedcba; margin:20px; padding:40px; bo
12、rder: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标签没有明确的语义。它们一般作为其他页面元素的容器，以方便实现样式设置。,