一、作品介绍
HTML+CSS+JS制作一个中华传统文化主题网站，包含首页、菜系页、食材页、名厨页、美食故事页等5个静态页面。其中每个页面都包含一个导航栏、一个主要区域和一个底部区域。
二、页面结构
1. 顶部横幅导航区
包含网站Logo、搜索栏、主导航菜单（首页、菜系分类、美食故事、我的收藏）
2. 大幅轮播展示区
展示精选传统美食图片，突出当季特色菜品和节日美食
3. 八大菜系快速入口
以图标式布局展示川、粤、苏、浙、闽、湘、鲁、徽八大菜系，点击可进入详细分类
4. 美食推荐板块
分为'当季推荐'、'节气美食'、'历史名菜'三个子版块，每个版块以卡片式展示4-6道菜品
5. 美食文化故事区
展示传统美食的历史渊源和文化典故，以图文结合的方式呈现
6. 互动分享区
展示用户分享的美食制作经验和成果展示，包含点赞和评论功能
7. 页脚信息区
包含网站介绍、联系方式、合作伙伴、版权信息等
三、作品演示
四、代码目录
五、首页代码
html
<!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>六、获取代码
内附源码，含5个页面。欢迎留言，欢迎关注。