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

《网页设计与制作(HTML+CSS)》教学设计(教案)
课程名称：网页设计与制作(HTML+CSS) 授课年级：XX年级
授课学期：XX学年第一学期
教师姓名：某某老师
XX年XX月XX日
课题名称第7章浮动与定位
计划
学时
6 课时
内容分析
默认情况下，网页中的元素会在浏览器窗口中从上到下或从左到右一一罗列。

如
果仅仅按照这种默认的方式进行排版，网页将会单调、混乱。

为了使网页的排版
更加丰富、合理，在CSS中可以对元素设置浮动和定位样式。

本课程将对元素的
浮动和定位进行详细讲解。

教学目标
及基本要
求
要求学生初学者能够熟练地运用浮动和定位进行网页布局，掌握清除浮动的几种
常用方法，为后面学习网页布局打下良好的基础。

重点及措
施
教学重点：清除浮动的几种方法、overflow属性、相对定位和绝对定位的应用。

难点及措
施
教学难点：当浮动元素对周围其他元素产生影响时，如何选择恰当的方法清除浮
动。

教学方式教学采用教师课堂讲授为主，使用教学PPT讲解
教
学
过
程
第一课时
（认识浮动、元素的浮动属性float）
认识浮动
初学者在设计一个页面时，通常会按照默认的排版方式，将页面中的元素从上到下一一罗列，如下图所示。

通过这样的布局制作出来的页面看起来呆板、不美观，然而大家在浏览网页时，会发现页面中的元素通常会按照左、中、右的结构进行排版，如下图所示。

通过这样的布局，页面会变得整齐、有节奏。

想要实现第二张图所示的效果，就需要为元素设置浮动。

所谓元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。

元素的浮动属性float
定义浮动
在CSS中，通过float属性来定义浮动，其基本语法格式如下：
选择器{float:属性值;}
在上面的语法中，常用的float属性值有三个，分别表示不同的含义，具体如下：
●left：元素向左浮动
●right:元素向右浮动
●none:元素不浮动（默认值）
✧不设置浮动
当对页面中的所有元素均不应用float属性，也就是说元素的float属性值都为其默认值none。

页面效果如下图所示。

可见如果不对元素设置浮动，则该元素及其内部的子元素将按照标准文档流的样式显示，即块元素占页面整行。

✧box01左浮动
以box01为设置对象，对其应用左浮动样式，具体CSS代码如下：
.box01 { /*定义box01左浮动*/ float:left;
}
保存HTML文件，刷新页面，效果如下图所示。

通过上图容易看出，设置左浮动的box01漂浮到了box02的左侧，也就是说box01不再受文档流控制，出现在一个新的层次上。

✧box02左浮动
在上述案例的基础上，继续为box02设置左浮动，具体CSS代码如下：
.box01,.box02{ /*定义box01、box02左浮动*/
float:left;
}
保存HTML文件，刷新页面，效果如下图所示。

在上图中，box01、box02、box03三个盒子整齐地排列在同一行，可见通过应用“float:left;”样式可以使box01和box02同时脱离标准文档流的控制向左漂浮。

✧box03左浮动
在上述案例的基础上，继续为box03设置左浮动，具体CSS代码如下：
.box01,.box02,.box03{ /*定义box01、box02、box03左浮动*/ float:left;
}
保存HTML文件，刷新页面，效果如下图所示。

在上图中，box01、box02、box03三个盒子排列在同一行，同时，周围的段落文本将环绕盒子，出现了图文混排的网页效果。

float的另一个属性值“right”在网页布局时也会经常用到，他与“left”属性值的用法相同但方向相反。

✧注意
对元素同时定义float和margin-left或margin-right属性时，在IE6浏览器中，出现的左外边距或右外边距将是所设置的margin-left或margin-right值的两倍。

这就是网页制作中经常出现的IE6双倍边距问题。

第二课时
（清除浮动属性clear、常用的几种清除浮动的方法）
清除浮动属性clear
由于浮动元素不再占用原文档流的位置，所以他会对页面中其他元素的排版产生影响。

在CSS中，clear属性用于清除浮动，其基本语法格式如下：选择器{clear:属性值;}
在上面的语法中，clear属性的常用值有三个，分别表示不同的含义，具体如下：
●left：不允许左侧有浮动元素（清除左侧浮动的影响）
●right：不允许右侧有浮动元素（清除右侧浮动的影响）
●both：同时清除左右两侧浮动的影响
接下来对上面案例中的<p>标记应用clear属性，来清除周围浮动元素对段落文本的影响。

在<p>标记的CSS样式中添加如下代码：
clear:left; /*清除左浮动*/
添加该样式后，保存HTML文件，刷新页面，效果如下图所示。

常用的几种清除浮动的方法
clear属性只能清除元素左右两侧浮动的影响。

然而在制作网页时，经常会遇到一些特殊的浮动影响，例如，对子元素设置浮动时，如果不对其父元素定义高度，则子元素的浮动会对父元素产生影响，如下图所示父元素变成了一条直线。

这里为大家总结三种常用的清除浮动的方法。

✧使用空标记清除浮动
在浮动元素之后添加空标记，并对该标记应用“clear:both”样式，可清除元素浮动所产生的影响，这个空标记可以为<div>、<p>、<hr />等任何标记。

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

这时效果如下图所示。

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

由于上述方法在无形中增加了毫无意义的结构元素（空标记），因此在实际工作中不建议使用。

✧使用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属性
当盒子内的元素超出盒子自身的大小时，内容就会溢出（IE6除外），这时如果想要规范溢出内容的显示方式，就需要使用CSS的overflow属性，其基本语法格式如下：
选择器{overflow:属性值;}
在上面的语法中，overflow属性的常用值有visible、hidden、auto和scroll四个。

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

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

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

当内容溢出时，如下图所示。

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

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

第四课时
（元素的定位属性、常见的几种定位模式）
元素的定位属性
元素的定位属性主要包括定位模式和边偏移两部分。

✧定位模式
在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：选择器{position:属性值;}
在上面的语法中，position属性的常用值有四个，分别表示不同的定位模式，具体如下：
●static：自动定位（默认定位方式）
●relative：相对定位，相对于其原文档流的位置进行定位
●absolute：绝对定位，相对于其上一个已经定位的父元素进行定位
●fixed：固定定位，相对于浏览器窗口进行定位
✧边偏移
通过边偏移属性top、bottom、left或right，来精确定义定位元素的位置，其取值为不同单位的数值或百分比，对他们的具体解释如下：
●top：顶端偏移量，定义元素相对于其父元素上边线的距离
●bottom：底部偏移量，定义元素相对于其父元素下边线的距离
●left：左侧偏移量，定义元素相对于其父元素左边线的距离
●right：右侧偏移量，定义元素相对于其父元素右边线的距离
常见的几种定位模式
✧静态定位
静态定位是元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。

所谓静态位置就是各个元素在HTML文档流中默认的位置。

任何元素在默认状态下都会以静态定位来确定自己的位置，所以当没有定义position属性时，并不说明该元素没有自己的位置，他会遵循默认值显示为静态位置。

在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。

✧相对定位
相对定位是将元素相对于他在标准文档流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。

对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是他在文档流中的位置仍然保留。

如下图所示：
在
文
档
流
中的位置仍然保留
100px 150px
child-02
如上图中，对child02设置相对定位后，他会相对于其自身的默认位置进行偏移，但是他在文档流中的位置仍然保留。

✧绝对定位
绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素进行定位，若所有父元素都没有定位，则依据body根元素（浏览器窗口）进行定位。

当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。

如下图所示：
100px
150px
在上图中，设置为绝对定位的元素child02，依据浏览器窗口进行定位。

并且，这时child03占据了child02的位置，即child02脱离了标准文档流的控制，不再占据标准文档流中的空间。

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

如下图所示：
✧固定定位
固定定位是绝对定位的一种特殊形式，他以浏览器窗口作为参照物来定义网页元素。

当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

当对元素设置固定定位后，他将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。

不管浏览器滚动条如何滚动，也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

但是，由于IE6不支持固定定位，因此，在实际工作中较少使用。

✧z-index层叠等级属性
当对多个元素同时设置定位时，定位元素之间有可能会发生重叠，如下图所示：
在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index 层叠等级属性，其取值可为正整数、负整数和0。

z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。

第五课时
上机练习（总结，测试题）
1、总结本章内容
2、通过题库发放相关测试题，检查学生对知识的掌握情况。

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

上机一：（考察知识点为元素的浮动属性）
请做出以下效果，并在火狐浏览器测试，效果如下图所示：
要求如下：
1、通过元素的浮动属性制作页面的导航模块。

示例代码如下：
书写HTML代码，具体如下：
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2"/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3<html xmlns="/1999/xhtml">
4<head>
5<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6<title>绿色导航栏</title>
7</head>
8<body>
9<!--这是banner部分-->
10<div class="banner"> <img src="images/banner1.jpg" width="600" height="150" /> </div>
11<!-- 这是nav 部分 -->
12<div class="nav">
13 <ul>
14 <li><a href="#">首页导读</a></li>
15 <li><a href="#">首页导读</a></li>
16 <li><a href="#">首页导读</a></li>
17 <li><a href="#">首页导读</a></li>
18 <li><a href="#">首页导读</a></li>
19 <li><a href="#">首页导读</a></li>
20 </ul>
21</div>
22</body>
23</html>
对应的CSS样式代码如下：
1body, div, ul, li{margin:0; padding:0; list-style:none;}
2body {font-family: Arial, Helvetica, sans-serif; color:#3c3c3c; font-size: 14px;}
3 a {text-decoration: none;color: #690;}
4a:hover {color: #fff;text-decoration: none;}
5.banner {width: 760px;height: 150px;margin: 0 auto;
6background-image: url(images/banner_bg.jpg);}
7.nav {height: 32px;width: 760px;margin: 0 auto;background-image:
url(images/button1_bg.jpg);}
8.nav li {float: left;width: 80px;height: 32px;background:
url(images/button1.jpg) no-repeat;}
9.nav a{display:block;width:80px;height:32px;text-align:center;
line-height:32px;}
10.nav a:hover{background:url(images/button2.jpg) no-repeat;}
上机二：（考察知识点为浮动与定位）
请做出以下效果，并在火狐浏览器测试，效果如下图所示。

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

示例代码如下：
书写HTML代码，具体如下：
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2"/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3<html>
4<head>
5<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
6<title>团购</title>
7</head>
8<body>
9<div class="all"> <span class="fly"><img src="images/top_tu.gif" /></span> <a href="#"><img src="images/adv.jpg" /></a>
10 <h3><a href="#">【12店通用】领航冰品哈根达斯：冰淇淋双球，口味任选2种，节假通用</a></h3>
11 <div class="box">
12 <p class="p1"><strong>¥20.8</strong> 原价¥38</p>
13 <p class="p2"> <a href="#"><img src="images/see.jpg" height="30" width="80" /></a><span><b>32</b>人已购买</span> </p>
14 </div>
15</div>
16</body>
17</html>
对应的CSS样式代码如下：
1body,div,p,h1,h2,h3{margin:0;padding:0;list-style:none;}
2body {font-family:"宋体";font-size:12px;color: #000;}
3a:link,a:visited
{font-size:15px;color:#3e3e3e;text-decoration:none;}
4a: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;}
7h3 {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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2"/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3<html>
4<head>
5<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
6<title>淘宝搜索</title>
7</head>
8<body>
9<div class="box">
10<div class="logo"><img src="images/tb/logo.jpg" /></div>
11<div class="wrap">
12<div class="top">
13<ul>
14<li class="current">宝贝</li>
15<li><a href="#">天猫<span>(淘宝商城)</span></a></li>
16<li><a href="#">店铺</a></li>
17</ul>
18</div>
19<div class="center">
20<div class="c_left"><img src="images/tb/left.jpg" /></div>
21<div class="c_center">
22<input type="text" name="search" />
23</div>
24<div class="c_right">
25<input type="image" src="images/tb/button.jpg" />
26</div>
27<div class="text"> <a href="#">高级搜索</a><br />
28<a href="#">使用帮助</a> </div>
29</div>
30<p class="bottom"> <a href="#">长裙</a><a href="#">哈伦裤</a><a href="#">新款连衣裙</a><a href="#">时尚包包</a><a href="#">中老年夏装
</a><a href="#">男T恤</a><a href="#">iphone4手机壳</a><a href="#">更多>></a> </p>
31</div>
32</div>
33</body>
34</html>
对应的CSS样式代码如下：
1body,ul,li,input,p{margin:0;padding:0;list-style:none;border:0;} 2body{font-family:"宋体";font-size:12px;color:#000;}
3a:link, a:visited{color:#000;text-decoration:none;}
4a: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;}
9ul {width: 647px;height: 23px;}
10ul 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_bg.jpg");}
12ul 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/search.jpg")
no-repeat left center;padding-left:16px;}
17.c_right {float:left;}
18.text {float:left;padding-left:10px;line-height:17px;}
19.bottom {padding-top: 10px;}
20.bottom a {margin-right: 15px;}
思考题和
海量题库尽在“博学谷” 习题
教
学
后
记。