老师 请问我的有什么需要改进的吗 谢谢
来源：2-24 编程练习
慕仙0240544
2022-06-25 20:31:42
<!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>
div {
display: inline-block;
}
.one {
height: 300px;
width: 300px;
background-image: linear-gradient(to top,red,gold);
margin-right: 30px;
}
.two {
height: 300px;
width: 300px;
background-image: linear-gradient(270deg,red,gold 70% );
margin-right: 30px;
}
.three {
height: 300px;
width: 300px;
background-image: linear-gradient(135deg,red,gold 70%);
margin-right: 30px;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
1回答
-
同学你好，代码优化参考如下:
1、给最上面总的div加一个margin-right:30px;就可以了，不用单独写了；
2、针对本题效果，可以将宽高设置在总的div上面，省略代码；
3、第一个盒子从上到下渐变即为默认状态，可以省略方向；
第二个盒子从左到右可以简写为 to right;
第三个盒子可以简写为to right bottom ；参考代码如下：
祝学习愉快~
0
相似问题