美食网站HTML静态网页如何制作？-网页设计-锦华智联科技

网站规划：确定网站的结构和页面。
技术栈：我们将使用哪些技术。
页面设计与实现：详细讲解每个页面的HTML和CSS代码。
完整代码：提供所有页面的完整代码，方便您直接使用和修改。
如何使用：教您如何将代码变成一个可以在浏览器中打开的网站。

网站规划

一个简单的美食网站至少需要以下几个页面：

（图片来源网络，侵删）

首页：展示网站的精华内容，包括精选食谱、特色文章、美食图片墙等。
食谱列表页：展示所有食谱的列表，可以按分类筛选。
食谱详情页：展示单个食谱的完整信息，包括食材、步骤、图片等。
关于我们页：介绍网站或美食博主的故事。

文件结构：为了保持项目整洁，我们采用以下文件夹结构：

my-food-website/
├── index.html          # 首页
├── recipes.html        # 食谱列表页
├── recipe-detail.html # 食谱详情页
├── about.html          # 关于我们页
├── css/
│   └── style.css       # 全局样式表
├── images/
│   ├── logo.png        # 网站Logo
│   ├── hero-bg.jpg     # 首页大图背景
│   └── ...             # 其他图片
└── js/
    └── script.js       # (可选) 用于一些简单的交互

技术栈

HTML5: 用于构建网页的结构和内容。
CSS3: 用于美化网页，设置布局、颜色、字体等样式。
Google Fonts: 引入美观的免费中文字体。
Font Awesome: 引入常用的图标（如搜索、用户、菜单等）。
(可选) JavaScript: 用于实现一些简单的交互效果，比如响应式菜单的展开/收起。

页面设计与实现

我们将采用现代、简洁的设计风格，主色调选择温暖的橙色系，搭配白色和深灰色，营造出诱人的美食氛围。

通用元素 (所有页面都会用到)

我们在 css/style.css 中定义一些通用样式，比如字体、颜色、链接样式等。

/* css/style.css */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');
:root {
    --primary-color: #FF6B35;
    --secondary-color: #F7931E;
    --dark-color: #333;
    --light-color: #f4f4f4;
    --white-color: #fff;
}
body {
    font-family: 'Noto Sans SC', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: var(--dark-color);
}
.container {
    max-width: 1100px;
    margin: auto;
    overflow: hidden;
    padding: 0 2rem;
}
h1, h2, h3 {
    margin: 0;
    font-weight: 700;
}
a {
    text-decoration: none;
    color: var(--dark-color);
}
.btn {
    display: inline-block;
    background: var(--primary-color);
    color: var(--white-color);
    padding: 0.8rem 1.5rem;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}
.btn:hover {
    background: var(--secondary-color);
}
/* 导航栏样式 */
.main-nav {
    background: var(--white-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}
.main-nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
}
.main-nav .logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}
.main-nav .nav-links {
    display: flex;
    list-style: none;
}
.main-nav .nav-links li {
    margin-left: 1.5rem;
}
.main-nav .nav-links a {
    color: var(--dark-color);
    font-weight: 500;
    transition: color 0.3s ease;
}
.main-nav .nav-links a:hover {
    color: var(--primary-color);
}
/* 页脚样式 */
.main-footer {
    background: var(--dark-color);
    color: var(--white-color);
    text-align: center;
    padding: 2rem 0;
    margin-top: 2rem;
}

首页 (`index.html`)

首页是网站的门户,需要吸引访客。

（图片来源网络，侵删）

HTML 代码 (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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="main-nav">
        <div class="container">
            <a href="index.html" class="logo">
                <i class="fas fa-utensils"></i> 舌尖美味
            </a>
            <ul class="nav-links">
                <li><a href="index.html">首页</a></li>
                <li><a href="recipes.html">食谱大全</a></li>
                <li><a href="about.html">关于我们</a></li>
            </ul>
        </div>
    </nav>
    <!-- 主要内容区 -->
    <header class="hero">
        <div class="hero-content">
            <h1>探索世界各地的美味佳肴</h1>
            <p>从家常小炒到异国大餐，我们为你准备了最详细的食谱。</p>
            <a href="recipes.html" class="btn">开始探索</a>
        </div>
    </header>
    <section class="featured-recipes py-4">
        <div class="container">
            <h2 class="section-title">精选食谱</h2>
            <div class="recipes-grid">
                <div class="recipe-card">
                    <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ca4b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="麻婆豆腐">
                    <div class="recipe-info">
                        <h3>经典麻婆豆腐</h3>
                        <p>麻辣鲜香，下饭神器，学会这道菜，让你秒变厨房达人。</p>
                        <a href="recipe-detail.html" class="btn">查看食谱</a>
                    </div>
                </div>
                <div class="recipe-card">
                    <img src="https://images.unsplash.com/photo-1586190848861-99aa4a171e90?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="意大利面">
                    <div class="recipe-info">
                        <h3>奶油蘑菇意面</h3>
                        <p>浓郁奶香，口感顺滑，简单易做的西式料理，周末首选。</p>
                        <a href="recipe-detail.html" class="btn">查看食谱</a>
                    </div>
                </div>
                <div class="recipe-card">
                    <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ca4b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="日式咖喱">
                    <div class="recipe-info">
                        <h3>日式咖喱猪排饭</h3>
                        <p>甜咸适口，暖心暖胃，日式家庭料理的代表作。</p>
                        <a href="recipe-detail.html" class="btn">查看食谱</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="categories py-4 bg-light">
        <div class="container">
            <h2 class="section-title">美食分类</h2>
            <div class="categories-grid">
                <a href="#" class="category-card">
                    <i class="fas fa-pizza-slice fa-3x"></i>
                    <h3>中式菜肴</h3>
                </a>
                <a href="#" class="category-card">
                    <i class="fas fa-hamburger fa-3x"></i>
                    <h3>西式简餐</h3>
                </a>
                <a href="#" class="category-card">
                    <i class="fas fa-fish fa-3x"></i>
                    <h3>日韩料理</h3>
                </a>
                <a href="#" class="category-card">
                    <i class="fas fa-ice-cream fa-3x"></i>
                    <h3>烘焙甜点</h3>
                </a>
            </div>
        </div>
    </section>
    <!-- 页脚 -->
    <footer class="main-footer">
        <div class="container">
            <p>&copy; 2025 舌尖上的美味. All Rights Reserved.</p>
        </div>
    </footer>
</body>
</html>

CSS 补充 (css/style.css)

/* 在 style.css 末尾添加以下内容 */
/* Hero Section (首页大图区域) */
.hero {
    height: 80vh;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1565299624946-b28f40a0ca4b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80') 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;
}
/* Section 通用样式 */
.py-4 { padding-top: 4rem; padding-bottom: 4rem; }
.section-title {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--dark-color);
}
/* 精选食谱卡片 */
.recipes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}
.recipe-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;
}
.recipe-card:hover {
    transform: translateY(-10px);
}
.recipe-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.recipe-info {
    padding: 1.5rem;
}
.recipe-info h3 {
    margin-bottom: 0.5rem;
}
.recipe-info p {
    color: #666;
    margin-bottom: 1rem;
}
/* 分类卡片 */
.bg-light { background-color: var(--light-color); }
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    text-align: center;
}
.category-card {
    background: var(--white-color);
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    color: var(--dark-color);
    transition: background-color 0.3s ease;
}
.category-card:hover {
    background: var(--primary-color);
    color: var(--white-color);
}
.category-card i {
    margin-bottom: 1rem;
}

食谱列表页 (`recipes.html`)

这个页面展示所有食谱,方便用户浏览。

HTML 代码 (recipes.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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- 导航栏 (与首页相同) -->
    <nav class="main-nav">
        <div class="container">
            <a href="index.html" class="logo">
                <i class="fas fa-utensils"></i> 舌尖美味
            </a>
            <ul class="nav-links">
                <li><a href="index.html">首页</a></li>
                <li><a href="recipes.html">食谱大全</a></li>
                <li><a href="about.html">关于我们</a></li>
            </ul>
        </div>
    </nav>
    <main class="container py-4">
        <h1 class="section-title">所有食谱</h1>
        <div class="recipes-grid">
            <!-- 食谱卡片 1 -->
            <div class="recipe-card">
                <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ca4b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="麻婆豆腐">
                <div class="recipe-info">
                    <h3>经典麻婆豆腐</h3>
                    <p>麻辣鲜香，下饭神器，学会这道菜，让你秒变厨房达人。</p>
                    <a href="recipe-detail.html" class="btn">查看食谱</a>
                </div>
            </div>
            <!-- 食谱卡片 2 -->
            <div class="recipe-card">
                <img src="https://images.unsplash.com/photo-1586190848861-99aa4a171e90?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="意大利面">
                <div class="recipe-info">
                    <h3>奶油蘑菇意面</h3>
                    <p>浓郁奶香，口感顺滑，简单易做的西式料理，周末首选。</p>
                    <a href="recipe-detail.html" class="btn">查看食谱</a>
                </div>
            </div>
            <!-- 食谱卡片 3 -->
            <div class="recipe-card">
                <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ca4b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="日式咖喱">
                <div class="recipe-info">
                    <h3>日式咖喱猪排饭</h3>
                    <p>甜咸适口，暖心暖胃，日式家庭料理的代表作。</p>
                    <a href="recipe-detail.html" class="btn">查看食谱</a>
                </div>
            </div>
            <!-- 可以添加更多卡片... -->
        </div>
    </main>
    <!-- 页脚 (与首页相同) -->
    <footer class="main-footer">
        <div class="container">
            <p>&copy; 2025 舌尖上的美味. All Rights Reserved.</p>
        </div>
    </footer>
</body>
</html>

这个页面的HTML结构和首页的食谱部分非常相似,只是去掉了Hero和分类区域。

食谱详情页 (`recipe-detail.html`)

这是展示单个食谱核心内容的页面。

HTML 代码 (recipe-detail.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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- 导航栏 (与首页相同) -->
    <nav class="main-nav">
        <div class="container">
            <a href="index.html" class="logo">
                <i class="fas fa-utensils"></i> 舌尖美味
            </a>
            <ul class="nav-links">
                <li><a href="index.html">首页</a></li>
                <li><a href="recipes.html">食谱大全</a></li>
                <li><a href="about.html">关于我们</a></li>
            </ul>
        </div>
    </nav>
    <main class="container py-4">
        <div class="recipe-detail">
            <div class="recipe-header">
                <h1>经典麻婆豆腐</h1>
                <div class="recipe-meta">
                    <span><i class="far fa-clock"></i> 准备时间: 15分钟</span>
                    <span><i class="far fa-clock"></i> 烹饪时间: 10分钟</span>
                    <span><i class="fas fa-signal"></i> 难度: 简单</span>
                </div>
            </div>
            <div class="recipe-content">
                <div class="recipe-image">
                    <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ca4b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="麻婆豆腐成品图">
                </div>
                <div class="recipe-description">
                    <h2>简介</h2>
                    <p>麻婆豆腐是四川省传统名菜之一，属于川菜，主要原料为配料和豆腐，材料主要有豆腐、牛肉末（也可以用猪肉）、辣椒和花椒等，麻来自花椒，辣来自辣椒，这道菜突出了川菜“麻辣”的特点。</p>
                </div>
                <div class="recipe-ingredients">
                    <h2>所需食材</h2>
                    <ul>
                        <li>嫩豆腐: 1块 (约400克)</li>
                        <li>猪肉末: 100克</li>
                        <li>郫县豆瓣酱: 1大勺</li>
                        <li>花椒粉: 1/2 小勺</li>
                        <li>辣椒粉: 1/2 小勺 (可选)</li>
                        <li>蒜: 3瓣，切末</li>
                        <li>姜: 1小块，切末</li>
                        <li>葱: 2根，切花</li>
                        <li>生抽: 1大勺</li>
                        <li>料酒: 1大勺</li>
                        <li>水淀粉: 适量</li>
                        <li>食用油: 适量</li>
                    </ul>
                </div>
                <div class="recipe-steps">
                    <h2>制作步骤</h2>
                    <ol>
                        <li><strong>准备食材：</strong>将豆腐切成2厘米见方的小块，用盐水浸泡5分钟备用，猪肉末用少许料酒和生抽腌制10分钟。</li>
                        <li><strong>炒制肉末：</strong>锅中倒油烧热，放入肉末炒散，炒至变色后盛出备用。</li>
                        <li><strong>炒香调料：</strong>锅中留底油，放入蒜末、姜末、郫县豆瓣酱，用小火炒出红油和香味。</li>
                        <li><strong>煮豆腐：</strong>加入适量清水（或高汤），放入豆腐块，轻轻推散，避免弄碎豆腐，加入生抽调味。</li>
                        <li><strong>勾芡：</strong>煮开后，用水淀粉勾芡，使汤汁变得浓稠。</li>
                        <li><strong>出锅：</strong>撒上花椒粉、辣椒粉和葱花，再淋上少许热油激发出香味即可出锅。</li>
                    </ol>
                </div>
            </div>
        </div>
    </main>
    <!-- 页脚 (与首页相同) -->
    <footer class="main-footer">
        <div class="container">
            <p>&copy; 2025 舌尖上的美味. All Rights Reserved.</p>
        </div>
    </footer>
</body>
</html>

CSS 补充 (css/style.css)

/* 在 style.css 末尾添加以下内容 */
/* 食谱详情页样式 */
.recipe-detail {
    max-width: 800px;
    margin: 0 auto;
    background: var(--white-color);
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.recipe-header h1 {
    text-align: center;
    margin-bottom: 1rem;
    color: var(--primary-color);
}
.recipe-meta {
    text-align: center;
    color: #666;
    margin-bottom: 2rem;
}
.recipe-meta span {
    margin: 0 1rem;
}
.recipe-content img {
    width: 100%;
    max-width: 600px;
    display: block;
    margin: 2rem auto;
    border-radius: 8px;
}
.recipe-description, .recipe-ingredients, .recipe-steps {
    margin-bottom: 2rem;
}
.recipe-ingredients ul, .recipe-steps ol {
    padding-left: 20px;
}
.recipe-ingredients li, .recipe-steps li {
    margin-bottom: 0.5rem;
}

关于我们页 (`about.html`)

简单介绍网站。

HTML 代码 (about.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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- 导航栏 (与首页相同) -->
    <nav class="main-nav">
        <div class="container">
            <a href="index.html" class="logo">
                <i class="fas fa-utensils"></i> 舌尖美味
            </a>
            <ul class="nav-links">
                <li><a href="index.html">首页</a></li>
                <li><a href="recipes.html">食谱大全</a></li>
                <li><a href="about.html">关于我们</a></li>
            </ul>
        </div>
    </nav>
    <main class="container py-4">
        <div class="about-content">
            <h1 class="section-title">关于我们</h1>
            <p>欢迎来到“舌尖上的美味”！我们是一群热爱生活、热爱美食的伙伴。</p>
            <p>我们相信，美食不仅仅是味蕾的享受，更是文化的传承和情感的连接，我们致力于收集和分享来自世界各地的优质食谱，用最简单易懂的方式，让你在家也能轻松复刻餐厅级别的美味。</p>
            <p>无论你是厨房新手，还是经验丰富的烹饪高手，在这里你都能找到属于自己的灵感，希望我们的网站能点亮你的厨房，温暖你的餐桌。</p>
            <p>感谢你的访问，祝你用餐愉快！</p>
        </div>
    </main>
    <!-- 页脚 (与首页相同) -->
    <footer class="main-footer">
        <div class="container">
            <p>&copy; 2025 舌尖上的美味. All Rights Reserved.</p>
        </div>
    </footer>
</body>
</html>

这个页面的样式可以直接使用 body 和 .container 的通用样式，无需额外CSS。

如何使用这些代码

创建文件夹：在你的电脑上创建一个名为 my-food-website 的文件夹。
创建子文件夹：在 my-food-website 文件夹内，分别创建 css 和 images 文件夹。
保存HTML文件：将上面提供的四个HTML代码分别复制并保存到 my-food-website 文件夹下，文件名分别为 index.html, recipes.html, recipe-detail.html, about.html。
保存CSS文件：将所有CSS代码合并，保存为 style.css 文件，并放入 css 文件夹中。
准备图片：
- 从 Unsplash 或其他免费图库下载几张美食图片。
- 将它们重命名为 logo.png, hero-bg.jpg 等，并放入 images 文件夹。
- 重要：记得修改HTML文件中 src 属性的图片路径，确保它们指向你下载的图片，将 src="https://images.unsplash.com/..." 改为 src="images/your-image-name.jpg"。
预览网站：
- 找到你创建的 my-food-website 文件夹。
- 用鼠标右键点击 index.html 文件，选择“用 Chrome 打开”或你使用的其他浏览器。
- 你应该能看到一个完整的美食网站了！你可以点击导航栏上的链接在不同页面之间跳转。

下一步可以做什么？

这个静态网站已经非常完整了,如果你想进一步学习和提升，可以尝试：

响应式设计：使用 CSS媒体查询，让网站在手机和平板上也能完美显示。
添加交互效果：使用 JavaScript 实现一个点击展开的移动端导航菜单。
美化表单：添加一个“联系我们”或“订阅我们”的表单页面。
SEO优化：为每个页面添加 <meta description> 和 <meta keywords>，帮助搜索引擎更好地理解你的网站内容。

希望这个详细的教程能帮助你成功制作出属于自己的美食网站！祝你玩得开心！

美食网站HTML静态网页如何制作？

网站规划

技术栈

页面设计与实现

通用元素 (所有页面都会用到)

首页 (index.html)

食谱列表页 (recipes.html)

食谱详情页 (recipe-detail.html)

关于我们页 (about.html)

如何使用这些代码

下一步可以做什么？

首页 (`index.html`)

食谱列表页 (`recipes.html`)

食谱详情页 (`recipe-detail.html`)

关于我们页 (`about.html`)