/23
子
项
目
项目4 制作弹出登录框
主讲：***
2025年1月17日 JavaScript动态网页设计 1
子
项
目
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 2
学习任务
任务1 初识CSS样式
任务2 CSS选择器
任务6 制作弹出登录框
任务3 CSS盒子模型
任务4 CSS布局模型
任务5 制作图片轮换效果
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 3
本任务将从CSS样式简介、CSS代码语法和CSS引入方式三个方面来认识CSS样式。
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 4
p{ font-size:12px;
color:red;
font-weight:bold;
}
网页主要由结构（Structure）、表现（Presentation）和行为（Behavior）三部分组
成。
HTML对应结构部分，它是网页内容的载体，决定网页的结构和内容，即“有什么”。
JavaScript对应行为部分，它通过控制网页的行为来实现特殊效果，即“做什么”。
CSS对应表现部分，它就像网页的外衣，设定了网页的表现样式，即“什么样子”。
下面就是一种典型的CSS代码，它的作用是设置网页中所有<p>和</p>标签范围内的文
字的字体大小为12px，字体颜色为红色，并加粗。
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 5
CSS样式的代码由选择器及一条或多条声明组成，每条声明由一个属性和一个值组
成，代码格式如下：
选择器{属性1:值1;属性2:值2;属性3:值3;……}
对应的示例代码如下：
p{font-size:12px;color:red;}
选择器，又称选择符，用于指出网页中要应用样式规则的元素。
英文花括号“｛｝”中的内容就是声明，它由一个属性和一个值组成，属性与值之
间用英文冒号“:”分隔，每条声明之间用英文分号“;”分隔。
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 6
CSS样式为4种：行内样式、内嵌样式、链接样式和导入样式。
1、行内样式
行内样式是最简单、最直接的一种CSS引入方式，它通过设置HTML标签的style属性来实现
样式的应用，具体的写法如下：
<p style = "color:#F00;font-size:12px;">段落中的文字</p>
从上面的示例代码中可以看出，添加行内样式的做法是在HTML标签中添加style=""，引号
中放入想设置的样式代码。但这样的做法有很多缺点，如违背网页设计结构与表现分离的原则、
网页文件太大、不利于搜索引擎抓取网页内容、网页后期维护不方便等。因此，在设计网页时
不推荐使用行内样式。
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 7
2、内嵌样式
内嵌样式的做法是将CSS代码写在网页代码中的<head>与</head>标签之间，并且用<style>
和</style>进行声明，具体写法如下：
<head>
……
<style type = "text/css">
p{
color:#F00;
font-size:12px;
}
a{text-decoration:line-through;}
</style>
</head>
使用内嵌样式的缺点也很明显，CSS代码写在网页中会使网页文件变大，后期维护也不方便。
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 8
3、链接样式
链接样式将CSS代码写在单独的文件中，然后在<head>与</head>之间通过<link>标签引入
该文件，从而实现样式的应用。具体写法如下：
<head> <link href = "css/" rel = "stylesheet" type = "text/css"/>
</head>
CSS样式的引入是通过<link>标签实现的。该标签的属性href用于指明欲引入的CSS文件的
路径；属性type规定被链接文档的MIME类型，这里指明是CSS代码；属性rel规定当前文档与被
链接文档之间的关系，目前只有“stylesheet”值得到了所有浏览器的支持，指明被链接的文
档是一个样式表。
链接样式实现了负责页面框架的HTML代码与负责页面表现的CSS代码的分离，使网页的前期
制作和后期维护变得十分方便，所以建议读者多采用链接样式。
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 9
4、导入样式
导入样式采用@import将CSS样式文件导入网页文件中，在HTML初始化时，被导入的样式文
件中的CSS代码会成为文件的一部分，类似第二种内嵌样式。导入样式的具体写法如下：
<head>
<style type = "text/css">
@import url("css/");
</style>
</head>
样式的导入是通过关键字@import实现的，url()指明样式文件的相对地址。
由于导入样式的原理是将CSS样式文件的内容导入网页中，导入样式与内嵌样式一样会使网
页文件变大，后期维护也不方便，因此不建议使用导入样式。
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 10
要使用CSS对HTML页面中的元素实现一对一、一对多或者多对一的控制，就需要用到
CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。
每一条CSS样式定义由两部分组成，形式如下：
选择器{
样式;
}
选择器指明了{}中的“样式”的作用对象，也就是作用于网页中的哪些元素。
通过CSS选择器可以精确地筛选出想要控制的HTML元素。
常用的CSS选择器有标签选择器、类选择器、ID选择器、后代选择器和子选择器、分
组选择器、伪类选择器、通用选择器等。
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 11
标签选择器其实就是HTML代码中的标签。一个完整的HTML页面由很多不同的标签组成，而
标签选择器则决定哪些标签采用相应的CSS样式。若给<img>标签声明某种样式，则网页中的所
有<img>标签都会应用该样式。
范例4-2：给网页中所有图
片加红色边框。
创建网页，引入链
接样式css/，网页的主
要代码如右所示：
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset =
utf-8"/>
<title>范例4-1</title>
<link href = "css/" rel = "stylesheet" type = "text/css"/>
</head>
<body>
<div>图片1</div>
<img src = "imgs/" width = "171" height = "114"/>
<div>图片2</div>
<img src = "imgs/" width = "171" height = "114"/>
</body>
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 12
运行效果：
img{border-width:3px;border-color:#F00;border-style:solid;}
在样式文件中设置如下样式：：
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 13
类选择器在CSS样式编码中是最常用到的，它以一种独立于文档元素的方式来指定样式。
类选择器中定义的样式可以应用到任何元素上，属于自定义的样式。
类选择器可以单独使用，也可以与其他元素结合使用。
一个HTML元素可以同时关联多个类选择器，各类选择器之间以空格隔开。
类选择器的命名以“.”开头，可以包含字符[a-zA-Z0-9]、连字号（-）和下画线（_），
不能以数字或一个连字号后跟数字开头。常见命名如“.font12px”“.red”“.subnav”等。
选择器的示例代码如下：
.font12px{font-size:12px;}
要应用类选择器中定义的样式，需要将类选择器的样式与元素关联，做法是给目标元素的
属性class指定一个值，该值是类选择器名字中“.”后面的部分。如：
<div class = "font14px">浮动广告</div>
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 14
范例4-2：将网页中标签<h1>和标签<p>内的文字设置为红色，背景为灰色
创建网页，引入链
接样式css/，网页的主
要代码如右：
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset =
utf-8"/>
<title>范例4-2</title>
<link href = "css/" rel = "stylesheet" type = "text/css"/>
</head>
<body>
<h1 class = "red">
标签h1中的文字
</h1>
<p class = "red">
标签p中的文字
</p>
</body>
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 15
运行效果：
.red{color:#F00; background-color:#CCC;}
在样式文件中设置如下样式：
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 16
ID选择器可以为标有特定ID的HTML元素指定特定的样式。HTML元素的ID由属性id指定，如
id = "green"，示例代码如下：
<p id = "green">该段落中的文字是绿色</p>
ID选择器则以"#"来定义，示例代码如下：
#green{color:#0F0;}
引入上述CSS代码后，网页中ID为green的元素会自动应用设定的样式，即文字颜色为绿色。
在一个HTML文档中，ID选择器只能使用一次，而且仅有一次。而类选择器可以使用多次，
一个HTML元素可以同时关联多个类选择器。
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 17
范例4-3：将网页中ID为red的标签中的文字颜色设置为红色，将ID为green的标签中的文字
颜色设置为绿色。
创建网页，引入链
接样式css/，网页的主
要代码如右：
<head>
……
<link href = "css/" rel = "stylesheet" type = "text/css"/>
</head>
<body>
<p id = "red">
该段落中的文字是红色
</p>
<p id = "green">
该段落中的文字是绿色
</p>
<p>
该段落无ID，文字默认黑色
</p>
</body>
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 18
运行效果：
#red{color:#F00;}
#green{color:#0F0;}
在样式文件中设置如下样式：
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 19
当HTML元素发生嵌套时，内层的元素就成为外层元素的后代。如元素B嵌套在元素A内部，B
就是A的后代。定义后代选择器时，外层的元素写在前面，内层的元素写在后面，中间用空格分
隔。后代选择器会影响到它的各级后代，没有层级限制。代码示例如下：
div p{color: red;}
子选择器是一种特殊的后代选择器，用来选择特定元素的直接子元素，只会影响它的第一
层子元素，其他孙辈元素或更深层次的元素不会受影响。定义子选择器时，外层的元素写在前
面，子元素写在后面，中间用大于号相连。代码示例如下：
div>p{color:red;}
上述CSS代码只会使div下的第一层p元素中的文本变为红色。
子元素选择器不仅可以使用标签的名称，而且可以使用其他的选择器，如div>#red、
div>.left。
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 20
范例4-4：将网页中<ul>
下的所有链接文字设置为红色、
有下画线效果；将div下的直
接子标签<a>中的文字（即链
接文字）设置为蓝色、有删除
线效果。。
创建网页，引入链
接样式css/，网页的主
要代码如右：
<head><link href = "css/" rel = "stylesheet" type =
"text/css"/></head>
<body>
<ul>
<li><a href = "/home/">首页</a></li>
<li><a href = "/xygk/">学院概况</a></li>
<li>
<a href = "/gljg/">管理机构</a>
<ul>
<li><a href = "/jwc/">教务处</a></li>
<li><a href = "/xsc/">学生处</a></li>
</ul>
</li>
<li><a href = "/jxbm/">教学部门</a></li>
</ul>
<div>
<h3><a href = "#">学院新闻</a></h3>
<a href = "#">我校举行期末总结会议</a><br/>
<a href = "#">我校领导进行期末离校检查</a><br/>
</div></body>
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 21
运行效果：
ul a{ color:#F00; text-decoration:underline;}
div>a{ color:#0F0; text-decoration:line-through;}
在样式文件中设置如下样式：
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 22
当多个对象定义了相同的样式时，就可以把它们分成一组，这样能够简化代码。其实分组
选择器不是一种选择器类型，而是一种选择器使用方法。分组选择器使用逗号把同组内的不同
对象分隔，示例代码如下：
h1,h2,h3,h4,h5,h6,p{
line-height:22px;
}
上述分组选择器的目的是，定义所有级别的标题和段落的行高为22px。其中，<h1>…<h6>
是代表6个不同级别标题的HTML标签，line-height用于定义一行文字的高度。
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 23
伪类选择器可以让同一个HTML标签在不同状态下会显示出不同的样式，伪类用冒号来表示，
代码示例如下：
a:hover{color:#F00; text-decoration:none;}
上述代码实现了当鼠标悬停在链接文字上时，链接文字显示为红色、无下画线。
伪类选择器大多时候用在超链接文字的效果设定上，超链接有4种状态，对应<a>标签的4种
伪类，对应关系如表4-1所示。
伪类 状态
:link “链接”：链接被单击之前
:visited “访问过的”：链接被访问过之后
:hover “悬停”：鼠标指针放到标签上的时候
:actived “激活”：单击标签，但是不松手时
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 24
除了<a>标签的4种伪类，还有UI元素的“:enabled”“:disabled”“:checked”状态伪类，
这些主要针对HTML中的Form元素操作。除此之外，还有CSS3中的:nth选择器，可以更精确地选
择某个元素并指定样式。:nth选择器的常见伪类如表4-2所示。
伪类 状态
:first-child 选择某个元素的第一个子元素
:last-child 选择某个元素的最后一个子元素
:nth-child() 选择某个元素的一个或多个特定的子元素
:nth-last-child() 选择某个元素的一个或多个特定的子元素，
从这个元素的最后一个子元素开始算
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 25
范例4-5：给网页中的链接文字、列表文字设置普通和鼠标悬停时的样式效果。
创建网页，引入链
接样式css/，网页的主
要代码如右：
<head>
……
<link href = "css/" rel = "stylesheet" type = "text/css"/>
</head>
<body>
<a href = "#">链接文字效果</a>
<ul>
<li>列表文字1</li>
<li>列表文字2</li>
<li>列表文字3</li>
<li>列表文字4</li>
<li>列表文字5</li>
</ul>
</body>
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 26
运行效果：
a:link{color:#000; text-decoration:none;}
a:hover{color:#F00; text-decoration:underline;}
ul{list-style-type:none;}
ul li{background-color:#EEE; padding:5px; width:150px;}
ul li:hover{background-color:#CCC;}
在样式文件中设置如下样式：
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 27
通用选择器的作用就像通配符，它能匹配所有可用元素，一般用来对页面上的所有元素应
用样式。所有浏览器都支持通用选择器。通用选择器由一个星号表示，示例代码如下：
*{
margin: 0;
padding: 0;
}
上述代码表示的是，将所有元素的margin和padding都设置为0。这个操作常常用来去除一
些HTML标签的自带格式。
通用选择器是用来选择所有元素的，当然也可以选择某个元素下的所有元素，示例代码如
下：
.demo *{border:1px solid blue;}
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 28
本任务将带领读者充分认识HTML元素在外观呈现上的不同分类，认识CSS盒子模型及其相
关属性，掌握盒子模型，将使CSS网页排版变得非常简单。
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 29
因默认的呈现方式不同，HTML的标签元素可以分为三类：
块级元素（block）
内联元素（inline）
内联块级元素（inline-block）。
这种分类是针对元素所占的空间来划分的：
块级元素可以用CSS代码设定宽和高，块级元素默认独占一行；
宽和高的设定却对内联元素无效，与内容有关；
内联元素却可以和其他元素同处一行。
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 30
1、块级元素
在HTML标签元素中，<div>、<p>、<h1>…<h6>、<form>、<ul>、<li>、<ol>、<dl>、
<table>、<address>、<blockquote>都是块级元素，它们具有如下特点：
（1）每个块级元素都独占一行，其后的元素也另起一行；
（2）元素的高度、宽度、行高及边距都可以设置；
（3）在宽度未设置的情况下，元素宽度是它父容器的100%，即和父元素的宽度一致。在设
置宽度后，元素才具有指定的宽度。
块级元素支持内边距padding、外边距margin、宽度width、高度height、浮动float、溢出
overflow等属性，默认情况下的样式是：{width:100%; height:auto; overflow:hidden;}
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 31
2、内联元素
在HTML标签元素中，<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<cite>、
<code>、<var>是典型的内联元素。内联元素的特点如下：
（1）可以和其他元素在同一行上显示；
（2）元素的高度、宽度、行高、顶部边距和底部边距不可设置；
（3）元素的宽度就是它包含的文字或图片的宽度，不可改变。
内联元素支持内边距padding、左外边距margin-left、右外边距margin-right等属性，可
以通过代码display:block转换为块级元素，当然块级元素也可以通过代码display:inline转换
为内联元素。
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 32
3、内联块级元素
内联块级元素同时具备内联元素、块级元素的特点，<img>、<input>就是典型的内联块级
元素，它们具有如下特点：
（1）可以和其他元素在同一行上；
（2）元素的高度、宽度、行高、顶部边距和底部边距都可设置。
内联块级元素也支持padding、margin、width、height、float、overflow等属性。
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 33
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括边距、边框、内容。盒子模
型允许我们在其他元素和周围元素边框之间的空间放置元素。下图展示了标准盒子模型的构成。
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 34
标准盒子模型中，各部分的说明如下：
（1）margin（外边距）：清除边框外的区域，外边距是透明的，分上、下、左、右外边距。
（2）border（边框）：围绕在内边距和内容外的边框，分上、下、左、右边框。
（3）padding（内边距）：清除内容周围的区域，内边距是透明的，分上、下、左、右内
边距。
（4）content（内容）：盒子的内容，显示文本和图像。宽度由width指定，高度由height
指定。
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 35
从标准盒子模型图可以看出，CSS元素所占据的空间不仅仅由width和height决定，实际占
据的宽度和高度的计算方法如下：
元素占据的宽度 = margin-left + border-left + padding-left + width + padding-
right + border-right + margin-right
元素占据的高度 = margin-top + border-top + padding-top + height + padding-
bottom + border- bottom + margin-bottom
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 36
1、宽度width和高度height
width和height用于设定盒子模型中内容（content）的宽度和高度，常用单位是像素
（px）和百分比（%）。
px用于指定具体的宽和高
%则用于设定该元素宽度在父容器中所占的比例。
在没有指定width和height的情况下，元素默认占据父容器的所有宽度，高度则由元素中的
内容决定。
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 37
2、外边距margin
margin是指其他元素与本元素的边框之间的距离，分为上边距、右边距、下边距和左边距。
在设置外边距时可以设置各属性，分别设置上、右、下、左4个方向的外边距，示例代码如下：
div{margin-top:5px; margin-right:15px; margin-bottom:8px; margin-left: 10px;}
在设置外边距时也可以直接写综合属性，给margin设置多个值。若写了4个值，则意思是按
顺时针方向设置外边距，即分别设置上、右、下、左外边距的值；若只写3个值，则设置顺序为
上、左右、下外边距；若只写了两个值，则设置顺序为上下、左右外边距。示例代码如下：
div{margin:5px 15px 8px 10px;} /* 上、右、下、左 */
div{margin:5px 15px 8px;} /* 上、左右、下 */
div{margin:5px 15px;} /* 上下、左右 */
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 38
3、内边距padding
padding是本元素内容与本元素边框之间的距离，分为上内边距、右内边距、下内边距和左
内边距。与margin一样，在设置内边距时可以设置各属性，也可以直接写综合属性，示例代码
如下：
div{padding-top:5px; padding-right:15px; padding-bottom:8px; padding-
left:10px;}
div{padding:5px 15px 8px 10px;} /* 上、右、下、左 */
div{padding:5px 15px 8px;} /* 上、左右、下 */
div{padding:5px 15px;} /* 上下、左右 */
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 39
4、边框border
border是围绕元素内容和内边距的一条或多条线。CSS允许规定元素边框的样式、宽度和颜
色。
CSS控制的边框属性包括：
（1）border-width：设置边框宽度，常用值为1px、2px等。
（2）border-style：设置边框样式，常用值有solid（实线）、dashed（虚线）、
dotted（点线）、double（双线）、groove（3D凹槽边框）、ridge（3D垄状边框）、
inset（3D inset边框）、outset（3D outset边框）、none（无边框）等。
（3）border-color：设置边框颜色，常用值有red、green、blue等，也可以用#000000、
#F00或rgb(100,100,100)设置。
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 40
4、边框border
在常见的用法中，习惯将边框的3个属性一起声明，下面的示例代码就是将div的4个边框设
置为2px的红色实线，具体如下：
div{border:2px solid #F00;}
也可以分别设置4个边框，示例代码如下：
div{
border-left:2px solid #F00; /* 左边框：2像素，实线，红色 */
border-top:2px dashed #0000FF; /* 上边框：2像素，虚线，蓝色 */
border-right:4px dotted #00FF00; /* 右边框：4像素，点线，绿色 */
border-bottom:2px double #000000; /* 下边框：2像素，双线，红色 */
}
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 41
4、边框border
当然，必要的时候还是可以单独设置某个边框的属性。下面的代码是将div的所有边框设置
成2px的灰色双线，将p的底边框设置成3px的红色点线，代码如下：
div{
border-width:2px;
border-style:double;
border-color:#999;}
p{
border-bottom-width:3px;
border-bottom-color:#F00;
border-bottom:dashed;}
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 42
CSS布局模型建立在盒子模型的基础上，包含3种基本的布局模型，即流动模型（Flow）、
浮动模型（Float）、层模型（Layer）。
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 43
流动模型是默认的网页布局模型。流动布局模型具有两个典型的特征：一是块级元素都会
在父容器内自上而下、按顺序垂直延伸分布，在默认状态下，块级元素的宽度都为100%，块级
元素会以行的形式占据位置；二是内联元素都会在父容器内从左到右水平分布显示，不会像块
级元素那样独占一行。
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 44
任何元素在默认情况下是不能浮动的，但可以用CSS定义为浮动。因为块级元素独占一行的
特性，在默认情况下是无法将两个块级元素并排显示的，但可以用CSS设置元素的float属性，
让元素浮动起来，这样就可以达到并排显示的目的。设置向左浮动的示例代码如下：
div{float:left;}
属性float的值有left、right、none和inherit，分别表示向左浮动、向右浮动、不浮动和
从父元素继承float属性的值。
需要注意的是，设置浮动的同时一定要先设置块级元素的宽度，而且几个浮动元素的宽度
之和必须小于父容器的宽度，否则就会造成部分元素被挤到下一行显示。
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 45
范例4-6：给两个div设置宽度、高度、边框和外边距，并对比设置浮动前后的效果。
创建网页，引入链
接样式css/，网页的主
要代码如右：
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset =
utf-8"/>
<title>无标题文档</title>
<link href = "css/" rel = "stylesheet" type = "text/css"/>
</head>
<body>
<div id = "div01">div01中的文字<br/>宽:200px;高:150px;<br/>外
边距:10px;</div>
<div id = "div02">div02中的文字<br/>宽:150px;高:100px;<br/>外
边距:50px;</div>
</body>
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 46
运行效果：
#div01{float:left;width:200px;height:150px;border:2px solid #000;
marg in:10px;}
#div02{float:left;width:150px;height:100px;border:2px solid #000;
marg in:50px;}
在样式文件中设置如下样式:
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 47
层布局模型能实现在网页中对HTML元素进行精确定位，CSS定义了一组定位属性
（position）来支持层布局模型。在网页设计领域，一般只在网页的局部使用层布局，如浮动
广告、下拉菜单、图片轮换效果等。
可以通过设置属性position来使用层布局，该属性的值有static、relative、absolute、
fixed和inherit。
static表示无特殊定位，元素遵循正常文档流；
inherit表示从父元素继承属性值。
下面重点介绍相对定位（relative）、绝对定位（absolute）、固定定位（fixed）三种定
位方式。
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 48
1、相对定位
如果想为元素设置层模型中的相对定位，那么需要将position属性的值设置为relative。
它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的
过程是：首先按流动模型（默认布局）或浮动模型方式生成一个元素，然后元素像层一样浮动
起来，并相对以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏
移前的位置保留不动。设置id为div01的层为相对定位，并相对以前的位置向下移动50px、向右
移动100px，示例代码如下：
#div01{width:250px;height:150px;position:relative;top:50px;left: 100px;}
需要注意的是，元素即使被设置为相对定位，只要left、right、top、bottom没有被设置
值或值为0，元素也不会发生移位。
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 49
2、绝对定位
绝对定位可以认为是相对于父元素的定位，设置绝对定位需要将position属性设置为
absolute。当将元素设置为绝对定位后，该元素将会被从文档流中拖出来，以前占据的空间将
被挤压掉。被设置为绝对定位的元素，将使用left、right、top、bottom属性，相对其最接近
的一个具有定位属性的父容器进行绝对定位。若不存在这样的容器，则相对于body元素，即相
对于浏览器窗口进行绝对定位。设置id为div02的层为绝对定位，并相对某元素向下移动50px、
向右移动100px，示例代码如下：
#div02{width:250px;height:150px;position:absolute;top:50px;left: 100px;}
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 50
2、绝对定位
而div02元素到底是相对于哪一个元素定位呢？这取决于div02所在的父元素的定位设置。
若div02的父元素没有设置定位属性或默认定位为static，则不能作为div02的定位参照，这时
就要继续向上查找div02的父元素的父元素，并判断它的定位属性，直到找到设置了定位属性且
不是static的父元素。若从div02一直未能找到符合要求的父元素，则div02会以body元素作为
绝对定位的参照元素。
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 51
范例4-7：创建3个层div01、div02、div03并设置宽度、高度、边框和外边距，并在div02
中创建子层son01，将son01设置成绝对定位。通过设置和取消div02的定位属性，对比son01的
定位效果。。
创建网页，引入链
接样式css/，网页的主
要代码如右：
<head>
……
<link href = "css/" rel = "stylesheet" type = "text/css"/>
</head>
<body>
<div id = "div01">div01中文字11111</div>
<div id = "div02">div02中文字22222
<div id = "son01">子元素son01定位</div>
</div>
<div id = "div03">div01中文字33333</div>
</body>
2、绝对定位
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 52
运行效果：
#div01{width:250px; height:150px; border:2px
#000000 solid; margin: 10px;}
#div02{width:250px;height:150px;border:2px #000000
solid; margin: 10px; position:relative;}
#div03{width:250px;height:150px; border:2px
#000000 solid; margin:10px;}
#son01{width:100px;height:80px;border:2px #000000
solid; position:absolute;left:100px; top:50px;}
在样式文件中设置如下样式:
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 53
3、固定定位
fixed表示固定定位，是指相对于网页窗口的定位。由于视图本身是固定的，因此它不会随
浏览器窗口滚动条的滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器
窗口的显示大小。因此，固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文
档流动影响，这与将background-attachment属性设置为fixed的效果相同。下面的示例代码可
以实现层div01相对于浏览器视图向右移动100px、向下移动50px，并且在拖动滚动条时，div01
的位置固定不变。
#div01{width:200px; height:200px; background-color:#F00; position:fixed;
left:100px;top:50px;}
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 54
本任务介绍网络上常见的图片轮换效果的制作，用CSS实现HTML元素的布局，用
JavaScript设置元素的CSS属性，从而实现图片轮换效果。
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 55
1、直接设置style属性
HTML DOM的Style对象代表一个单独的样式声明，可从应用样式的文档或元素访问Style对
象。("id").style的style属性的值是一个对象，这个对象所包含的
属性与CSS规则一一对应，但是名字需要用驼峰命名的方式进行改变，比如将background-color
写成backgroundColor。改写的规则是将连字符“-”从CSS属性名中去除，然后将连字符后的第
一个字母大写。若CSS属性名是JavaScript的保留字，则规则名之前需要加上字符串css，比如
将float写成cssFloat。将网页背景设置为红色的JavaScript代码如下：
= "#FF0000";
也可以用以下方式来设置CSS属性，例如：
["background-color"] = "#FF0000";
style只能获取行内样式中设置的属性值，用其他方式设置的CSS样式的属性值无法获取到。
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 56
2、通过className属性设置CSS属性
JavaScript对象的className属性设置或返回HTML元素所应用的类选择器名。一般事先定义
好类选择器，然后将该类选择器设置给JavaScript对象的className属性，从而使网页元素应用
定义好的样式。语法如下：
= "className";
给div01层应用新的类选择器样式，示例代码如下：
var d01 = (div01);
= "greenBg";
若要给div01层多应用一个类选择器样式，则可以把“+”变成“+=”，在值的最前面加上
一个空格，示例代码如下：
+ = " greenBg";
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 57
3、使用setAttribute()方法设置style属性
setAttribute方法可以为HTML元素添加指定的属性，并为其赋值。若这个指定的属性已存
在，则仅更改属性的值。设置div01层的背景颜色和高度的示例代码如下：
var d01 = ("div01");
("style","background-color:red; height:100px;");
上述代码的两个参数都是字符串类型，第一个参数为“style”，第二个参数就是CSS样式
的代码。
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 58
4、通过Style对象的setProperty方法设置CSS属性
Style对象的setProperty()方法直接设置某个CSS属性，语法如下：
(propertyName, propertyValue, priority);
setProperty()方法的第3个参数（priority）是字符串类型，用于指定样式属性的优先级。
若要设置“!important”，则建议设置第3个参数，但是传参的时候不用写前面的“!”符号。
用setProperty()方法设置div01层的背景颜色的示例代码如下：
var d01 = ("div01");
("background-color", "green", "important");
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 59
5、通过Style对象的cssText属性设置CSS属性
通过Style对象的cssText属性，可以设置或返回样式声明的内容。语法如下：
= string
设置网页背景颜色的示例代码如下：
= "background-color:red";
直接用“=”设置cssText属性会覆盖原来的值，需要追加新值的时候就用“+=”。
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 60
6、获取CSS属性
属性返回的是类似数组的一组样式属性及对应值，因此可以用
“.属性名称”和“['属性名称']”的形式设置或者获取CSS属性，
但该方法只能设置或者读取行内样式中的CSS属性，其他样式的无法读取。
在非IE浏览器中，可以使用对象的getComputedStyle(element，
null/伪类)方法获取element元素的样式。该方法接收两个参数：第一个是要考察的element元
素；第二个则要根据情况而定，若只是考察元素本身，则为null；若要考察伪类，则为响应的
伪类。该方法获取到的是元素应用的最终样式组合，是类似数组的一个实例。
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 61
6、获取CSS属性
在IE浏览器中，不支持getComputedStyle()方法，但是每个标签元素都有一个
currentStyle属性，用于获取元素应用的最终样式组合。
在实际应用中，常用条件表达式或创建一个函数来达到兼容目的，使得不管在哪种浏览器
中都可以成功获取样式。获取div02层的背景颜色的示例代码如下：
<script language = "javascript">
var div02 = ("div2");
var myStyle = ? :
(div02,null);
alert("背景颜色:" + );
</script>
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 62
图片轮换效果的HTML结构比较简单，在一个div中放3个ul列表，3个列表分别列出6张图片、
6行说明文字、6个数字编号，网页效果如图所示。
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 63
图片轮换网页的代码如下：
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8"/>
<title>图片轮换效果</title>
<link href = "css/" rel = "stylesheet" type = "text/css"/>
<script src = "js/" language = "javascript" type = "text/javascript">
</script>
</head>
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 64
<body>
<div id = "tplh">
<ul id = "pic">
<li style = "display:block;"><a href = "#"><img src =
"imgs/tplh/" width = "700" height = "350" /></a></li>
<li><a href = "#"><img src = "imgs/tplh/" width = "700"
height= "350"/></a></li>
<li><a href = "#"><img src = "imgs/tplh/" width = "700"
height= "350" /></a></li>
<li><a href = "#"><img src = "imgs/tplh/" width = "700"
height= "350" /></a></li>
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 65
<li><a href = "#"><img src = "imgs/tplh/" width = "700" height= "350"
/></a></li>
<li><a href = "#"><img src = "imgs/tplh/" width = "700"
height= "350" /></a></li>
</ul>
<ul id = "text">
<li style = "display:block;">餐饮专业学生作品</li>
<li>我校篮球队参加比赛</li>
<li>学生与服装设计师合影</li>
<li>创无止境，新有未来</li>
<li>模特后台合影</li>
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 66
<li>激情唱响</li>
</ul>
<ul id = "num">
<li style = "background-color:#F00;">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div></body>
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 67
CSS样式文件在网页中通过link标签链接，代码如下：
#tplh{width:700px; height:350px; position:relative;}
#tplh ul{margin:0; padding:0; list-style-type:none;}
#pic li{display:none;}
#text{position:absolute; left:15px; bottom:10px;}
#text li{display:none; color:#FFF;}
#num{position:absolute; right:15px; bottom:10px;}
#num li{float:left; width:25px; height:25px; line-height:25px; text-align:
center; background-color:#EEE; margin:5px;}
本例将外层的div设置成相对定位，目的是给内部绝对定位ul做定位参照，让说明文字显示
在左下角，编号显示在右下角。
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 68
图片轮换的原理是将某编号的图片和说明文字设置为显示，其他则设置为隐藏；将某编号
的数字的背景颜色设置为红色，其他则设置为灰色。随着编号的不断变化并循环反复，从而实
现图片轮换的效果。轮换效果的JavaScript代码位于文件中，具体如下：
var index = 1;
var picLis, textLis, numLis;
= function(){
var tplh = ("tplh");
var pic = ("pic");
var text = ("text");
var num = ("num");
picLis = ("li"); ，执行function()中的代码。
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 69
textLis = ("li");
numLis = ("li");
("rotate()", 2000);
};
function rotate(){
var i;
for(i = 0;i<6;i++){
if(i == index)
{ picLis[i]. = "block";
textLis[i]. = "block";
numLis[i]. = "#F00";
}
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 70
else
{ picLis[i]. = "none";
textLis[i]. = "none";
numLis[i]. = "#EEE";
}
}
index = (index+1)%6;
}
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 71
其中，index是指需要显示的图片编号，picLis、textLis、numLis分别指图片、说明文字、
数字所在的li元素的集合。自定义函数rotate()实现了将编号为index的图片、说明文字设置为
block方式显示，其他图片和说明文字则设置为不显示；同样也设置了数字的背景颜色。而调用
window对象的setInterval()方法则实现了每2000毫秒执行1次rotate()函数。
“=function(){…}”的写法是指在网页加载完毕后，执行function()中的代码。
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 72
本任务介绍网络上常见的图片轮换效果的制作，用CSS实现HTML元素的布局，用
JavaScript设置元素的CSS属性，从而实现图片轮换效果。
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 73
（1）熟练掌握JavaScript中样式的获取和设置，以及元素的定位。
（2）熟练掌握JavaScript中元素的显示和隐藏。
（3）熟练掌握JavaScript中网页的滚动事件。
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 74
在一个网页中显示一个“登录”链接和大量文字内容，要求单击“登录”链接时，能弹出
登录对话框层和遮罩层，遮罩层将网页其他内容遮罩起来无法操作。拖动网页滚动条时，登录
对话框能随着滚动。当单击登录对话框上的“关闭”按钮时，登录对话框和遮罩层消失，网页
恢复原来的样子。
实现上述效果的关键技术在于：
（1）使用CSS样式的绝对定位，实现登录对话框层和遮罩层；
（2）使用JavaScript获取并设置登录对话框层的定位属性；
（3）使用JavaScript设置层的显示和隐藏；
（4）使用JavaScript实现网页的滚动效果。
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 75
网页文件的源代码如下：
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>显示遮罩登录效果</title>
<link href = "css/" rel = "stylesheet" type = "text/css">
<script src = "js/" type = "text/javascript" language =
"javascript"></script>
</head>
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 76
<body>
<form id = "form1" method = "post" action = "">
<!-- 遮罩层，默认不显示 -->
<div id = "mask" style = "display:none;" ></div>
<!-- 登录层，默认不显示 -->
<div id = "login" style = "display:none;" >
<div id = "loginCon">
<div style = "background-color:#CCCCCC; padding:3px 10px;
position:relative;">
登录<img src = "imgs/" id = "closeIcon"/>
</div>
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 77
<div style = "background-color:#FFFFFF; padding:5px 10px
15px;">
<div style = "padding:3px 0px 0px 0px;">
用户名：
<input type = "text" name = "username" id =
"username">
</div>
<div style = "padding:3px 0px 0px 0px;">密 码：
<input type = "text" name = "password" id = "password">
</div>
</div>
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 78
<div style = "background-color:#CCCCCC; padding:5px 15px;
text-align: center;">
<input type = "submit" name = "btSub" id = "btSub" value = "登录"
/>
<input type = "button" name = "Button_cancel" value = "取消" onclick =
"hideLayer()"/>
</div>
</div>
</div>
</form>
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 79
<div id = "content">
<p><a id = "btLogin" href = "javascript:void(0)">登录</a></p>
<p>教育部全国学生资助管理中心今天在教育部官网刊出“致初中毕业生”和“致高中毕业
生”两封信，明确表示不会让即将面临初中和高中毕业的学子为钱发愁。</p>
<p>……</p>
</body>
</html>
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 80
CSS文件的代码如下：
*{
margin:0;
padding:0;
font-size:14px;
font-weight:normal;
font-family:verdana, tahoma, helvetica, arial, sans-serif, "宋体";
font-style:normal;
list-style-type:none;
text-decoration:none;
}
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 81
html,body{height:100%; overflow:auto;}
#content{padding:0 15px;}
#mask
{
position:absolute;
bottom:0;
right:15px;
padding:0;
width:100%;
height:100%;
background-color:#000000;
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 82
filter:alpha(opacity = 30);
opacity:;
z-index:100;
}
#login
{
position:absolute;
width:250px;
z-index:200;
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 83
/* 将定位的top、left留在JS中确定 */
/* top:50px; */
/* left:150px; */
background-color:#999999;
padding:5px;
}
#loginCon
{
border:1 px #666666;
}
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 84
#closeIcon
{
position:absolute;
right:7px;
top:2px;"
}
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 85
脚本文件的代码如下：
var login; //登录层
var mask; //遮罩层
var btLogin; //"登录"链接
var closeIcon; //"关闭"按钮
= function()
{
login = ("login");
mask = ("mask");
btLogin = ("btLogin");
closeIcon = ("closeIcon");
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 86
//单击“登录”链接时，设置登录框位置并显示
= function(){
setPos();
showLayer();
};
//单击“关闭”按钮时，调用hideLayer()隐藏登录层
= hideLayer;
}
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 87
//登录框随网页滚动
= function()
{
setPos();
}
//调整登录层的位置
function setPos()
{
//var login = ("login");
var bodyWidth = ; //网页内容宽度
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 88
//获取login节点的样式
var myStyle = ? : document.
(login, null);
//获取样式中设置的宽和高
var loginWidth = parseInt();
var left = bodyWidth/2-loginWidth/2;
//50加网页滚动的距离
var top = 50 + ;
//注意添加单位px
= left+"px";
= top+"px"; }
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 89
//显示遮罩层和登录层
function showLayer()
{
= "block";
= "block";
}
//隐藏遮罩层和登录层
function hideLayer()
{
= "none";
= "none";}
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 90
运行结果如图所示
/23
制
作
弹
出
登
录
框
2025年1月17日 JavaScript动态网页设计 91
结束！
