CSS定位和布局属性课件.ppt_163文库

资源描述

1、CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程CSS定位和布局属性定位和布局属性第13章CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程13.1 CSS定位属性13.2 CSS布局属性13.3综合案例幼儿园页面设计CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程CSS盒子布局和定位盒子布局和定位本章学习目标：（1）理解网页中BOX的正常流向。（2）会使用top、bottom、right和left属性配合position属性定义偏移量。（3）掌握CSS元素的定位方法，重点掌握static、relative和ab

2、solute定位，理解fixed 和 sticky定位。（4）盒子发生堆叠时，会使用z-index控制堆叠次序。（5）理解盒子内容的裁切。（6）能控制盒子的可见性和溢出方式。（7）能够使用display改变常见元素的显示方式。（8）能够使用float和clear控制浮动定位。CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程13.113.1 CSS定位属性定位属性 CSS的定位方式可以帮助设计者使文档更容易阅读，CSS主要通过position属性进行定位。CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程13.1.1 正常流向正常流向正常流

3、向是预先设定的定位方式。默认情况下网页布局就是按文档流的正常流向，即按HTML的结构顺序。由上而下、由左至右这样的走向就是所谓的正常流向，浏览器也是依据这样的走向来解译我们的编码。换个角度来说，在大部分的情况下，正常流向指的是网页中元素标记的方式。另外，多数的HTML元素都是属于行内元素或块级元素。块级元素里可以包含行内元素和块级元素，而行内元素里不能包含有块级元素。在正常流向中，块级元素盒子会在其父对象盒子中自上而下排列，而行内元素盒子则会按照由左至右的顺序排列。CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程【例13-1】正常流向（13-1.html）示例CSS

4、3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程部分代码如下：divwidth:200px;height:80px;margin:10px;padding:10px;border:2px dashed#000;text-align:center;#div1background:#ba9578;color:#FFF;#div2background:#cef091;color:#000;#div3background:#70c17f;color:#FFF;CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程13.1.2 定位偏移属性定位偏移属性top、

6、center|page|sticky;定位允许定义元素相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口的位置。CSS 使用position 属性控制定位类型，并配合4个定位偏移属性left、right、top和bottom控制偏移量。CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程静态定位static，遵循正常文档流，是所有元素默认的定位方式，此时4个定位偏移属性不会被应用。一般不特别设定，除非要取消继承其它元素的特别定位。相对定位relative，遵循正常文档流，基准位置为其在正常文档流中的位置，并通常需要top、bottom、righ

7、t、left属性配合完成，设定元素相对于原来位置的偏移量。设置为相对定位的元素会偏移某个距离，元素仍然保持其未偏移前的形状，它原来所占的空间仍保留，元素移动后可能会覆盖其它元素。相对定位一开始会按照“正常流向”来定位，所有的盒子会先定好位置。一旦一个盒子按照正常流向得到自己的位置，它还可以相对该位置而偏移，这就是相对定位。1.相对定位相对定位relativeCSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程【例13-2】使用相对定位（13-2.html）CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程部分代码如下：divwidth:200p

8、x;height:80px;margin:10px;padding:10px;border:2px dashed#000;text-align:center;#div1position:static;/*静态定位*/background:#ba9578;color:#FFF;#div2position:relative;/*相对定位*/top:60px;left:30px;background:#cef091;color:#000;#div3position:static;/*静态定位*/background:#70c17f;color:#FFF;bborder:1px solid red;.

9、b2position:relative;/*相对定位*/left:80px;top:60px;CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程 div1div2b元素1b元素2b元素3div3CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程绝对定位absolute，设置为绝对定位的元素从文档流中删除，元素原先在文档流中所占的位置会取消，不再占用原有的空间。绝对定位“相对于”该元素最近的已经定位的祖先元素，若不存在已定位的祖先元素，则一直回溯到body元素。绝对定位的盒子偏移位置不影响常规文档流中的任何元素。绝对定位的盒子不存在正常流向问

10、题，也不会影响到正常流向中的其它BOX。2.绝绝对定位对定位absoluteCSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程【例13-3】使用绝对定位（13-3.html）CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程部分代码如下：divwidth:200px;height:80px;margin:10px;padding:10px;border:2px dashed#000;text-align:center;#div1position:absolute;/*绝对定位*/top:100px;right:30px;background:

11、#ba9578;color:#FFF;#div2position:relative;/*相对定位*/top:60px;left:30px;background:#cef091;color:#000;#div3position:static;/*静态定位*/background:#70c17f;color:#FFF;bborder:1px solid red;.b2position:absolute;/*绝对定位*/left:-20px;top:120px;CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程 div1div2b元素1b元素2b元素3div3CSS3部分H

12、TML5+CSS3网页设计与制作案例教程网页设计与制作案例教程固定定位fixed，与absolute一致，偏移量定位一般以窗口为参考，当出现滚动条时，对象不会随着滚动。元素原有位置空间不保留，对象脱离常规流。固定定位是绝对定位的一个子类，唯一的区别是对于连续介质，固定BOX并不随着文档的滚动而移动，类似于固定的背景图像。对于分页介质，固定定位BOX在每页中重复，当需要在每一放置同一个内容时（例如在底部放置一个签名），这个方法非常有用。3.固定定位固定定位fixedCSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程【例13-4】使用固定定位（13-4.html）CSS

13、3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程部分代码如下：bodyheight:700px;headerposition:fixed;width:100%;height:100px;top:0px;right:0px;bottom:auto;left:0px;border:1px dashed black;color:#FFF;background-color:#5f6062;text-align:center;line-height:3;asideposition:fixed;width:200px;height:auto;top:100px;right:auto;

14、bottom:100px;left:0px;border:1px dashed black;background-color:#f6edc6;text-align:center;line-height:3;CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程sectionposition:fixed;width:auto;height:auto;top:100px;right:0px;bottom:100px;left:200px;border:1px dashed black;background-color:#fde8ed;text-align:center;lin

15、e-height:3;footerposition:fixed;width:100%;height:100px;top:auto;right:0;bottom:0;left:0px;border:1px dashed black;background-color:#f0ede4;text-align:center;line-height:3;CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程 sticky是CSS3新增关键字，对象在常态时遵循常规流，也就是当对象在屏幕中正常显示时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现就是现实中我们见到的吸附效果

16、。sticky定位屏幕中正常显示时遵循文档流，而当随着滚动条移动可能卷到屏幕外边时，则会表现出fixed的吸附效果。4.吸附定位吸附定位stickyCSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程【例13-5】使用吸附定位（13-5.html）CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程部分代码如下：divwidth:200px;height:80px;margin:10px;padding:10px;border:2px dashed#000;text-align:center;#div1position:static;/*静态定位

17、*/background:#ba9578;color:#FFF;#div2position:sticky;/*吸附定位*/top:140px;left:100px;background:#cef091;color:#000;#div3position:static;/*静态定位*/background:#70c17f;color:#FFF;div1div2div3CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程13.1.4 分层呈现分层呈现z-index基本语法：基本语法：z-index:auto|数字;语法说明：语法说明：l auto：元素在当前层叠上下文中的层叠

18、级别是0。元素不会创建新的局部层叠上下文，除非它是根元素。l 数字：用整数值来定义堆叠级别。z-index的值越小，表明该BOX层级越低，堆叠发生时处于下层，反之则处于上层。如果两个元素的z-index一样，则按照出现的先后顺序来决定，出现较晚的元素堆叠在上层。CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程【例13-6】设置堆叠次序（13-6.html）CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程部分代码如下：divposition:staic;width:200px;height:80px;margin:10px;padding:

19、10px;border:2px dashed#000;text-align:center;#div1position:absolute;/*绝对定位*/z-index:2;/*堆叠次序*/top:0px;left:0px;background:#ba9578;color:#FFF;#div2position:absolute;/*绝对定位*/z-index:6;/*堆叠次序*/top:70px;left:50px;background:#cef091;color:#000;#div3position:absolute;/*绝对定位*/z-index:4;/*堆叠次序*/top:140px;le

21、位的裁切：从设定值开始裁切直到最右边和最下边，即“右-下”方位的auto值为盒子的实际宽度和高度。CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程【例13-7】使用裁切（13-7.html）CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程部分代码如下：divposition:absolute;/*绝对定位*/width:180px;height:60px;font-size:24px;line-height:2;background:#cef091;border:2px dashed#000;text-align:center;#div1

22、left:20px;top:20px;#div2left:220px;top:20px;clip:rect(0px auto 50px 40px);/*裁切*/未被裁剪的效果被裁切后的效果CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程13.2 CSS布局属性布局属性 CSS布局（Layout）属性控制已应用CSS样式规则的HTML元素与页面上的其它元素进行交互。例如，隐藏元素、设置元素的浮动效果、设置溢出属性确定滚动条能否出现等。CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程13.2.1 可见性可见性visibility基本语法：基本

23、语法：visibility:visible|hidden|collapse;语法说明：语法说明：l visible：元素可见。l hidden：元素隐藏，但元素保留其占据的原有空间，影响页面的布局。l collapse：主要用来隐藏表格的行或列。隐藏的行或列能够被其它内容使用。对于表格外的其它对象，其作用等同于hidden。CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程【例13-8】设置可见性（13-8.html）CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程可见性divwidth:200px;height:80px;margin:1

24、0px;padding:10px;border:2px dashed#000;text-align:center;#div1visibility:visible;/*可见*/background:#ba9578;部分代码如下：color:#FFF;#div2visibility:hidden;/*隐藏*/background:#cef091;color:#000;#div3background:#70c17f;.vcvisibility:collapse;/*隐藏表格行列*/CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程显示隐藏单元格1 单元格2单元格3 部分

27、y、page-x-controls、page-y-controls和fragments属性值都是CSS3新增，目前主流浏览器均不支持，不做详述。CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程【例13-9】设置CSS溢出效果（13-9.html）CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程部分代码如下：divwidth:200px;height:100px;margin:30px 5px;padding:5px;border:1px solid#000;text-align:center;float:left;background:#

28、daf6f7;#div1overflow:visible;/*溢出内容可见，不做处理*/#div2overflow:hidden;/*隐藏溢出容器的内容且不出现滚动条*/#div3overflow:scroll;/*无论溢出与否都有滚动条*/#div4overflow:auto;/*按需出现滚动条*/CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程13.2.3 显示显示display基本语法：基本语法：display：none|inline|block|list-item|inline-block|table|inline-table|table-caption|t

30、为块级元素。l list-item：指定对象为列表项目。l inline-block：指定对象为内联块元素。l table：指定对象作为块元素级的表格。类同于html标记。l inline-table：指定对象作为内联元素级的表格。类同于html标记。l table-caption：指定对象作为表格标题。类同于html标记。l table-cell：指定对象作为表格单元格。类同于html标记。l table-row：指定对象作为表格行。类同于html标记。l table-row-group：指定对象作为表格行组。类同于html标记。l table-column：指定对象作为表格列。类同于htm

31、l标记。l table-column-group：指定对象作为表格列组显示。类同于html标记。l table-header-group：指定对象作为表格标题组。类同于html标记。l table-footer-group：指定对象作为表格脚注组。类同于html标记。l run-in：CSS3新增关键字，根据上下文决定对象是内联对象还是块级对象。l box：CSS3新增关键字，将对象作为弹性伸缩盒显示（伸缩盒最老版本）l inline-box：CSS3新增关键字，将对象作为内联块级弹性伸缩盒显示（伸缩盒最老版本）。l flexbox：CSS3新增关键字，将对象作为弹性伸缩盒显示（伸缩盒过渡版本

32、）。l inline-flexbox：CSS3新增关键字，将对象作为内联块级弹性伸缩盒显示（伸缩盒过渡版本）。l flex：CSS3新增关键字，将对象作为弹性伸缩盒显示（伸缩盒最新版本）。l inline-flex：CSS3新增关键字，将对象作为内联块级弹性伸缩盒显示（伸缩盒最新版本）。CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程【例13-10】使用display构造表格（13-10.html）CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程部分代码如下：bodyfont-size:13px;line-height:1.5;text-

33、align:center;.tabledisplay:table;/*显示为表格*/margin:0 auto;border-collapse:collapse;border:1px solid#ccc;.table-captiondisplay:table-caption;/*显示为表格标题*/font-size:16px;text-align:center;CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程.table-header-group /*显示为表格标题行*/display:table-header-group;background:#eee;font-

34、weight:bold;.table-row-group /*显示为表格行组*/display:table-row-group;.table-rowdisplay:table-row;/*显示为表格行*/*表格行组中的表格行鼠标经过时背景色为淡黄色#ffffcc*/.table-row-group.table-row:hover background:#ffffcc;.table-celldisplay:table-cell;/*显示为表格单元格*/padding:0 5px;border:1px solid#ccc;width:100px;CSS3部分HTML5+CSS3网页设计与制作案例教

35、程网页设计与制作案例教程学生信息表学号姓名年龄201677001袁天一19201677002马丽娜18201677003侯雨欣20CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程13.2.4 浮动浮动float 基本语法：基本语法：float:none|left|right语法说明：语法说明：lnone：设置元素不浮动；lleft：设置元素浮在左边；lright：设置元素浮在右边。CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程【例13-11】使用浮动效果（13-11.html）CSS3部分HTML5+CSS3网页设计与制作案例教程网页设

36、计与制作案例教程部分代码如下：浮动sectionwidth:500px;height:120px;border:1px solid#000;margin:10px;background:#f3de83;h1,h2,h3background:#daf6f7;margin:10px;padding:5px;border:1px solid#000;font-size:14px;text-align:center;height:auto;h1width:60px;h2width:100px;h3width:150px;.float_nonefloat:none;/*不浮动*/.float_leftf

37、loat:left;/*浮动在左*/.float_rightfloat:right;/*浮动在右*/CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程 H1H2H3 H1H2H3 H1H2H3CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程13.2.5 清除清除clear基本语法：基本语法：clear:none|left|right|both;语法说明：语法说明：lnone：允许两边都可以有浮动元素。lboth：不允许有浮动元素。lleft：不允许左边有浮动元素。lright：不允许右边有浮动元素。CSS3部分HTML5+CSS3网页设计与

38、制作案例教程网页设计与制作案例教程【例13-12】使用清除浮动（13-12.html）CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程部分代码如下：sectionwidth:500px;height:120px;border:1px solid#000;margin:10px;background:#f3de83;h1,h2,h3background:#daf6f7;margin:10px;padding:5px;border:1px solid#000;font-size:14px;text-align:center;height:auto;h1width:60p

39、x;h2width:100px;h3width:150px;h4width:200px;padding:10px;background:#f9aa9d;border:2px dashed#000;font-size:14px;text-align:center;pfont:13px/1.5 宋体;.float_nonefloat:none;/*不浮动*/.float_leftfloat:left;/*浮动在左*/.float_rightfloat:right;/*浮动在右*/.clear_both /*清除两侧浮动*/clear:both;CSS3部分HTML5+CSS3网页设计与制作案例教程

40、网页设计与制作案例教程 H1左浮动H2左浮动H3右浮动H4不浮动 H1左浮动H2左浮动H3右浮动段落文字，不浮动，不清除浮动时效果。段落文字，不浮动，不清除浮动时效果。段落文字，不浮动，不清除浮动时效果。段落文字，不浮动，不清除浮动时效果。CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程 H1左浮动H2左浮动H3右浮动H4不浮动，清除两侧浮动 H1左浮动H2左浮动H3右浮动段落文字，不浮动，除浮左右两侧动时效果。段落文字，不浮动，除浮左右两侧动时效果。段落文字，不浮动，除浮左右两侧动时效果。段落文字，不浮动，除浮左右两侧动时效果。CSS3部分HTML5+CSS3网页

41、设计与制作案例教程网页设计与制作案例教程13.3 综合实例综合实例幼儿园页面设幼儿园页面设计计CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程【例13-13】CSS布局定位综合案例（13-13.html&css13-13.css）CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程园内介绍家园互动宝贝风采特色课程教师天地信息中心健康快车部分HTML代码如下：CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程中秋节放假按国家规定为期三天，分别为9月15、16和17日，即周四、周五和周六，周日照常上课。

42、预祝您节日愉快！CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程园长信箱资源共享互助论坛党员之家家长您好！.CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程今天：10金秋十月，爱心传递幼儿十月精彩图集大放送，萌娃的幼儿园生活，爸爸妈妈看过来（图）。9月20日：快乐中秋，幸福童年幼儿园大型月饼DIY活动纪实，看小厨师如何嗨翻天（图）。9月14日：为留守儿童献爱心9月12日，幼儿园小朋友为留守儿童送出玩具和图书（图）。8月16日：幼儿歌咏会“我是小歌手”大型亲子演唱会8月6日隆重开唱（图）。5月15日：快乐六一，欢乐童年大一班小朋

43、友积极排练木偶剧匹诺曹（图）。CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程版权所有© 清华大学出版社本书编委 CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程/*全局样式*/bodytext-align:center;margin:0px;pmargin:10px;font:13px/1.8 宋体;text-indent:2em;text-align:left/*外部父div样式开始*/#containerwidth:880px;margin:0 auto;/*外部父div样式结束*/CSS代码如下：/*导航区域样式开始*

44、/#naviclear:both;/*不允许两侧有浮动*/background:#00a8ce;margin:5px 15px;height:36px;border:3px#fff solid;border-radius:10px;box-shadow:0 0 2px 2px#CCCCCC;#navi span /*导航条中span元素样式*/display:block;/*显示为块级元素*/float:left;/*浮动在左*/width:80px;padding:5px;margin:10px 0px;font:14px 黑体;color:#FFF;CSS3部分HTML5+CSS3网页设计

45、与制作案例教程网页设计与制作案例教程#navi form /*导航区表单样式*/float:right;/*浮动在右*/margin:3px;.sinput /*导航区表单文本框样式*/width:100px;height:21px;padding:4px 7px;color:#737272;background:#95e3f3;border:1px solid#787575;border-radius:3px 0 0 3px;.sbtn /*导航区表单搜索按钮样式*/width:60px;height:31px;margin-left:-10px;padding:0 12px;border-

46、radius:0px 3px 3px 0px;border:1px solid#787575;background-color:#4c4b4b;font-size:13px;color:#f3f7fc;/*导航区域样式结束*/CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程/*主体部分横向第一栏样式开始*/#main1clear:both;/*不允许两侧有浮动*/margin:2px;height:340px;#main1_leftfloat:left;width:220px;height:340px;background:url(images/board.gif)

47、no-repeat center top;#main1_rightfloat:right;width:656px;#main1_left pmargin:60px 50px;/*内容部分横向第一栏样式结束*/CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程/*内容部分横向第二栏样式开始*/#main2clear:both;margin:2px;height:196px;#main2_left /*内容部分横向第二栏左侧样式*/width:220px;float:left;/*浮动在左*/#main2_right /*内容部分横向第二栏右侧样式*/float:righ

48、t;/*浮动在右*/width:654px;border:1px#a4db18 solid;border-radius:5px;#main2_left ul /*内容部分横向第二栏左侧列表样式*/margin:0;padding:0;#main2_left ul li /*内容部分横向第二栏左侧列表项样式*/list-style:none;font:13px/1.8 宋体;margin:5px auto;padding:3px;border:1px#ebf811 solid;background:#a4db18;width:85%;border-radius:4px;#main2_left ul li:hover /*鼠标经过内容部分横向第二栏左侧列表项样式*/background:#ebf811;/*内容部分横向第二栏样式结束*/

展开阅读全文