4-3编程练习作业
来源：4-3 编程练习
风褛先生
2018-11-10 09:52:33
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4-3编程练习</title>
<style type="text/css">
.context{
height: 4033px;
width:100%;
position: relative;
}
.ad2{
height: 364px;
width: 224px;
float: left;
position: fixed;
top:50%;
margin-top:-182px;
left:0;
}
.ad1{
height: 364px;
width: 224px;
float: right;
position: fixed;
top:50%;
right: 0;
margin-top: -182px;
}
</style>
</head>
<body>
<div class="context">
<img src="http://climg.mukewang.com/59c9f7ce0001839219034033.png"/>
<div class="ad1"><img src="http://climg.mukewang.com/5a3383c70001f1b702240364.png"></div>
<div class="ad2"><img src="http://climg.mukewang.com/5a3383d00001a3dd02240364.png"></div>
</div>
</body>
</html>请问一下老师这个作业代码是否是正确的。
我的问题1：效果图和我的不一样的地方在于，广告图片是没有显示完整的，这个处理是要处理原始图片还是在HTML里面处理。
我的问题2：我做的HTML进去后网站有横向滚动条，这个需要怎么处理？
谢谢老师批阅。thank u！
写回答
2回答
-
你好同学,
第一个问题,同学本次习题效果已经实现了哦~
同学很细心，本次习题最重要的是实现定位的效果，同学已经实现了,
效果图和同学做出来的效果有些不同是因为图片是不同的，所以没关系哦~真实开发的时候能够按照要求去用图片就可以了，作为练习能够很好的运用技术才是最重要的。加油！
第二个问题,是因为同学没有清除标签的默认填充值,设置*{margin:0;padding:0;}就可以了~
祝学习愉快!
0 -
王小大
2018-11-17
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>广告</title> <style type="text/css"> *{ margin: 0; padding: 0; } .con{ width: 100%; height: 4033px; background: url(http://climg.mukewang.com/59c9f7ce0001839219034033.png) no-repeat top center; background-size: 100%; position: relative; } img{ width: 224px; height: 364px; } .t1{ position: fixed; top: 50%; left: 0; margin-top: -157px; } .t2{ position: fixed; top: 50%; right: 0; margin-top: -157px; } </style> </head> <body> <div class="con"> <div class="t1"> <img src="http://climg.mukewang.com/5a3383c70001f1b702240364.png"> </div> <div class="t2"> <img src="http://climg.mukewang.com/5a3383d00001a3dd02240364.png"> </div> </div> </body> </html>同学你好，可以参照上述代码进行改进！
0
相似问题