使用HTML CSS制作静态网站【中秋节】
以下是一个简单的HTML和CSS代码示例，用于创建一个展示中秋节元素的静态网页。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>中秋节页面</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #fde6e6;
font-family: Arial, sans-serif;
}
.moon {
width: 200px;
height: 200px;
background-color: #fde6e6;
border-radius: 50%;
position: relative;
box-shadow: 0 0 20px #cac5c5;
z-index: 10;
}
.moon::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
background-color: #fde6e6;
border-radius: 50%;
box-shadow: 0 0 20px #cac5c5;
z-index: -1;
}
.moon::after {
content: '';
position: absolute;
bottom: 10%;
right: 10%;
width: 60px;
height: 60px;
background-color: #fde6e6;
border-radius: 50%;
box-shadow: 0 0 20px #cac5c5;
}
h1 {
color: #5a3939;
font-size: 5em;
text-align: center;
margin-bottom: 20px;
}
p {
color: #5a3939;
font-size: 1.5em;
text-align: center;
}
</style>
</head>
<body>
<div class="moon"></div>
<h1>中秋节快乐!</h1>
<p>月亮照耀美好的一天。</p>
</body>
</html>这段代码展示了如何使用CSS创建一个简单的中秋节页面背景，包括一个圆形的月亮图案，以及中秋节的祝福文字。这个示例简单易懂，适合作为学习HTML和CSS的入门级教程。
评论已关闭