用html css js写一个关于传统文化的静态网站
时间: 2023-12-14 19:02:17 浏览: 75
使用HTML制作静态网站 中国传统文化 丝绸之路 (学生网页设计作业源码)
好的,以下是一个简单的静态网站的示例代码,用于展示中国传统节日的相关内容。请注意,这只是一个示例,您可以根据自己的需求进行修改和扩展。
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>中国传统节日</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>中国传统节日</h1>
<nav>
<ul>
<li><a href="#chineseNewYear">春节</a></li>
<li><a href="#midAutumn">中秋节</a></li>
<li><a href="#dragonBoat">端午节</a></li>
<li><a href="#lantern">元宵节</a></li>
</ul>
</nav>
</header>
<main>
<section id="chineseNewYear">
<h2>春节</h2>
<img src="chineseNewYear.jpg">
<p>春节是中国最重要的传统节日,也是中国农历的新年。它通常在1月或2月中旬庆祝,在春节期间,人们会进行各种庆祝活动,如贴年画、吃年夜饭、放鞭炮、赏花灯等。</p>
</section>
<section id="midAutumn">
<h2>中秋节</h2>
<img src="midAutumn.jpg">
<p>中秋节是中国传统节日之一,通常在农历八月十五日庆祝。在这个节日里,人们会吃月饼、赏月、猜灯谜等。</p>
</section>
<section id="dragonBoat">
<h2>端午节</h2>
<img src="dragonBoat.jpg">
<p>端午节是中国传统节日之一,通常在农历五月初五日庆祝。在这个节日里,人们会划龙舟、吃粽子、赛龙舟等。</p>
</section>
<section id="lantern">
<h2>元宵节</h2>
<img src="lantern.jpg">
<p>元宵节是中国传统节日之一,通常在农历正月十五日庆祝。在这个节日里,人们会赏花灯、吃汤圆、猜灯谜等。</p>
</section>
</main>
<footer>
<p>版权所有 © 2021 传统节日网站</p>
</footer>
</body>
</html>
```
CSS代码:
```
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
h1 {
margin: 0;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav li:last-child {
margin-right: 0;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
max-width: 800px;
margin: 0 auto;
padding: 40px;
}
section {
margin-bottom: 40px;
}
h2 {
margin-top: 0;
}
img {
max-width: 100%;
height: auto;
margin-bottom: 20px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
```
JavaScript代码:
```
// 在这里可以添加一些页面交互效果,比如滚动特效、下拉菜单、弹出框等等
```
阅读全文