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

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

news 2025/11/11 23:39:43

一、作品介绍

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>

六、获取代码

内附源码，含5个页面。欢迎留言，欢迎关注。

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

一、作品介绍 HTMLCSSJS制作一个中华传统文化主题网站，包含首页、菜系页、食材页、名厨页、美食故事页等5个静态页面。其中每个页面都包含一个导航栏、一个主要区域和一个底部区域。二、页面结构 1. 顶部横幅导航区包含网站Logo、搜索栏、主导航菜单&#xff0…...

编程日记 2025/1/9 16:41:53

黄仁勋CES 2025演讲重点内容

黄仁勋CES 2025演讲重点内容硬件产品发布 GeForce RTX 50系列GPU： 架构与性能提升：正式发布的新一代GeForce RTX 50系列GPU采用英伟达旗舰的Blackwell架构，这是自25年前引入可编程着色技术以来计算机图形领域最重大的创新。该系列显卡在图形…...

编程日记 2025/1/9 16:39:51

TVbox 手机、智能电视节目一网打尽

文章目录一、简要介绍二、优点三、下载地址一、简要介绍 TVbox是目前最火爆的多端、多源的电视影音工具，是一款开源的自定义添加站源的影音工具。TVBox，支持电视频道直播。一款TV端影视工具，软件本身不具有任何影视资源，但可以…...

编程日记 2025/1/9 16:38:50

sys.dm_exec_connections：查询与 SQL Server 实例建立的连接有关的信息以及每个连接的详细信息（客户端ip）

文章目录引言I 基于dm_exec_connections查询客户端ip权限物理联接时间范围dm_exec_connections表see also: 监视SQL Server 内存使用量资源信号灯 DMV sys.dm_exec_query_resource_semaphores（确定查询执行内存的等待）引言查询历史数据库客户端ip应用场景：安全分析缺乏…...

编程日记 2025/1/9 16:35:46

kubesphere前端源码运行

一、下载源码源码是react，下载地址是 GitHub - kubesphere/console at v3.3.2 然后直接用git下拉就可以了下拉完成后差不多是这样一个目录结构，记得切分支到3.3.2 二、下载依赖 1、node & yurn 想要运行源码首先需要node，使用刚才…...

编程日记 2025/1/9 16:33:41

分布式主键ID生成方式-snowflake雪花算法

这里写自定义目录标题一、业务场景二、技术选型1、UUID方案2、Leaf方案-美团（基于数据库自增id）3、Snowflake雪花算法方案总结一、业务场景大量的业务数据需要保存到数据库中，原来的单库单表的方式扛不住大数据量、高并发，需…...

编程日记 2025/1/9 16:32:36

深入理解感知机(Perceptron)算法

深入理解感知机(Perceptron)算法 1. 引言感知机是神经网络和深度学习的基石，由Frank Rosenblatt在1957年提出。它模拟了生物神经元的基本特征，是一个简单但重要的二分类线性分类器。本文将从数学原理到实际应用，全面介绍感知机算法。 2. 数学基础 2.1 定义感知机是一…...

编程日记 2025/1/9 16:31:31

操作系统——死锁与饥饿

死锁的概念死锁产生的条件前三种条件可能会产生死锁，第四种条件（环路）可能会产生死锁机器检测是否死锁是——检测是否有环路解决死锁以上预防死锁的方法不太实用，低效银行家算法 P2运行完后可用队列就变成了 6 2 3…...

编程日记 2025/1/9 16:28:25

【算法】字符串算法技巧系列

阿华代码，不是逆风，就是我疯你们的点赞收藏是我前进最大的动力！！ 希望本文内容能够帮助到你！！ 目录引入：字符串相关算法技巧 1：字符串转数组 2：子字符串 3&#xff…...

编程日记 2025/1/9 16:23:19

Vue中el-tree结合vuedraggable实现跨组件元素拖拽

实现效果： 左侧el-tree: <template><el-treeclass"filter-tree":data"treeData":props"defaultProps":filter-node-method"filterNode"node-key"id"draggable:allow-drop"allowDrop"node-dr…...

编程日记 2025/1/9 16:22:17

湘潭大学人机交互复习

老师没给题型也没划重点，随便看看复习了什么是人机交互人机交互（Human-Computer Interaction，HCI）是关于设计、评价和实现供人们使用的交互式计算机系统，并围绕相关的主要现象进行研究的学科。人机交互研究内容 …...

编程日记 2025/1/9 16:19:13

基于ADAS 与关键点特征金字塔网络融合的3D LiDAR目标检测原理与算法实现

一、概述 3D LiDAR目标检测是一种在三维空间中识别和定位感兴趣目标的技术。在自动驾驶系统和先进的空间分析中，目标检测方法的不断演进至关重要。3D LiDAR目标检测作为一种变革性的技术，在环境感知方面提供了前所未有的准确性和深度信息. 在这里&…...

编程日记 2025/1/9 16:17:11

Kivy App开发之UX控件DropDown下拉列表

怎样在kivy中实现下拉列表的功能？在kivy中，下拉列表的定位是自动的，即列表展开的位置根据上下方是否有控件自动调整，且可以包含其他控件，如按钮，图片等。在应用中，需要使用base包下的runTouchApp类，用于触发下拉框。 DropDown控件常见的属性如下属性相关说明auto_…...

编程日记 2025/1/9 16:16:08

机器学习模型评估指标

模型的评估指标是衡量一个模型应用于对应任务的契合程度，常见的指标有： 准确率（Accuracy）: 正确预测的样本数占总样本数的比例。适用于类别分布均衡的数据集。精确率（Precision）: 在所有被预测为正类的样…...

编程日记 2025/1/9 16:15:06

C# 特性

总目录 C# 语法总目录 C# 特性特性1. 特性类自定义格式2. 特性的位置参数和命名参数3. 特性的目标4. 指定多个特性5. 调用者信息特性特性 1. 特性类自定义格式自定义特性类需要继承自Attribute类，特性使用通常都会省略名字后面的Attribute，会自动识…...

编程日记 2025/1/9 16:11:00

Reactor测试框架之StepVerifier

Reactor测试框架之StepVerifier 测试步骤1、创建StepVerifier实例2、添加断言3、执行验证代码实例在响应式编程中，Reactor框架提供了StepVerifier测试类，用于对响应式序列进行断言和验证。StepVerifier主要用于对Publisher发出的元素序列进行逐步的、精…...

编程日记 2025/1/9 16:08:57

k8s helm部署kafka集群(KRaft模式)——筑梦之路

添加helm仓库 helm repo add bitnami "https://helm-charts.itboon.top/bitnami" --force-update helm repo add grafana "https://helm-charts.itboon.top/grafana" --force-update helm repo add prometheus-community "https://helm-charts.itboo…...

编程日记 2025/1/9 16:07:56

unity action委托举例

using System; using UnityEngine; public class DelegateExample : MonoBehaviour { void Start() { // 创建委托实例并添加方法 Action myAction Method1; myAction Method2; myAction Method3; // 调用委托，会依次执…...

编程日记 2025/1/9 16:06:54

conda 批量安装requirements.txt文件

conda 批量安装requirements.txt文件中包含的组件依赖 conda install --yes --file requirements.txt #这种执行方式，一遇到安装不上就整体停止不会继续下面的包安装。下面这条命令能解决上面出现的不执行后续包的问题，需要在CMD窗口执行： 点…...

编程日记 2025/1/9 16:05:53

Flutter：封装一个自用的bottom_picker选择器

效果图：单列选择器使用bottom_picker: ^2.9.0实现，单列选择器，官方文档 pubspec.yaml # 底部选择 bottom_picker: ^2.9.0picker_utils.dart AppTheme：自定义的颜色 TextWidget.body Text() <Widget>[].toRow Row()下边代…...

编程日记 2025/1/9 16:00:47

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器在Ubuntu上，你可以使用apt包管理器来安装NFS服务器。打开终端并运行： sudo apt update sudo apt install nfs-kernel-server创建共享目录创建一个目录用于共享，例如/shared： sudo mkdir /shared sud…...

编程新知 2025/8/27 13:05:41

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis？2.为什么要使用redis作为mysql的缓存？3.什么是缓存雪崩、缓存穿透、缓存击穿？3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2025/11/7 13:08:40

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案，允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。概念解析 Module Federation (模块联邦) Modul…...

编程新知 2025/11/8 7:49:49

稳定币的深度剖析与展望

一、引言在当今数字化浪潮席卷全球的时代，加密货币作为一种新兴的金融现象，正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而，加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下，稳定…...

编程新知 2025/10/24 12:31:26

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer （1）资源论文&a…...

编程新知 2025/11/7 21:04:37

Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习）

Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习） 一、Aspose.PDF 简介二、说明（⚠️仅供学习与研究使用）三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置五、字节码修改实现代码&#…...

编程新知 2025/11/7 21:04:59

【Linux】Linux 系统默认的目录及作用说明

博主介绍：✌全网粉丝23W，CSDN博客专家、Java领域优质创作者，掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围：SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

编程新知 2025/11/9 14:32:40