SOURCE

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>岭南广式点心文化网</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "微软雅黑", sans-serif;
        }
        body {
            background-color: #fdf8f0;
            color: #333;
            line-height: 1.6;
        }
        /* 导航栏 */
        nav {
            background-color: #8b4513;
            padding: 0 10%;
            height: 60px;
            line-height: 60px;
            position: sticky;
            top: 0;
        }
        nav ul {
            list-style: none;
            display: flex;
            justify-content: space-around;
        }
        nav a {
            color: #fff;
            text-decoration: none;
            font-size: 16px;
            padding: 0 15px;
            cursor: pointer;
            transition: 0.3s;
        }
        nav a:hover, nav a.active {
            background-color: #d2691e;
        }
        /* 横幅 */
        .banner {
            height: 300px;
            background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(https://picsum.photos/id/292/1200/300) center/cover;
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
        .banner h1 {
            font-size: 42px;
            margin-bottom: 10px;
        }
        .banner p {
            font-size: 18px;
        }
        /* 内容容器 */
        .container {
            width: 80%;
            margin: 40px auto;
        }
        .page {
            display: none;
        }
        .page.active {
            display: block;
        }
        .page h2 {
            color: #8b4513;
            border-bottom: 2px solid #d2691e;
            padding-bottom: 8px;
            margin-bottom: 25px;
            font-size: 28px;
        }
        /* 首页卡片 */
        .card-box {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-top: 30px;
        }
        .card {
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            text-align: center;
            padding-bottom: 15px;
            cursor: pointer;
            transition: 0.3s;
        }
        .card:hover {
            transform: translateY(-5px);
        }
        .card img {
            width: 100%;
            height: 150px;
            object-fit: cover;
        }
        .card h3 {
            margin: 10px 0;
            color: #8b4513;
        }
        /* 图鉴网格 */
        .food-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
        }
        .food-item {
            display: flex;
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .food-item img {
            width: 180px;
            object-fit: cover;
        }
        .food-text {
            padding: 20px;
        }
        .food-text h3 {
            color: #8b4513;
            margin-bottom: 10px;
        }
        /* 工艺步骤 */
        .step-list {
            background: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .step-list li {
            margin-bottom: 18px;
            list-style: none;
            padding-left: 20px;
            border-left: 3px solid #d2691e;
        }
        .step-list h4 {
            color: #8b4513;
            margin-bottom: 5px;
        }
        /* 故事、探店文本 */
        .text-box {
            background: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .text-box p {
            margin-bottom: 15px;
            text-indent: 2em;
        }
        .shop-item {
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px dashed #ddd;
        }
        .shop-item:last-child {
            border-bottom: none;
        }
        .shop-item h4 {
            color: #8b4513;
            margin-bottom: 8px;
        }
        /* 页脚 */
        footer {
            background-color: #8b4513;
            color: #fff;
            text-align: center;
            padding: 20px 0;
            margin-top: 50px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav>
        <ul>
            <li><a class="nav-btn active" data-page="home">首页</a></li>
            <li><a class="nav-btn" data-page="catalog">点心图鉴</a></li>
            <li><a class="nav-btn" data-page="craft">传统工艺</a></li>
            <li><a class="nav-btn" data-page="story">点心故事</a></li>
            <li><a class="nav-btn" data-page="shop">打卡探店</a></li>
        </ul>
    </nav>

    <!-- 横幅 -->
    <div class="banner">
        <h1>岭南广式点心文化网</h1>
        <p>一盅两件，品味广府百年食韵</p>
    </div>

    <div class="container">
        <!-- 首页 -->
        <div class="page active" id="home">
            <h2>网站简介</h2>
            <p>广式点心是岭南饮食文化的核心代表之一，历经百年发展，形成了“一盅两件”的早茶文化。本网站聚焦广式点心文化，从品类、技艺、历史、本地门店多个维度，带大家了解地道的广式点心魅力。</p>
            
            <div class="card-box">
                <div class="card" onclick="switchPage('catalog')">
                    <img src="https://picsum.photos/id/292/300/150" alt="点心图鉴">
                    <h3>点心图鉴</h3>
                    <p>经典品类一览</p>
                </div>
                <div class="card" onclick="switchPage('craft')">
                    <img src="https://picsum.photos/id/431/300/150" alt="传统工艺">
                    <h3>传统工艺</h3>
                    <p>古法制作技艺</p>
                </div>
                <div class="card" onclick="switchPage('story')">
                    <img src="https://picsum.photos/id/429/300/150" alt="点心故事">
                    <h3>点心故事</h3>
                    <p>历史文化溯源</p>
                </div>
                <div class="card" onclick="switchPage('shop')">
                    <img src="https://picsum.photos/id/493/300/150" alt="打卡探店">
                    <h3>打卡探店</h3>
                    <p>地道老字号推荐</p>
                </div>
            </div>
        </div>

        <!-- 点心图鉴页 -->
        <div class="page" id="catalog">
            <h2>经典点心图鉴</h2>
            <div class="food-grid">
                <div class="food-item">
                    <img src="https://picsum.photos/id/292/180/200" alt="虾饺">
                    <div class="food-text">
                        <h3>水晶虾饺</h3>
                        <p>广式点心的“四大天王”之首，皮薄如纸、半透明，内馅为整只鲜虾，口感Q弹鲜美，是早茶桌必点单品。</p>
                    </div>
                </div>
                <div class="food-item">
                    <img src="https://picsum.photos/id/431/180/200" alt="干蒸烧卖">
                    <div class="food-text">
                        <h3>干蒸烧卖</h3>
                        <p>以猪肉、鲜虾为馅，薄皮裹制，顶部点缀蟹籽，肉质鲜嫩多汁，是广式早茶的经典品类。</p>
                    </div>
                </div>
                <div class="food-item">
                    <img src="https://picsum.photos/id/429/180/200" alt="叉烧包">
                    <div class="food-text">
                        <h3>蜜汁叉烧包</h3>
                        <p>松软的面皮包裹甜咸适口的叉烧肉馅，开花造型是其标志性特点，口感松软香甜。</p>
                    </div>
                </div>
                <div class="food-item">
                    <img src="https://picsum.photos/id/493/180/200" alt="蛋挞">
                    <div class="food-text">
                        <h3>酥皮蛋挞</h3>
                        <p>层层起酥的挞皮搭配嫩滑的蛋液内馅，口感外酥里嫩，蛋香浓郁，是广式点心的经典甜品。</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 传统工艺页 -->
        <div class="page" id="craft">
            <h2>传统制作工艺</h2>
            <ul class="step-list">
                <li>
                    <h4>1. 制皮：手工揉面开酥</h4>
                    <p>酥皮点心需经过反复揉面、折叠、开酥，才能形成层层分明的口感；虾饺皮则需用澄面手工擀制，做到薄而不破。</p>
                </li>
                <li>
                    <h4>2. 调馅：食材鲜切现配</h4>
                    <p>广式点心讲究“鲜”，馅料多选用当日新鲜食材，精准配比调味，保留食材本味的同时突出风味层次。</p>
                </li>
                <li>
                    <h4>3. 塑形：非遗手工技法</h4>
                    <p>虾饺的“十三道褶”、叉烧包的“开花顶”都是传统手艺的体现，讲究造型规整、分量均匀，是点心师傅的基本功。</p>
                </li>
                <li>
                    <h4>4. 蒸制：火候精准把控</h4>
                    <p>多数广式点心以蒸制为主，需严格把控蒸汽大小与时长，确保点心熟透且口感嫩滑，外形完整不塌。</p>
                </li>
            </ul>
        </div>

        <!-- 点心故事页 -->
        <div class="page" id="story">
            <h2>点心文化故事</h2>
            <div class="text-box">
                <p>广式点心起源于清代中后期的广州，当时广州作为通商口岸，商贸繁荣，茶馆、茶楼逐渐兴起。最初的点心只是茶馆的配套小食，供茶客垫肚子，后来品类逐渐丰富，形成了独立的点心体系。</p>
                <p>“一盅两件”是广式早茶的代名词：一盅功夫茶，配上两件点心，是广东人数百年来的生活习惯。早茶不只是吃饭，更是社交方式，家人朋友围坐一桌，喝茶吃点心、聊家常，是广府文化的重要组成部分。</p>
                <p>如今，广式点心制作技艺已被列入省级非物质文化遗产名录，从广州走向全国乃至全世界，成为中国饮食文化的一张名片。</p>
            </div>
        </div>

        <!-- 打卡探店页 -->
        <div class="page" id="shop">
            <h2>地道老字号打卡</h2>
            <div class="text-box">
                <div class="shop-item">
                    <h4>广州 · 陶陶居</h4>
                    <p>创立于1880年的百年老字号，是广式早茶的标杆品牌，点心品类齐全，传统手艺正宗，是体验广式早茶文化的首选。</p>
                </div>
                <div class="shop-item">
                    <h4>广州 · 点都德</h4>
                    <p>传承老广州饮茶文化，主打全手工制作点心，招牌虾饺、红米肠口碑出众，门店遍布广州，是本地人的常去之选。</p>
                </div>
                <div class="shop-item">
                    <h4>肇庆 · 端州茶楼</h4>
                    <p>肇庆本地老牌茶楼，结合了广式点心与本地口味，性价比高，是本地人喝早茶的常去之地，能体验地道的粤西早茶氛围。</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer>
        <p>岭南广式点心文化网 | 课程作业展示</p>
    </footer>

    <script>
        // 页面切换功能
        function switchPage(pageId) {
            // 隐藏所有页面
            document.querySelectorAll('.page').forEach(page => {
                page.classList.remove('active');
            });
            // 显示目标页面
            document.getElementById(pageId).classList.add('active');
            
            // 更新导航高亮
            document.querySelectorAll('.nav-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            document.querySelector(`[data-page="${pageId}"]`).classList.add('active');

            // 滚动到顶部
            window.scrollTo(0, 0);
        }

        // 导航按钮点击事件
        document.querySelectorAll('.nav-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const pageId = this.getAttribute('data-page');
                switchPage(pageId);
            });
        });
    </script>
</body>
</html>