圣诞树的代码html
时间: 2023-12-25 09:04:41 浏览: 40
以下是一个简单的圣诞树的HTML代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Christmas Tree</title>
<style>
body {
background-color: #000;
}
.tree {
position: relative;
width: 0;
height: 0;
margin: 100px auto;
border-left: 200px solid transparent;
border-right: 200px solid transparent;
border-bottom: 300px solid green;
}
.tree:before {
content: "";
position: absolute;
top: -150px;
left: -50px;
width: 0;
height: 0;
border-left: 250px solid transparent;
border-right: 250px solid transparent;
border-bottom: 150px solid green;
}
.star {
position: absolute;
top: -200px;
left: 175px;
width: 50px;
height: 50px;
background-color: yellow;
transform: rotate(45deg);
}
.ornament {
position: absolute;
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
}
.ornament1 {
top: 100px;
left: 150px;
}
.ornament2 {
top: 150px;
left: 200px;
}
.ornament3 {
top: 200px;
left: 250px;
}
</style>
</head>
<body>
<div class="tree"></div>
<div class="star"></div>
<div class="ornament ornament1"></div>
<div class="ornament ornament2"></div>
<div class="ornament ornament3"></div>
</body>
</html>
```
这段代码会生成一个绿色的圣诞树,树上有一个黄色的星星和三个红色的装饰球。你可以将这段代码保存为一个HTML文件,然后在浏览器中打开,就可以看到圣诞树的效果了。