我想要一段 前端 圣诞树代码
时间: 2023-05-24 16:01:37 浏览: 108
圣诞节制作的圣诞树前端代码
4星 · 用户满意度95%
好的,这里是一段简单的前端圣诞树代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>前端圣诞树</title>
<style>
body {
background-color: #111;
color: #fff;
font-family: Arial, sans-serif;
text-align: center;
}
.tree {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-end;
margin-top: 50px;
}
.tree > div {
width: 20px;
height: 20px;
margin: 2px;
background-color: #0f0;
border-radius: 50%;
}
.tree > .star {
background-color: yellow;
width: 40px;
height: 40px;
margin: 0 20px;
}
.tree > .trunk {
background-color: brown;
width: 30px;
height: 60px;
margin-top: 20px;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>前端圣诞树</h1>
<div class="tree">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="star"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="trunk"></div>
</div>
</body>
</html>
```
这是一个简单的 HTML/CSS 代码,用于创建一个前端圣诞树效果。
阅读全文