HTML+CSS+JS制作中华传统文化主题网站（内附源码，含5个页面）

WebDesign_Mu

于 2025-01-07 23:56:35 发布

阅读量1k

点赞数 15

文章标签： javascript html css

本文链接：https://blog.csdn.net/WebDesign_Mu/article/details/144996160

版权

一、作品介绍

HTML+CSS+JS制作一个中华传统文化主题网站，包含首页、文化艺术页、传统工艺页、文化遗产页、关于我们页等5个静态页面。其中每个页面都包含一个导航栏、一个主要区域和一个底部区域。

二、页面结构

1. 顶部导航区

包含网站 Logo、主导航菜单（首页、文化分类、活动资讯、互动社区、关于我们）和搜索功能

2. 主视觉横幅

展示具有中国特色的传统文化元素的大幅轮播图，配以传统纹样装饰边框

3. 文化精粹模块

以四宫格形式展示'诗词歌赋'、'传统节日'、'礼仪之道'、'国粹艺术'等核心文化内容入口

4. 每日文化馈赠

展示每日一诗、成语故事、传统美文等内容，配以精美插画

5. 文化传承展示区

以图文结合的形式展示非物质文化遗产、传统工艺、戏曲等内容，采用横向滚动展示

6. 互动专区

设置'文化问答'、'诗词创作'、'书法展示'等互动板块，鼓励用户参与

7. 底部信息区

包含网站地图、联系方式、合作伙伴、版权信息等

三、作品演示

四、代码目录

五、首页代码

<!DOCTYPE html>
<html lang="zh">
  <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 space-x-12">
              <h1 class="text-2xl font-['Pacifico'] text-custom">logo</h1>
              <div class="hidden md:flex space-x-8">
                <a href="./index.html" class="font-bold text-gray-700 hover:text-custom">首页</a>
                <a href="./culture-arts.html" class="text-gray-700 hover:text-custom">文化艺术</a>
                <a href="./traditional-craftsmanship.html" class="text-gray-700 hover:text-custom">传统工艺</a>
                <a href="./cultural-heritage.html" class="text-gray-700 hover:text-custom">文化遗产</a>
                <a href="./about-us.html" class="text-gray-700 hover:text-custom">关于我们</a>
              </div>
            </div>
            <div class="flex items-center space-x-4">
              <div class="relative">
                <input type="text" placeholder="搜索" class="pl-10 pr-4 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-custom">
                <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm"></i>
              </div>
              <button class="!rounded-button bg-custom text-white px-6 py-2">登录</button>
            </div>
          </div>
        </nav>
      </header>

      <main>
        <section class="relative h-[500px] overflow-hidden">
          <img src="./images/b1.jpg" 
               alt="传统建筑" 
               class="w-full h-full object-cover object-center">
          <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-4">传承中华文明 弘扬传统文化</h2>
              <p class="text-xl mb-8">探索五千年文明瑰宝，感受东方智慧魅力</p>
              <button class="!rounded-button bg-custom text-white px-8 py-3 text-lg">了解更多</button>
            </div>
          </div>
        </section>

        <section class="container mx-auto px-6 py-16">
          <h3 class="text-3xl font-bold text-center mb-12">文化精粹</h3>
          <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div class="bg-white rounded-lg shadow-md overflow-hidden">
              <img src="./images/w1.jpg" 
                   alt="书法艺术" 
                   class="w-full h-48 object-cover">
              <div class="p-6">
                <h4 class="text-xl font-bold mb-2">书法艺术</h4>
                <p class="text-gray-600">书法艺术是中国传统文化的精髓，体现着独特的东方美学与哲学思想。</p>
              </div>
            </div>
            <div class="bg-white rounded-lg shadow-md overflow-hidden">
              <img src="./images/w2.jpg" 
                   alt="戏曲艺术" 
                   class="w-full h-48 object-cover">
              <div class="p-6">
                <h4 class="text-xl font-bold mb-2">戏曲艺术</h4>
                <p class="text-gray-600">戏曲是中国传统表演艺术的瑰宝，融合音乐、舞蹈、文学等多种艺术形式。</p>
              </div>
            </div>
            <div class="bg-white rounded-lg shadow-md overflow-hidden">
              <img src="./images/w3.jpg" 
                   alt="陶瓷艺术" 
                   class="w-full h-48 object-cover">
              <div class="p-6">
                <h4 class="text-xl font-bold mb-2">陶瓷艺术</h4>
                <p class="text-gray-600">中国陶瓷艺术历史悠久，以其精湛的工艺和独特的审美价值闻名于世。</p>
              </div>
            </div>
            <div class="bg-white rounded-lg shadow-md overflow-hidden">
              <img src="./images/w4.jpg" 
                   alt="国画艺术" 
                   class="w-full h-48 object-cover">
              <div class="p-6">
                <h4 class="text-xl font-bold mb-2">国画艺术</h4>
                <p class="text-gray-600">水墨丹青间展现东方意境，笔墨之间蕴含天地自然之道。</p>
              </div>
            </div>
          </div>
        </section>

        <section class="bg-gray-100 py-16">
          <div class="container mx-auto px-6">
            <h3 class="text-3xl font-bold text-center mb-12">文化活动</h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
              <div class="bg-white rounded-lg shadow-md p-6">
                <div class="flex items-center mb-4">
                  <i class="fas fa-calendar-alt text-custom text-xl mr-3"></i>
                  <h4 class="text-xl font-bold">传统文化讲座</h4>
                </div>
                <p class="text-gray-600 mb-4">每周六下午14:00-16:00</p>
                <p class="text-gray-600">由著名文化学者主讲，深入浅出地讲解中国传统文化精髓。</p>
              </div>
              <div class="bg-white rounded-lg shadow-md p-6">
                <div class="flex items-center mb-4">
                  <i class="fas fa-paint-brush text-custom text-xl mr-3"></i>
                  <h4 class="text-xl font-bold">工艺品制作体验</h4>
                </div>
                <p class="text-gray-600 mb-4">每周日上午10:00-12:00</p>
                <p class="text-gray-600">亲手体验传统工艺制作，感受匠人精神与文化魅力。</p>
              </div>
              <div class="bg-white rounded-lg shadow-md p-6">
                <div class="flex items-center mb-4">
                  <i class="fas fa-music text-custom text-xl mr-3"></i>
                  <h4 class="text-xl font-bold">传统音乐欣赏会</h4>
                </div>
                <p class="text-gray-600 mb-4">每月最后一个周五19:00-21:00</p>
                <p class="text-gray-600">聆听古琴、笛箫等传统乐器演奏，感受传统音乐之美。</p>
              </div>
            </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-1 md: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>
              <p class="text-gray-400">地址：北京市东城区文化大道88号</p>
              <p class="text-gray-400">电话：010-88888888</p>
              <p class="text-gray-400">邮箱：info@culture.com</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>
              <div class="flex space-x-4">
                <a href="#" class="text-gray-400 hover:text-white text-xl">
                  <i class="fab fa-weixin"></i>
                </a>
                <a href="#" class="text-gray-400 hover:text-white text-xl">
                  <i class="fab fa-weibo"></i>
                </a>
                <a href="#" class="text-gray-400 hover:text-white text-xl">
                  <i class="fab fa-tiktok"></i>
                </a>
              </div>
            </div>
          </div>
          <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
            <p>© 2024 中华传统文化网. 保留所有权利</p>
          </div>
        </div>
      </footer>
    </div>
  </body>
</html>