用h5写一个介绍中秋节的网页
时间: 2023-12-13 13:05:51 浏览: 39
好的!以下是一个简单的介绍中秋节的H5网页示例:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>中秋节介绍</title>
<style>
body {
background-color: #F6D155;
font-family: '微软雅黑', sans-serif;
}
h1 {
text-align: center;
margin-top: 50px;
font-size: 48px;
color: #F25F5C;
text-shadow: 1px 1px #fff;
}
.container {
width: 80%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
}
.card {
width: 300px;
height: 400px;
background-color: #fff;
margin: 20px;
border-radius: 10px;
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
overflow: hidden;
position: relative;
}
.card img {
width: 100%;
height: 250px;
object-fit: cover;
}
.card h2 {
font-size: 24px;
margin: 20px;
color: #F25F5C;
text-align: center;
}
.card p {
font-size: 16px;
margin: 20px;
line-height: 1.5;
text-align: justify;
}
.card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
opacity: 0;
transition: all 0.3s ease;
}
.card:hover::before {
opacity: 1;
}
.card a {
position: absolute;
bottom: 20px;
left: 20px;
color: #fff;
text-decoration: none;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
opacity: 0;
transition: all 0.3s ease;
}
.card:hover a {
opacity: 1;
transform: translateX(10px);
}
</style>
</head>
<body>
<h1>中秋节介绍</h1>
<div class="container">
<div class="card">
<img src="http://cdn.wenjianshu.com/wp-content/uploads/2017/08/20170816110010_57153.jpg" alt="中秋节">
<h2>中秋节起源</h2>
<p>中秋节是我国传统节日之一,起源于中国古代周朝时期,是为了祭拜月神和感恩丰收而设立的。后来,中秋节逐渐成为团圆和感恩的象征,成为一种文化和情感的凝聚。</p>
<a href="#">了解更多</a>
</div>
<div class="card">
<img src="https://s3.ifanr.com/wp-content/uploads/2018/09/中秋节吃月饼.jpg!720" alt="中秋节">
<h2>中秋节习俗</h2>
<p>中秋节有很多传统习俗,如赏月、吃月饼、猜灯谜、敬酒等。这些习俗是人们传统文化的重要组成部分,也是人们感受节日气氛的方式之一。</p>
<a href="#">了解更多</a>
</div>
<div class="card">
<img src="https://i0.wp.com/www.10yan.com/wp-content/uploads/2019/09/20190904213922_42799.jpg?resize=720%2C540&ssl=1" alt="中秋节">
<h2>中秋节食品</h2>
<p>中秋节的食品丰富多样,最具代表性的当属月饼。除此之外,还有柚子、桂花糕、糯米饭等美食,这些食品不仅美味可口,而且寓意吉祥。</p>
<a href="#">了解更多</a>
</div>
</div>
</body>
</html>
```
在这个例子中,我们使用了H5的flexbox布局、CSS3动画和交互效果,以及一些简单的HTML标签来构建介绍中秋节的网页。这个网页包括了中秋节的起源、习俗和食品等内容,并且使用了响应式布局适应不同的屏幕大小。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)