请问有什么需要改进的地方
来源：2-20 编程练习
慕仙0240544
2022-06-25 16:21:51
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wan {
width: 300px;
height: 300px;
/* border: 1px solid #000; */
margin: 0 auto;
}
.one {
height: 90px;
width: 300px;
margin: 10px auto;
background-image: url(images/a.jpg);
}
.two {
height: 90px;
width: 300px;
margin: 10px auto;
background-image: url(images/b.jpg);
}
.three {
height: 90px;
width: 300px;
margin: 0 auto;
background-image: url(images/v.jpg);
}
</style>
</head>
<body>
<div class="wan">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</body>
</html>
1回答
-
同学你好，页面效果对，但是实现方式与练习本意不符。“多背景”一般是指给一个元素同时设置多个背景图，而不是给每个元素设置一个背景图，然后利用多个元素拼成多背景。因此，代码可做如下调整：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .wan { width: 300px; height: 300px; /* border: 1px solid #000; */ margin: 0 auto; /* 给一个元素，同时设置多个背景图 */ background: url(http://climg.mukewang.com/582c3b780001a95103000090.jpg) no-repeat top center , url(http://climg.mukewang.com/582c3b6d0001197603000090.jpg) no-repeat center center , url(http://climg.mukewang.com/582c3b61000122dd03000090.jpg) no-repeat bottom center ; } /* 多余样式删除 */ /* .one { height: 90px; width: 300px; margin: 10px auto; background-image: url(http://climg.mukewang.com/582c3b780001a95103000090.jpg); } .two { height: 90px; width: 300px; margin: 10px auto; background-image: url(http://climg.mukewang.com/582c3b6d0001197603000090.jpg); } .three { height: 90px; width: 300px; margin: 0 auto; background-image: url(http://climg.mukewang.com/582c3b61000122dd03000090.jpg); } */ </style> </head> <body> <div class="wan"> <!-- 多余元素删除 --> <!-- <div class="one"></div> <div class="two"></div> <div class="three"></div> --> </div> </body> </html>祝学习愉快！
0
相似问题