第7章 网页制作-浮动与定位_教学设计(教案)

、

以上述案例为基础，在浮动元素box01、box02、box03之后添加class为box04的空div，然后对box04应用“clear:both;”样式。这时效果如下图所示。

5

5

在上图中，子元素浮动对父元素的影响已经不存在。由于上述方法在无形中增加了毫无意义的结构元素（空标记），因此在实际工作中不建议使用。

 使用overflow属性清除浮动

对元素应用“overflow:hidden;”样式，也可以清除浮动对该元素的影响。继续以上述案例为基础，对父元素应用“overflow:hidden;”样式，来清除子元素浮动对父元素的影响。这时效果如下图所示。

在上图中，子元素浮动对父元素的影响已经不存在。

 使用after伪对象清除浮动

after伪对象也可以清除浮动，该方法只适用于IE8及以上版本浏览器和其他非IE浏览器。继续以上述案例为基础，对父元素应用after伪对象样式， CSS代码如下：

.father:after{ /*对父元素应用after伪对象样式*/

}

display:block;

clear:both;

content:"";

visibility:hidden;

height:0;

这时效果如下图所示。

在上图中，子元素浮动对父元素的影响已经不存在。

第三课时

（overflow属性）

overflow属性

6

6

当盒子内的元素超出盒子自身的大小时，内容就会溢出（IE6除外），这时如果想要规范溢出内容的显示方式，就需要使用CSS的overflow属性，其基本语法格式如下：

选择器{overflow:属性值;}

在上面的语法中，overflow属性的常用值有visible、hidden、auto和scroll四个。

 “overflow:visible;”样式

设置“overflow:visible;”样式后，盒子溢出的内容不会被修剪，而呈现在元素框之外，如下图所示。

 “overflow:hidden;”样式

设置“overflow: hidden;”样式后，盒子溢出的内容将会被修剪且不可见，如下图所示。

 “overflow:auto;”样式

设置“overflow: auto;”样式后，元素框能够自适应其内容的多少，在内容溢出时，产生滚动条，否则，则不产生滚动条。当内容溢出时，如下图所示。

7

7

 “overflow: scroll;”样式

当定义overflow的属性值为scroll时，元素框中也会产生滚动条，如下图所示。

与“overflow: auto;”不同，当定义“overflow: scroll;”时，不论元素是否溢出，元素框中的水平和竖直方向的滚动条都始终存在。

第四课时

（元素的定位属性、常见的几种定位模式）

元素的定位属性

元素的定位属性主要包括定位模式和边偏移两部分。

 定位模式

在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：

选择器{position:属性值;}

在上面的语法中，position属性的常用值有四个，分别表示不同的定位模式，具体如下：

 static：自动定位（默认定位方式）

 relative：相对定位，相对于其原文档流的位置进行定位

 absolute：绝对定位，相对于其上一个已经定位的父元素进行定位

 fixed：固定定位，相对于浏览器窗口进行定位

8

8

 边偏移

通过边偏移属性top、bottom、left或right，来精确定义定位元素的位置，其取值为不同单位的数值或百分比，对他们的具体解释如下：

 top：顶端偏移量，定义元素相对于其父元素上边线的距离

 bottom：底部偏移量，定义元素相对于其父元素下边线的距离

 left：左侧偏移量，定义元素相对于其父元素左边线的距离

 right：右侧偏移量，定义元素相对于其父元素右边线的距离

常见的几种定位模式

 静态定位

静态定位是元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。

任何元素在默认状态下都会以静态定位来确定自己的位置，所以当没有定义position属性时，并不说明该元素没有自己的位置，他会遵循默认值显示为静态位置。在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。

 相对定位

相对定位是将元素相对于他在标准文档流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是他在文档流中的位置仍然保留。如下图所示：

child-02在文档流中的位置仍然保留100px150px

如上图中，对child02设置相对定位后，他会相对于其自身的默认位置进行偏移，但是他在文档流中的位置仍然保留。

 绝对定位

绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素进行定位，若所有父元素都没有定位，则依据body根元素（浏览器窗口）进行定位。当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。如下图所示：

9

9

100px150px

在上图中，设置为绝对定位的元素child02，依据浏览器窗口进行定位。并且，这时child03占据了child02的位置，即child02脱离了标准文档流的控制，不再占据标准文档流中的空间。

另外，对child02设置了绝对定位，当浏览器窗口放大或缩小时，child02相对于其直接父元素的位置都将发生变化。如下图所示：

 固定定位

固定定位是绝对定位的一种特殊形式，他以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

当对元素设置固定定位后，他将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动，也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。但是，由于IE6不支持固定定位，因此，在实际工作中较少使用。

 z-index层叠等级属性

当对多个元素同时设置定位时，定位元素之间有可能会发生重叠，如下图所示：

10

10

在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。

第五课时

上机练习（总结，测试题）

1、总结本章内容

2、通过题库发放相关测试题，检查学生对知识的掌握情况。

上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的熟练程度。

上机一：（考察知识点为元素的浮动属性）

请做出以下效果，并在火狐浏览器测试，效果如下图所示：

要求如下：

1、通过元素的浮动属性制作页面的导航模块。

示例代码如下：

书写HTML代码，具体如下：

1

2 "/TR/xhtml1/DTD/">

3

4

5

/>

6

7

8

11

11

9

10

11

12

22

23

对应的CSS样式代码如下：

1 body, div, ul, li{margin:0; padding:0; list-style:none;}

2 body {font-family: Arial, Helvetica, sans-serif; color:#3c3c3c;

font-size: 14px;}

3 a {text-decoration: none;color: #690;}

4 a:hover {color: #fff;text-decoration: none;}

5 .banner {width: 760px;height: 150px;margin: 0 auto;

6 background-image: url(images/banner_);}

7 .nav {height: 32px;width: 760px;margin: 0 auto;background-image:

url(images/button1_);}

8 .nav li {float: left;width: 80px;height: 32px;background:

url(images/) no-repeat;}

9 .nav a{display:block;width:80px;height:32px;text-align:center;

line-height:32px;}

10 .nav a:hover{background:url(images/) no-repeat;}

上机二：（考察知识点为浮动与定位）

请做出以下效果，并在火狐浏览器测试，效果如下图所示。

12

12

要求如下：

1、运用浮动与定位的属性制作一个常见的团购效果。

示例代码如下：

书写HTML代码，具体如下：

1

2 "/TR/xhtml1/DTD/">

3

4

5

/>

6

7

8

9

16

17

对应的CSS样式代码如下：

1 body,div,p,h1,h2,h3{margin:0;padding:0;list-style:none;}

13

13

2 body {font-family:"宋体";font-size:12px;color: #000;}

3 a:link,a:visited

{font-size:15px;color:#3e3e3e;text-decoration:none;}

4 a:hover {color:#339999;text-decoration:underline;}

5 .all {width:310px;height:auto;border:1px solid #ccc;padding:

15px;margin:80px auto;position:relative;}

6 .fly {position: absolute;left: 0;top:0;}

7 h3 {margin-top:20px;line-height: 20px;}

8 .box {overflow: hidden;margin-top:25px;}

9 .p1 {font-size:14px;color:gray;float:left;}

10 .p1 strong {font-size: 30px;color: #ed5238;font-family: "微软雅黑";}

11 .p2 {float: right;width: 80px;text-align:right;line-height: 20px;}

12 .p2 b{color: #ed5238;}

上机三：（考察知识点为浮动定位属性的综合应用）

请做出以下效果，并在火狐浏览器测试，效果如下图所示：

要求如下：

1、综合运用浮动与定位的属性制作一个淘宝网的导航效果。

示例代码如下：

书写HTML代码，具体如下：

1

2 "/TR/xhtml1/DTD/">

3

4

5

/>

6

7

8

9

33

34

对应的CSS样式代码如下：

1 body,ul,li,input,p{margin:0;padding:0;list-style:none;border:0;}

2 body{font-family:"宋体";font-size:12px;color:#000;}

3 a:link, a:visited{color:#000;text-decoration:none;}

4 a:hover {color: #F27B03;}

5 .box {width: 994px;height:122px;margin:0 auto;}

6 .logo {width: 333px;height:80px;float:left;padding: 42px 0 0 14px;}

7 .wrap {width: 647px;height:122px;float:left;}

8 .top {width: 647px;height:23px;padding-top: 19px;}

9 ul {width: 647px;height: 23px;}

10 ul li {float: left;margin-right: 18px;height: 23px;line-height:

23px;}

11 .current {width: 56px;height: 23px;text-align:

center;color:#FFF;background:url("images/tb/top_");}

12 ul li span {color: #F27B03;}

13 .center {width: 647px;height: 33px;}

14 .c_left {float: left;}

15 .c_center {width:

445px;height:29px;_height:27px;float:left;border-top: 2px solid

#EF8219;border-bottom:2px solid #EF8219;}

16 .c_center input{width: 429px;height: 29px;_height:

27px;_line-height:27px;background: url("images/tb/")

no-repeat left center;padding-left:16px;}

17 .c_right {float:left;}

18 .text {float:left;padding-left:10px;line-height:17px;}

15

15

19 .bottom {padding-top: 10px;}

20 .bottom a {margin-right: 15px;}

思考题和习题

海量题库尽在“博学谷”

教

学

后

记

16

16