美食网页模板代码如何快速上手？-网页设计-锦华智联科技

HTML5: 定义网页的结构和内容。
CSS3: 进行样式设计，包括布局、颜色、字体和响应式设计。
JavaScript: 实现交互功能，如轮播图和选项卡切换。

最终效果预览

在开始之前,先看看我们即将制作的效果：

（图片来源网络，侵删）

顶部导航栏: 包含 Logo、主导航菜单和行动按钮（如“预订餐桌”）。
英雄区域: 大图背景，引人注目的标题和副标题，以及一个“查看菜单”的按钮。
特色菜品: 以网格布局展示几道招牌菜，包含图片、名称、简短描述和价格。
故事/关于我们: 用图文并茂的方式介绍餐厅的背景和理念。
菜单展示: 使用选项卡来展示不同类别的菜品（如开胃菜、主菜、甜点）。
顾客评价: 展示一些顾客的评论和星级评分。
页脚: 包含联系方式、社交媒体链接和版权信息。

文件结构

为了保持代码的整洁,我们将创建三个文件：

food-website/
├── index.html
├── style.css
└── script.js

代码实现

A. `index.html` (结构文件)

这是网页的骨架,包含了所有的内容和结构。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">美味时光 - 品味生活的每一刻</title>
    <link rel="stylesheet" href="style.css">
    <!-- 引入字体图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <header class="navbar">
        <div class="container">
            <a href="#" class="logo">美味时光</a>
            <nav class="nav-links">
                <a href="#home">首页</a>
                <a href="#menu">菜单</a>
                <a href="#about">关于我们</a>
                <a href="#reviews">评价</a>
                <a href="#contact" class="cta-button">预订餐桌</a>
            </nav>
        </div>
    </header>
    <main>
        <!-- 英雄区域 -->
        <section id="home" class="hero">
            <div class="hero-content">
                <h1>品味生活的每一刻</h1>
                <p>用最新鲜的食材，为您带来最地道的味蕾体验</p>
                <a href="#menu" class="btn">查看菜单</a>
            </div>
        </section>
        <!-- 特色菜品 -->
        <section id="featured-dishes" class="featured-dishes">
            <div class="container">
                <h2 class="section-title">招牌推荐</h2>
                <div class="dishes-grid">
                    <div class="dish-card">
                        <img src="https://via.placeholder.com/300x200?text=招牌红烧肉" alt="招牌红烧肉">
                        <h3>招牌红烧肉</h3>
                        <p>肥而不腻，入口即化，传统工艺精心烹制。</p>
                        <p class="price">¥68</p>
                    </div>
                    <div class="dish-card">
                        <img src="https://via.placeholder.com/300x200?text=清蒸鲈鱼" alt="清蒸鲈鱼">
                        <h3>清蒸鲈鱼</h3>
                        <p>肉质鲜嫩，原汁原味，保持海鲜最本真的鲜美。</p>
                        <p class="price">¥98</p>
                    </div>
                    <div class="dish-card">
                        <img src="https://via.placeholder.com/300x200?text=蒜蓉粉丝蒸扇贝" alt="蒜蓉粉丝蒸扇贝">
                        <h3>蒜蓉粉丝蒸扇贝</h3>
                        <p>Q弹扇贝，配上爽滑粉丝，蒜香浓郁，回味无穷。</p>
                        <p class="price">¥48</p>
                    </div>
                </div>
            </div>
        </section>
        <!-- 关于我们 -->
        <section id="about" class="about">
            <div class="container">
                <div class="about-content">
                    <div class="about-text">
                        <h2>我们的故事</h2>
                        <p>“美味时光”始于2010年，由主厨李明先生创立，怀揣着对美食的热爱与执着，我们坚持从本地农场采购最新鲜的食材，拒绝任何不必要的添加剂。</p>
                        <p>我们相信，一顿好的饭菜不仅能满足口腹之欲，更能带来家人朋友间的温暖与欢乐，每一道菜品都承载着我们对品质的承诺和对食客的敬意。</p>
                    </div>
                    <div class="about-image">
                        <img src="https://via.placeholder.com/500x350?text=我们的厨房" alt="我们的厨房">
                    </div>
                </div>
            </div>
        </section>
        <!-- 菜单展示 -->
        <section id="menu" class="menu-section">
            <div class="container">
                <h2 class="section-title">精选菜单</h2>
                <!-- 选项卡导航 -->
                <div class="menu-tabs">
                    <button class="tab-btn active" data-tab="appetizers">开胃菜</button>
                    <button class="tab-btn" data-tab="mains">主菜</button>
                    <button class="tab-btn" data-tab="desserts">甜点</button>
                </div>
                <!-- 选项卡内容 -->
                <div class="menu-content">
                    <div id="appetizers" class="tab-pane active">
                        <div class="menu-items">
                            <div class="menu-item">
                                <h3>凉拌黄瓜</h3>
                                <p class="description">清爽爽口，夏日必备</p>
                                <p class="price">¥18</p>
                            </div>
                            <div class="menu-item">
                                <h3>夫妻肺片</h3>
                                <p class="description">麻辣鲜香，川味经典</p>
                                <p class="price">¥38</p>
                            </div>
                        </div>
                    </div>
                    <div id="mains" class="tab-pane">
                        <div class="menu-items">
                            <div class="menu-item">
                                <h3>宫保鸡丁</h3>
                                <p class="description">鸡肉嫩滑，花生酥脆</p>
                                <p class="price">¥58</p>
                            </div>
                            <div class="menu-item">
                                <h3>麻婆豆腐</h3>
                                <p class="description">麻辣鲜香，豆腐嫩滑入味</p>
                                <p class="price">¥28</p>
                            </div>
                        </div>
                    </div>
                    <div id="desserts" class="tab-pane">
                        <div class="menu-items">
                            <div class="menu-item">
                                <h3>提拉米苏</h3>
                                <p class="description">意式经典，浓郁丝滑</p>
                                <p class="price">¥35</p>
                            </div>
                            <div class="menu-item">
                                <h3>杨枝甘露</h3>
                                <p class="description">芒果西柚，清甜解腻</p>
                                <p class="price">¥25</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- 顾客评价 -->
        <section id="reviews" class="reviews">
            <div class="container">
                <h2 class="section-title">顾客心声</h2>
                <div class="reviews-grid">
                    <div class="review-card">
                        <div class="review-header">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                        <p>"红烧肉太绝了！肥瘦相间，甜咸适中，是我吃过最好吃的！环境也很棒，下次还会再来。"</p>
                        <div class="review-author">
                            <img src="https://via.placeholder.com/50x50?text=王" alt="顾客头像">
                            <span>王先生</span>
                        </div>
                    </div>
                    <div class="review-card">
                        <div class="review-header">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="far fa-star"></i>
                        </div>
                        <p>"服务非常热情，菜品味道正宗，清蒸鲈鱼很新鲜，家人都很喜欢，性价比很高！"</p>
                        <div class="review-author">
                            <img src="https://via.placeholder.com/50x50?text=李" alt="顾客头像">
                            <span>李女士</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <!-- 页脚 -->
    <footer id="contact" class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>联系我们</h3>
                    <p><i class="fas fa-map-marker-alt"></i> 北京市朝阳区美食街88号</p>
                    <p><i class="fas fa-phone"></i> 010-12345678</p>
                    <p><i class="fas fa-envelope"></i> info@meiweishiguang.com</p>
                </div>
                <div class="footer-section">
                    <h3>营业时间</h3>
                    <p>周一至周五: 11:00 - 22:00</p>
                    <p>周六至周日: 10:00 - 23:00</p>
                </div>
                <div class="footer-section">
                    <h3>关注我们</h3>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-weixin"></i></a>
                        <a href="#"><i class="fab fa-weibo"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2025 美味时光. All rights reserved.</p>
            </div>
        </div>
    </footer>
    <script src="script.js"></script>
</body>
</html>

B. `style.css` (样式文件)

这是网页的“外衣”，负责美化所有元素。

/* --- 全局样式 --- */
:root {
    --primary-color: #e74c3c; /* 主色调，红色 */
    --secondary-color: #2c3e50; /* 次要色调，深蓝 */
    --text-color: #333;
    --light-color: #f4f4f4;
    --white-color: #fff;
    --max-width: 1200px;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--white-color);
}
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}
h1, h2, h3 {
    margin-bottom: 1rem;
    line-height: 1.2;
}
h2.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin: 3rem 0;
    color: var(--secondary-color);
}
a {
    text-decoration: none;
    color: var(--primary-color);
}
.btn {
    display: inline-block;
    background: var(--primary-color);
    color: var(--white-color);
    padding: 12px 25px;
    border-radius: 5px;
    margin-top: 1rem;
    transition: background 0.3s ease;
}
.btn:hover {
    background: #c0392b;
}
/* --- 导航栏 --- */
.navbar {
    background: var(--white-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}
.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 20px;
}
.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--secondary-color);
}
.nav-links {
    display: flex;
    list-style: none;
}
.nav-links a {
    color: var(--text-color);
    margin-left: 2rem;
    font-weight: 500;
}
.cta-button {
    background: var(--primary-color);
    color: var(--white-color);
    padding: 8px 15px;
    border-radius: 5px;
}
/* --- 英雄区域 --- */
.hero {
    height: 100vh;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://via.placeholder.com/1920x1080?text=美食大图') no-repeat center center/cover;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--white-color);
}
.hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}
.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}
/* --- 特色菜品 --- */
.dishes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}
.dish-card {
    background: var(--white-color);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}
.dish-card:hover {
    transform: translateY(-10px);
}
.dish-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.dish-card h3 {
    padding: 1rem;
    font-size: 1.3rem;
}
.dish-card p {
    padding: 0 1rem;
    color: #777;
}
.dish-card .price {
    padding: 1rem;
    font-weight: bold;
    font-size: 1.2rem;
    color: var(--primary-color);
    text-align: right;
}
/* --- 关于我们 --- */
.about {
    background: var(--light-color);
    padding: 4rem 0;
}
.about-content {
    display: flex;
    align-items: center;
    gap: 3rem;
}
.about-text {
    flex: 1;
}
.about-image {
    flex: 1;
}
.about-image img {
    width: 100%;
    border-radius: 10px;
}
/* --- 菜单展示 --- */
.menu-section {
    padding: 4rem 0;
}
.menu-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
    border-bottom: 1px solid #ddd;
}
.tab-btn {
    background: none;
    border: none;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    cursor: pointer;
    color: #777;
    transition: color 0.3s ease;
}
.tab-btn.active {
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
}
.tab-pane {
    display: none;
}
.tab-pane.active {
    display: block;
}
.menu-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
}
.menu-item {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    background: var(--light-color);
    border-radius: 8px;
}
.menu-item h3 {
    color: var(--secondary-color);
}
.menu-item .description {
    color: #777;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}
.menu-item .price {
    font-weight: bold;
    color: var(--primary-color);
}
/* --- 顾客评价 --- */
.reviews {
    background: var(--light-color);
    padding: 4rem 0;
}
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}
.review-card {
    background: var(--white-color);
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.review-header i {
    color: #f1c40f; /* 星星颜色 */
    margin-right: 2px;
}
.review-card p {
    margin-bottom: 1rem;
    font-style: italic;
}
.review-author {
    display: flex;
    align-items: center;
}
.review-author img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}
/* --- 页脚 --- */
.footer {
    background: var(--secondary-color);
    color: var(--white-color);
    padding: 3rem 0 1rem;
}
.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}
.footer-section h3 {
    margin-bottom: 1rem;
    color: var(--white-color);
}
.footer-section p {
    margin-bottom: 0.5rem;
}
.footer-section i {
    margin-right: 8px;
    color: var(--primary-color);
}
.social-links a {
    color: var(--white-color);
    font-size: 1.5rem;
    margin-right: 1rem;
}
.footer-bottom {
    text-align: center;
    padding-top: 1rem;
    border-top: 1px solid #444;
    font-size: 0.9rem;
    color: #bbb;
}
/* --- 响应式设计 --- */
@media (max-width: 768px) {
    .navbar .container {
        flex-direction: column;
        text-align: center;
    }
    .nav-links {
        margin: 1rem 0;
    }
    .nav-links a {
        margin: 0 1rem;
    }
    .hero-content h1 {
        font-size: 2.5rem;
    }
    .about-content {
        flex-direction: column;
    }
    .menu-tabs {
        flex-wrap: wrap;
    }
    .tab-btn {
        padding: 0.8rem 1.5rem;
    }
}

C. `script.js` (交互文件)

这是网页的“灵魂”，让菜单选项卡等交互功能生效。

（图片来源网络，侵删）

document.addEventListener('DOMContentLoaded', () => {
    // 菜单选项卡切换功能
    const tabBtns = document.querySelectorAll('.tab-btn');
    const tabPanes = document.querySelectorAll('.tab-pane');
    tabBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            // 移除所有按钮和面板的 'active' 类
            tabBtns.forEach(b => b.classList.remove('active'));
            tabPanes.forEach(p => p.classList.remove('active'));
            // 为当前点击的按钮和对应的面板添加 'active' 类
            btn.classList.add('active');
            const tabId = btn.getAttribute('data-tab');
            document.getElementById(tabId).classList.add('active');
        });
    });
    // 平滑滚动到锚点
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });
});

如何使用

创建文件: 在你的电脑上创建一个名为 food-website 的文件夹，然后在里面创建 index.html, style.css, 和 script.js 三个文件。
复制代码: 将上面提供的代码分别粘贴到对应的文件中。
替换图片: 在 index.html 中，我使用了 https://via.placeholder.com/... 作为占位图片，你需要将这些替换为你自己的美食图片、餐厅图片等，确保图片路径正确。
打开网页: 用浏览器打开 index.html 文件，你就能看到完整的美食网页了。

如何扩展和自定义

这个模板是一个非常好的起点,你可以根据自己的需求进行修改和扩展：

添加更多页面: 创建 about.html, menu.html 等页面，并通过导航栏链接它们。
集成后端: 使用 Node.js, Python (Django/Flask), PHP 等技术，将静态页面变成一个动态网站，连接数据库来管理菜单、订单和用户信息。
添加在线预订功能: 集成第三方预订服务或自己开发一个预订表单。
添加购物车: 如果你要做外卖平台，需要添加一个购物车功能来管理用户选择的菜品。
优化SEO: 添加 meta 标签、结构化数据等，以便在搜索引擎中获得更好的排名。
更丰富的动画: 使用 CSS animation 和 @keyframes 或 JavaScript 动画库（如 GSAP）来添加更多吸引人的视觉效果。

希望这个详细的模板和代码能帮助你成功制作出你的美食网页！

（图片来源网络，侵删）

美食网页模板代码如何快速上手？

最终效果预览

文件结构

代码实现

A. index.html (结构文件)

B. style.css (样式文件)

C. script.js (交互文件)

如何使用

如何扩展和自定义

A. `index.html` (结构文件)

B. `style.css` (样式文件)

C. `script.js` (交互文件)