HTML+CSS+JS制作中国传统节日主题网站(内附源码,含5个页面)

一、作品介绍

HTML+CSS+JS制作一个中国传统节日主题网站,包含首页、节日介绍页、民俗文化页、节日活动页、联系我们页等5个静态页面。其中每个页面都包含一个导航栏、一个主要区域和一个底部区域。

二、页面结构

1. 顶部横幅区

包含传统中国风格的网站标题'中国传统节日',配以传统祥云图案装饰,右上角设置导航菜单

2. 节日轮播展示区

大幅轮播图展示当前或最近的传统节日场景,配以简短节日介绍和倒计时(如有)

3. 节日分类导航

以传统中国风格图标展示春节、元宵、清明、端午、七夕、中秋等主要传统节日分类入口

4. 节日文化精选区

展示传统节日相关的习俗介绍、传统美食、历史渊源等文化内容,采用图文结合的展示方式

5. 互动专区

设置节日祝福语征集、节日习俗分享、传统美食制作教程等互动模块

6. 底部信息区

包含网站介绍、联系方式、友情链接等信息,采用传统中国风元素装饰

三、作品演示

四、代码目录

五、首页代码

html 复制代码
<!DOCTYPE html>
<html lang="chinese">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>首页 - 中国传统节日网站</title>
    <link type="text/css" href="css/family.css" rel="stylesheet" />
    <link type="text/css" href="css/all.min.css" rel="stylesheet" />
    </head>
  <body>
    <div class="water-mark water-mark-left">
      公众号【<span class="gzh-tips">木番薯科技</span>】,<span class="ym-tips">获取源码</span>
    </div>
    <div class="water-mark water-mark-right">
      公众号【<span class="gzh-tips">木番薯科技</span>】,<span class="ym-tips">获取源码</span>
    </div>
    <div class="min-h-screen bg-gray-50">
      <header class="bg-white shadow-sm">
        <nav class="container mx-auto px-6 py-4">
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <h1 class="text-3xl font-['Pacifico'] text-custom">logo</h1>
              <div class="ml-10 space-x-8">
                <a href="./index.html" class="font-bold text-gray-700 hover:text-custom">首页</a>
                <a href="./introducing-festival.html" class="text-gray-700 hover:text-custom">节日介绍</a>
                <a href="./folk-culture.html" class="text-gray-700 hover:text-custom">民俗文化</a>
                <a href="./festive-events.html" class="text-gray-700 hover:text-custom">节日活动</a>
                <a href="./contact-us.html" class="text-gray-700 hover:text-custom">联系我们</a>
              </div>
            </div>
            <div class="flex items-center space-x-4">
              <button class="!rounded-button px-4 py-2 text-custom border border-custom hover:bg-custom hover:text-white transition-colors">登录</button>
              <button class="!rounded-button px-4 py-2 bg-custom text-white hover:bg-opacity-90 transition-colors">注册</button>
            </div>
          </div>
        </nav>
      </header>

      <main>
        <section class="relative h-[600px]">
          <img src="./images/b1.jpg" 
               class="w-full h-full object-cover object-top" alt="节日庆典场景"/>
          <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
            <div class="text-center text-white">
              <h2 class="text-5xl font-bold mb-6">传统节日文化传承</h2>
              <p class="text-xl mb-8">感受中华文化的魅力,传承千年的节日习俗</p>
              <button class="!rounded-button px-8 py-3 bg-custom text-white text-lg hover:bg-opacity-90 transition-colors">了解更多</button>
            </div>
          </div>
        </section>

        <section class="max-w-7xl mx-auto px-4 py-16">
          <h2 class="text-2xl font-bold text-center mb-12">传统节日</h2>
          <div class="grid grid-cols-6 gap-8">
            <div class="text-center">
              <div class="w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden">
                <img src="./images/c1.jpg" alt="春节" class="w-full h-full object-cover"/>
              </div>
              <p class="text-gray-700">春节</p>
            </div>
            <div class="text-center">
              <div class="w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden">
                <img src="./images/c2.jpg" alt="元宵" class="w-full h-full object-cover"/>
              </div>
              <p class="text-gray-700">元宵节</p>
            </div>
            <div class="text-center">
              <div class="w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden">
                <img src="./images/c3.jpg" alt="清明" class="w-full h-full object-cover"/>
              </div>
              <p class="text-gray-700">清明节</p>
            </div>
            <div class="text-center">
              <div class="w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden">
                <img src="./images/c4.jpg" alt="端午" class="w-full h-full object-cover"/>
              </div>
              <p class="text-gray-700">端午节</p>
            </div>
            <div class="text-center">
              <div class="w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden">
                <img src="./images/c5.jpg" alt="七夕" class="w-full h-full object-cover"/>
              </div>
              <p class="text-gray-700">七夕节</p>
            </div>
            <div class="text-center">
              <div class="w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden">
                <img src="./images/c6.jpg" alt="中秋" class="w-full h-full object-cover"/>
              </div>
              <p class="text-gray-700">中秋节</p>
            </div>
          </div>
        </section>
    
        <section class="max-w-7xl mx-auto px-4 py-16 bg-white">
          <h2 class="text-2xl font-bold text-center mb-12">节日文化精选</h2>
          <div class="grid grid-cols-3 gap-8">
            <div class="rounded-lg overflow-hidden shadow-lg">
              <img src="./images/j1.jpg" alt="习俗" class="w-full h-48 object-cover"/>
              <div class="p-6">
                <h3 class="text-xl font-bold mb-2">传统习俗</h3>
                <p class="text-gray-600">了解中国传统节日背后的文化习俗,感受节日氛围。</p>
              </div>
            </div>
            <div class="rounded-lg overflow-hidden shadow-lg">
              <img src="./images/j2.jpg" alt="美食" class="w-full h-48 object-cover"/>
              <div class="p-6">
                <h3 class="text-xl font-bold mb-2">节日美食</h3>
                <p class="text-gray-600">品味传统美食,传承中华饮食文化。</p>
              </div>
            </div>
            <div class="rounded-lg overflow-hidden shadow-lg">
              <img src="./images/j3.jpg" alt="历史" class="w-full h-48 object-cover"/>
              <div class="p-6">
                <h3 class="text-xl font-bold mb-2">历史渊源</h3>
                <p class="text-gray-600">探索节日起源,了解历史文化。</p>
              </div>
            </div>
          </div>
        </section>
    
        <section class="max-w-7xl mx-auto px-4 py-16">
          <h2 class="text-2xl font-bold text-center mb-12">互动专区</h2>
          <div class="grid grid-cols-2 gap-8">
            <div class="bg-white p-8 rounded-lg shadow-lg">
              <h3 class="text-xl font-bold mb-4">节日祝福</h3>
              <textarea class="w-full p-4 border rounded-lg" rows="4" placeholder="写下您的节日祝福..."></textarea>
              <button class="mt-4 px-6 py-2 bg-custom text-white !rounded-button">发送祝福</button>
            </div>
            <div class="bg-white p-8 rounded-lg shadow-lg">
              <h3 class="text-xl font-bold mb-4">分享习俗</h3>
              <textarea class="w-full p-4 border rounded-lg" rows="4" placeholder="分享您知道的节日习俗..."></textarea>
              <button class="mt-4 px-6 py-2 bg-custom text-white !rounded-button">分享经验</button>
            </div>
          </div>
        </section>
      </main>

      <footer class="bg-gray-800 text-white py-12">
        <div class="container mx-auto px-6">
          <div class="grid grid-cols-4 gap-8">
            <div>
              <h5 class="text-lg font-bold mb-4">关于我们</h5>
              <p class="text-gray-400">致力于传承和发扬中国传统节日文化,让更多人了解并参与传统文化活动。</p>
            </div>
            <div>
              <h5 class="text-lg font-bold mb-4">快速链接</h5>
              <ul class="space-y-2">
                <li><a href="#" class="text-gray-400 hover:text-white">首页</a></li>
                <li><a href="#" class="text-gray-400 hover:text-white">节日介绍</a></li>
                <li><a href="#" class="text-gray-400 hover:text-white">民俗文化</a></li>
                <li><a href="#" class="text-gray-400 hover:text-white">节日活动</a></li>
              </ul>
            </div>
            <div>
              <h5 class="text-lg font-bold mb-4">联系方式</h5>
              <ul class="space-y-2">
                <li class="text-gray-400"><i class="fas fa-phone mr-2"></i>400-888-8888</li>
                <li class="text-gray-400"><i class="fas fa-envelope mr-2"></i>info@festival.com</li>
                <li class="text-gray-400"><i class="fas fa-map-marker-alt mr-2"></i>北京市东城区文化街100号</li>
              </ul>
            </div>
            <div>
              <h5 class="text-lg font-bold mb-4">关注我们</h5>
              <div class="flex space-x-4">
                <a href="#" class="text-gray-400 hover:text-white text-2xl"><i class="fab fa-weixin"></i></a>
                <a href="#" class="text-gray-400 hover:text-white text-2xl"><i class="fab fa-weibo"></i></a>
                <a href="#" class="text-gray-400 hover:text-white text-2xl"><i class="fab fa-qq"></i></a>
              </div>
            </div>
          </div>
          <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
            <p>&copy; 2025 中国传统节日文化网. 保留所有权利.</p>
          </div>
        </div>
      </footer>
    </div>
  </body>
</html>

六、获取代码

内附源码,含5个页面。欢迎留言,欢迎关注。

相关推荐
csgo打的菜又爱玩1 小时前
Vue 基础(实战模板与命名指南)
前端·javascript·vue.js
gerrgwg3 小时前
Vue-library-start,一个基于Vite的vue组件库开发模板
前端·javascript·vue.js
开心不就得了6 小时前
自定义脚手架
前端·javascript
没事多睡觉6667 小时前
Vue 虚拟列表实现方案详解:三种方法的完整对比与实践
前端·javascript·vue.js
excel8 小时前
Vue3 EffectScope 源码解析与理解
前端·javascript·面试
细节控菜鸡8 小时前
【2025最新】ArcGIS for JS 实现地图卷帘效果
开发语言·javascript·arcgis
祈祷苍天赐我java之术9 小时前
Redis 有序集合解析
java·前端·windows·redis·缓存·bootstrap·html
心.c11 小时前
一套完整的前端“白屏”问题分析与解决方案(性能优化)
前端·javascript·性能优化·html
俺会hello我的11 小时前
舒尔特方格开源
前端·javascript·开源
lbh11 小时前
Chrome DevTools 详解(二):Console 面板
前端·javascript·浏览器