请老师检查

首页课程实战体系课手记专栏慕课教程

请老师检查

来源：7-2 编程练习

心脏_是有多脏

2019-08-19 10:14:15

/ PHP小白零基础入门 /

步骤一 · 7-2 编程练习

7-2 编程练习

我们学习了CSS中的定位，那么现在我们来运用定位的知识来实现网页中常见的对联广告吧。

要求：无论页面怎么移动，页面左右的的广告栏不会发生位置的变化。

效果如下图所示：

任务

1、首先我们需要添加一个块元素，并且以慕课网为背景，模拟整个网页，并给块元素设置足够的宽高。

2、在网页中添加两个块元素，分别为对联广告中的左侧广告块和对联广告的右侧广告块

并且给对联块设置宽高

3、我们需要给对联左右块元素添加固定定位属性

4、使得对联左右块元素相对于窗口垂直居中

任务提示

背景图片：

http://climg.mukewang.com/59c9f7ce0001839219034033.png

http://climg.mukewang.com/5a3383c70001f1b702240364.png

http://climg.mukewang.com/5a3383d00001a3dd02240364.png

index.html

6789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 <style> *{ margin: 0px; padding: 0px; } .div1{ width:100px; } .div2{ position:fixed; top:200px; left: 0px; } .div3{ position:fixed; top:200px; right: 0px; } .img3{ width:200px; height:200px; } </style></head><body> <div class="div1"> <img class="img1"src="http://climg.mukewang.com/59c9f7ce0001839219034033.png"/> </div> <div class="div3"> <img class="img3"src="http://climg.mukewang.com/5a3383c70001f1b702240364.png" /> <div> <div class="div2"> <img class="img3"src="http://climg.mukewang.com/5a3383d00001a3dd02240364.png" /> </div> </body></html>再试试下一节章节问答笔记资料

数据加载中...

PPT CSS定位查看

代码 CSS定位源代码下载

写回答

1回答

心脏_是有多脏

提问者

2019-08-19

这个请老师忽略