老师可以帮我看下这样写可以吗,谢谢
来源：2-8 编程练习
慕无忌5206817
2019-10-25 10:41:02
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>2-3</title>
<style type="text/css">
/* 此处写代码*/
.background{
width:300px;
height:200px;
background:red;
margin:0 auto
position:absolute;
}
.star{
width:0px;
height:0px;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:40px solid yellow;
position:absolute;
}
.star:before{
content:"";
display:block;
width:0px;
height:0px;
position:absolute;
left:-50px;
top:-35px;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:40px solid yellow;
transform:rotate(-68deg);
}
.star:after{
content:"";
display:block;
width:0px;
height:0px;
position:absolute;
left:-50px;
top:-35px;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:40px solid yellow;
transform:rotate(68deg);
}
.star1{
left:15px;
top:40px;
transform:scale(0.5);
}
.star2{
left:70px;
top:10px;
transform:scale(0.2) rotate(30deg);
}
.star3{
left:85px;
top:35px;
transform:rotate(45deg) scale(0.2);
}
.star4{
left:85px;
top:70px;
transform:rotate(45deg) scale(0.2);
}
.star5{
left:70px;
top:90px;
transform:rotate(30deg) scale(0.2);
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="background">
<div class="star star1"></div>
<div class="star star2"></div>
<div class="star star3"></div>
<div class="star star4"></div>
<div class="star star5"></div>
</div>
</body>
</html>写回答
1回答
-
同学你好， 这样写是可以的， 不过有个细节需要注意下哦， 如下图所示， 属性值后面没有添加上
建议： ＣＳＳ属性值后面都要添加分号， 让代码更加规范哦， 另，想要实现水平居中，需要添加如下属性才可以哦
如果帮助到了你， 欢迎采纳！
祝学习愉快～～～
0
相似问题