帮我写一个圣诞树的html代码
时间: 2023-03-03 14:54:36 浏览: 83
超火的圣诞树代码html源码分享
5星 · 资源好评率100%
好的,以下是一个简单的圣诞树HTML代码,您可以根据需要进行更改和调整:
```
<!DOCTYPE html>
<html>
<head>
<title>圣诞树</title>
<style>
body {
background-color: #dcdcdc;
}
.tree {
display: block;
margin: 0 auto;
position: relative;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
}
.star {
display: block;
margin: 0 auto;
position: relative;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid yellow;
transform: rotate(45deg);
top: -15px;
}
.ball {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: red;
margin: 5px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<div class="tree">
<div class="star"></div>
</div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
</body>
</html>
```
上述代码将呈现一个绿色的三角形作为圣诞树,并在其顶部放置一个黄色的星形,以及在底部放置了三个红色的球形装饰品。
阅读全文