当前位置：首页 > news >正文

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

news 2025/7/20 3:10:14

一、作品介绍

HTML+CSS+JS制作一个中华传统文化主题网站，包含首页、菜系页、食材页、名厨页、美食故事页等5个静态页面。其中每个页面都包含一个导航栏、一个主要区域和一个底部区域。

二、页面结构

1. 顶部横幅导航区

包含网站Logo、搜索栏、主导航菜单（首页、菜系分类、美食故事、我的收藏）

2. 大幅轮播展示区

展示精选传统美食图片，突出当季特色菜品和节日美食

3. 八大菜系快速入口

以图标式布局展示川、粤、苏、浙、闽、湘、鲁、徽八大菜系，点击可进入详细分类

4. 美食推荐板块

分为'当季推荐'、'节气美食'、'历史名菜'三个子版块，每个版块以卡片式展示4-6道菜品

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"><h1 class="text-3xl font-['Pacifico'] text-custom">logo</h1><div class="ml-16 hidden space-x-8 md:flex"><a href="./index.html" class="font-bold text-gray-900 hover:text-custom">首页</a><a href="./cuisine.html" class="text-gray-900 hover:text-custom">菜系</a><a href="./ingredients.html" class="text-gray-900 hover:text-custom">食材</a><a href="./chefs.html" class="text-gray-900 hover:text-custom">名厨</a><a href="./food-stories.html" class="text-gray-900 hover:text-custom">美食故事</a></div></div><div class="flex items-center space-x-4"><div class="relative"><input type="text" placeholder="搜索美食..." class="w-64 rounded-full border border-gray-200 py-2 pl-10 pr-4 text-sm focus:border-custom focus:outline-none" /><i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i></div><button class="!rounded-button flex items-center space-x-2 rounded-full bg-custom px-4 py-2 text-white hover:bg-opacity-90"><i class="fa-solid fa-user"></i><span>登录</span></button></div></div></nav></header><main><section class="relative h-[500px] overflow-hidden"><img src="./images/b1.jpg" alt="美食展示" class="h-full w-full object-cover object-center" /><div class="absolute inset-0 bg-black bg-opacity-30"><div class="container mx-auto flex h-full items-center px-6"><div class="max-w-2xl text-white"><h2 class="mb-4 text-5xl font-bold">探索中国传统美食文化</h2><p class="mb-8 text-xl">品味千年传承，感受舌尖上的中国</p><button class="!rounded-button rounded-full bg-custom px-8 py-3 text-lg font-semibold text-white hover:bg-opacity-90">开始探索</button></div></div></div></section><section class="container mx-auto px-6 py-16"><h3 class="mb-12 text-center text-3xl font-bold">经典菜系</h3><div class="grid grid-cols-4 gap-8"><div class="overflow-hidden rounded-lg bg-white shadow-lg"><img src="./images/j1.jpg" alt="川菜" class="h-48 w-full object-cover" /><div class="p-4"><h4 class="mb-2 text-xl font-semibold">川菜</h4><p class="text-gray-600">麻辣鲜香，令人垂涎</p></div></div><div class="overflow-hidden rounded-lg bg-white shadow-lg"><img src="./images/j2.jpg" alt="粤菜" class="h-48 w-full object-cover" /><div class="p-4"><h4 class="mb-2 text-xl font-semibold">粤菜</h4><p class="text-gray-600">清淡鲜美，精致考究</p></div></div><div class="overflow-hidden rounded-lg bg-white shadow-lg"><img src="./images/j3.jpg" alt="淮扬菜" class="h-48 w-full object-cover" /><div class="p-4"><h4 class="mb-2 text-xl font-semibold">淮扬菜</h4><p class="text-gray-600">刀工精湛，清鲜淡雅</p></div></div><div class="overflow-hidden rounded-lg bg-white shadow-lg"><img src="./images/j4.jpg" alt="鲁菜" class="h-48 w-full object-cover" /><div class="p-4"><h4 class="mb-2 text-xl font-semibold">鲁菜</h4><p class="text-gray-600">火候到位，浓香四溢</p></div></div></div></section><section class="bg-white py-16"><div class="container mx-auto px-6"><h3 class="mb-12 text-center text-3xl font-bold">推荐名菜</h3><div class="grid grid-cols-3 gap-8"><div class="overflow-hidden rounded-lg shadow-lg"><img src="./images/t1.jpg" alt="北京烤鸭" class="h-64 w-full object-cover" /><div class="p-6"><h4 class="mb-2 text-xl font-semibold">北京烤鸭</h4><p class="mb-4 text-gray-600">外脆里嫩，果木炭火烤制，搭配特制甜面酱</p><div class="flex items-center justify-between"><span class="text-lg font-bold text-custom">¥268/份</span><button class="!rounded-button rounded-full bg-custom px-4 py-2 text-white hover:bg-opacity-90">立即预订</button></div></div></div><div class="overflow-hidden rounded-lg shadow-lg"><img src="./images/t2.jpg" alt="东坡肉" class="h-64 w-full object-cover" /><div class="p-6"><h4 class="mb-2 text-xl font-semibold">东坡肉</h4><p class="mb-4 text-gray-600">肥而不腻，入口即化，传统杭帮名菜</p><div class="flex items-center justify-between"><span class="text-lg font-bold text-custom">¥158/份</span><button class="!rounded-button rounded-full bg-custom px-4 py-2 text-white hover:bg-opacity-90">立即预订</button></div></div></div><div class="overflow-hidden rounded-lg shadow-lg"><img src="./images/t3.jpg" alt="麻婆豆腐" class="h-64 w-full object-cover" /><div class="p-6"><h4 class="mb-2 text-xl font-semibold">麻婆豆腐</h4><p class="mb-4 text-gray-600">麻辣鲜香，豆腐嫩滑，川菜代表作</p><div class="flex items-center justify-between"><span class="text-lg font-bold text-custom">¥68/份</span><button class="!rounded-button rounded-full bg-custom px-4 py-2 text-white hover:bg-opacity-90">立即预订</button></div></div></div></div></div></section></main><footer class="bg-gray-900 py-12 text-white"><div class="container mx-auto px-6"><div class="grid grid-cols-4 gap-8"><div><h4 class="mb-4 text-lg font-semibold">关于我们</h4><ul class="space-y-2"><li><a href="#" class="hover:text-custom">公司简介</a></li><li><a href="#" class="hover:text-custom">联系方式</a></li><li><a href="#" class="hover:text-custom">加入我们</a></li></ul></div><div><h4 class="mb-4 text-lg font-semibold">美食资讯</h4><ul class="space-y-2"><li><a href="#" class="hover:text-custom">美食百科</a></li><li><a href="#" class="hover:text-custom">烹饪技巧</a></li><li><a href="#" class="hover:text-custom">食材知识</a></li></ul></div><div><h4 class="mb-4 text-lg font-semibold">服务支持</h4><ul class="space-y-2"><li><a href="#" class="hover:text-custom">预订指南</a></li><li><a href="#" class="hover:text-custom">配送说明</a></li><li><a href="#" class="hover:text-custom">售后服务</a></li></ul></div><div><h4 class="mb-4 text-lg font-semibold">关注我们</h4><div class="flex space-x-4"><a href="#" class="hover:text-custom"><i class="fa-brands fa-weixin text-2xl"></i></a><a href="#" class="hover:text-custom"><i class="fa-brands fa-weibo text-2xl"></i></a><a href="#" class="hover:text-custom"><i class="fa-solid fa-envelope text-2xl"></i></a></div></div></div><div class="mt-8 border-t border-gray-800 pt-8 text-center text-sm text-gray-400"><p>© 2024 中国传统美食网. 保留所有权利.</p></div></div></footer></div></body>
</html>