实训4-7 绝对定位的应用
一、案例描述
1、考核知识点
绝对定位
2、练习目标
进一步理解绝对定位的应用。
灵活运用绝对定位达到控制页面布局的效果。
3、需求分析
浏览网页时，经常需要将页面放大或缩小的情况。
为了保证布局中的按钮等不发生错位就需要用到定位属性。
本案例通过绝对定位实现按钮在父级元素中正常显示的效果。
4、案例分析
1)效果如图1所示。
图2 绝对定位的应用效果
2)具体实现步骤如下所示：
a)定义一个容器，给容器设置绝对定位属性。
b)在父容器中定义一个关闭按钮和一个提交按钮，将其定位在右上角和右下角。
二、案例实现
【常规准备工作】
启动Hbuilder，在Hbuilder中新建web项目“实训4-7”，建议建在D盘根目录。
将实训4-7更名为“学号最后两位+姓名-实训4-7”，称为“实训文件夹”
1、制作页面结构
新建HTML页面“绝对定位.html”，参考代码如下：
下载本课题所需素材图片，并拷贝到图片目录中
参考代码如下：
1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>绝对定位的应用</title>
6</head>
7<body>
8<div class="wenti">
9 <span class="close"><img src="images/close.jpg" /></span>
10 <span class="submit"><img src="images/tijiao.jpg" /></span>
11 <span class="adv_bg"><img src="images/chuanzhi_bg.png"></span>
12</div>
13</body>
14</html>
2、定义CSS样式
使用链入式CSS样式表为页面添加样式“绝对定位.css”，参考CSS代码如下：
1.wenti{
2width:502px;
3height:401px;
4margin:10px auto;
5background:url(images/votebg.jpg) no-repeat;
6position:relative;
7}
8.close{
9width:16px;
10height:16px;
11display:block;
12top:7px;
13right:8px;
14position:absolute;
15cursor:pointer;
16}
17.submit{
18width:64px;
19height:24px;
20display:block;
21bottom:8px;
22right:8px;
23position:absolute;
24cursor:pointer;
25}
26.adv_bg{
27width:480px;
28height:330px;
29position:absolute;
30cursor:pointer;
31top:33px;
32 left:10px;
33}
保存后，在谷歌浏览器中预览，效果如图2所示。
图2 绝对定位的应用效果。