Web前端开发项目教程
主讲人：卞孝丽
重定元素间位置关系
【任务目标】
知识目标
• 理解静态定位、相对定位、绝对定位、固定定位、粘性定位；
• 理解定位属性与偏移属性的关系；
• 掌握相对定位、绝对定位、固定定位、粘性定位的设置方法。
能力目标
• 能够通过定位属性灵活控制页面元素，实现网页元素的精确
定位；
• 能够结合定位与偏移属性重定元素的位置关系，对网页进行
布局。
• 素质目标
培养全局意识，从宏观与微观、整体与局部多角度思考问题；
提升对事物表象及本质的判断力，能够准确判别事物间的依
存关系。
【导学知识】
一、任务拓展
1.案例展示
在某些网站，会看到始终停留在浏览器窗口两侧顶端或垂直
居中位置的对联式的广告条，即对联广告，比如这个页面两侧红
框内的展示图片，还有像这种宣传语的形式，等等，两侧对称，
形成一种美观的艺术效果。
【导学知识】
2.任务效果
下面我们以此效果为例进行制作。中间的页面内容我们以一
个大的div框代替，主要制作两侧的对联效果。
【导学知识】
二、任务实现
1.构造页面
位于页面主体内容两侧的对联式广告宣传栏可以也使用
<div></div>标签，也可以使用其它标签，比如<span></span>
标签。
【导学知识】
2.准备素材
搜索或在PS中制作出合适的图片素材。
【导学知识】
3.代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>对联广告</title>
<style>
.adLeft{
width: 175px;
height: 460px;
position: fixed;
left: 0;
top: 0;
background-image: url(img/);
}
.adRight{
width: 175px;
height: 460px;
position: fixed;
right: 0;
top: 0;
background-image: url(img/);
}
div{
width: 1028px;
height: 1536px;
background-color: bisque;
margin: 0 auto;
}
</style>
</head>
<body>
<span class="adLeft"></span>
<span class="adRight"></span>
<div></div>
</body>
</html>
【导学知识】
其实，漫游于网络中，会发现因特网不但是信息的
海洋，也是广告的海洋。除了普通的Gif、 Banner、
Flash、对联广告外，绝对定位结合JS代码所设置的飘
浮广告也是时下网上较为流行的广告形式之一。当拖动
浏览器的滚动条时，这种在页面上浮动的广告，可以跟
随屏幕一起移动。尽管这种效果对于宣传展示有相当的
实用价值，但对浏览网页的人来讲，这既妨碍阅读，又
影响阅读兴趣，因此一定不能滥用。不过，如果能善用
的话，倒是可以发挥出极大的作用，可以尝试制作。
【任务小结】
本节课我们完成了拓展案例对联式广告的创作，方法并不
唯一，效果也不需要雷同，这里请为国学文化网创作左右两侧
对称的类似效果的宣传栏，可以是文字类标语，也可以是国学
宣传图片。同学们可以自由发挥想象，多多拓展提升，创作出
更多更实用更美观的效果。
“勤能补拙，熟能生巧，巧能生精，精能生妙，妙能入道”
。除了对HTML标签、属性、CSS规则、选择器这些知识的理
解与应用，多练习，多拓展，定能挖掘出我们的潜力，亮出我
们的风采。
谢 谢 大 家
