求解 我实现的这个效果与效果图不一致但缩放浏览器后 可以保持与效果图一致请问我这个实现办法是对的吗?

来源:4-3 编程练习

纵有疾风起呵

2019-03-31 17:47:10

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

*{margin: 0;padding: 0;}

.zhujiemian{width: 100%;height: 4033px;

background: url("../img/zhujiemian.jpg") no-repeat center top;}

.web{width: 224px;height: 364px;

background: url("../img/webzuoyetu.jpg") no-repeat;

left: 0;top: 50%;position: fixed;

margin-top: -182px;}

.java{width: 224px;height: 364px;

background: url("../img/javazuoyetu.jpg") no-repeat;

right: 0;top: 50%;margin-top: -182px;position: fixed;

}

</style>

</head>

<body>

<div class="zhujiemian">

<div class="web"></div>

<div class="java"></div>

</div>

</body>

</html>


写回答

1回答

好帮手慕夭夭

2019-04-01

你好同学, 因为代码中使用的图片是同学自己本地的,老师把图片替换成本题提供的图片测试 ,效果实现的正确哦。因为不同刘浏览器分辨率不一样 ,所以展现的效果自然是有一些差别很正常,只要页面样式不乱 ,两边的图片固定在浏览器两侧并且垂直居中就行。

另外 ,建议同学在练习时 ,如果题中提供了素材 ,建议使用素材 ,这样老师能够更准确的帮助到你检查问题哦

http://img.mukewang.com/climg/5ca18d90000139a404890179.jpg

祝学习愉快 ,望采纳。

0

0 学习 · 40143 问题

查看课程