中华传统文化网页纯前端期末大作业3页|HTML+CSS+JS|新手必备

前几天帮一位朋友做的中华传统文化网页纯前端3页，使用纯HTML、CSS、JS，纯原生制作

1、使用div+css布局，结构清晰，代码简洁

2、包括统一的导航栏、底部版权信息

3、网页色彩搭配合理，布局紧凑美观，版块结构清晰

4、网页作品目录结构合理，文件名称使用规范(首页律使用 index.html 命名)。

5、包含一定的js函数效果

6、可使用任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页）

7、Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖

看看效果

部分代码

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华夏文明 - 中国传统文化</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <a href="#" class="logo">华夏文明</a>
            <ul class="nav-links">
                <li><a href="./index.html" class="nav-link active" data-page="home">首页</a></li>
                <li><a href="./shufa.html" class="nav-link" data-page="calligraphy">书法艺术</a></li>
                <li><a href="./jieri.html" class="nav-link" data-page="festivals">传统节日</a></li>
            </ul>
        </div>
    </nav>

    <!-- 首页 -->
    <section id="home" class="page active">
        <div class="container">
            <h2 class="page-title">中国传统文化</h2>
            <div class="card-container">
                <div class="card">
                    <div class="card-image">
                        <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='350' height='200' viewBox='0 0 350 200'><rect width='350' height='200' fill='%23d4c0a1'/><text x='50%' y='50%' font-size='24' text-anchor='middle' fill='%235c3e1d' font-family='STKaiti'>书法艺术</text></svg>" alt="书法艺术">
                    </div>
                    <div class="card-content">
                        <h3>书法艺术</h3>
                        <p>中国书法是汉字的书写艺术，是中华民族的文化瑰宝。从甲骨文、金文演变为大篆、小篆、隶书，再到东汉、魏晋时期的草书、楷书、行书，书法散发着独特的艺术魅力。</p>
                        <button class="btn explore-btn" data-page="calligraphy">探索书法</button>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-image">
                        <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='350' height='200' viewBox='0 0 350 200'><rect width='350' height='200' fill='%23d4c0a1'/><text x='50%' y='50%' font-size='24' text-anchor='middle' fill='%235c3e1d' font-family='STKaiti'>传统节日</text></svg>" alt="传统节日">
                    </div>
                    <div class="card-content">
                        <h3>传统节日</h3>
                        <p>中国传统节日是中华民族悠久历史文化的重要组成部分，形式多样、内容丰富。春节、元宵、清明、端午、七夕、中秋、重阳等节日承载着丰富的文化内涵和民族精神。</p>
                        <button class="btn explore-btn" data-page="festivals">了解节日</button>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-image">
                        <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='350' height='200' viewBox='0 0 350 200'><rect width='350' height='200' fill='%23d4c0a1'/><text x='50%' y='50%' font-size='24' text-anchor='middle' fill='%235c3e1d' font-family='STKaiti'>传统音乐</text></svg>" alt="传统音乐">
                    </div>
                    <div class="card-content">
                        <h3>传统音乐</h3>
                        <p>中国传统音乐源远流长，具有独特的韵味和艺术魅力。古琴、琵琶、二胡、笛子等民族乐器演奏出的音乐，承载着中华民族的情感和智慧。</p>
                        <button class="btn" id="musicBtn">播放音乐</button>
                    </div>
                </div>
            </div>
            
            <div class="card-container">
                <div class="card" style="width: 100%; max-width: 800px;">
                    <div class="card-content">
                        <h3>文化探索</h3>
                        <p>中华文化博大精深，上下五千年历史孕育了丰富多彩的文化遗产。从哲学思想到文学艺术，从科学技术到礼仪习俗，无不体现着中华民族的智慧和创造力。</p>
                        <p>通过本网站，您可以深入了解中国传统文化中的书法艺术、传统节日、传统音乐等多个方面，感受中华文化的独特魅力。</p>
                        <div style="text-align: center; margin-top: 20px;">
                            <button class="btn" id="changeColorBtn">切换背景</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 页脚 -->
    <footer>
        <p>华夏文明 - 中国传统文化传承与发扬</p>
        <p>© 2023 中华文化传播中心</p>
    </footer>
</body>
</html>