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

HTML静态网页成品作业(HTML+CSS+JS)——中华美食八大菜系介绍(1个页面)

🎉不定期分享源码,关注不丢失哦

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • HTML部分代码
  • 五、源码获取


一、作品介绍

🏷️本套采用HTML+CSS,使用Javacsript代码实现图片轮播切换,共有1个页面

二、作品演示

在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码

<div class="header"><div class="logo">中国八大菜系</div></div><div class="banner"><img id="banner_img1" class="banner_img active" src="./img/banner1.jpg" alt=""><img id="banner_img2" class="banner_img" src="./img/banner2.jpg" alt=""><img id="banner_img3" class="banner_img" src="./img/banner3.jpg" alt=""></div><div class="caixi_list"><div class="caixi_item"><div class="caixi_img"><img src="./img/caxi1.jpg" alt=""></div><div class="caixi_info"><div class="caixi_name">徽菜</div><div class="caixi_jieshao">徽菜,它起源于黄山麓下的歙县(古徽州)。后来,由于新安江畔的屯溪小镇成为“祁红”、“屯绿”等名茶和徽墨、歙砚等土特产品的集散中心,商业兴起,饮食业发达,徽菜也随之转移到了屯溪,并得到了进一步发展。徽菜以烹制山珍野味而著称。</div></div></div><div class="caixi_item"><div class="caixi_img"><img src="./img/caxi2.jpg" alt=""></div><div class="caixi_info"><div class="caixi_name">鲁菜</div><div class="caixi_jieshao">2500年前山东的儒家学派奠定了中国饮食注重精细、中和、健康的审美取向;北魏末年《齐民要术》(成书时间为约公元533544年)总结的黄河中下游地区的“蒸、煮、烤、酿、煎、炒、熬、烹、炸、腊、盐、豉、醋、酱、酒、蜜、椒”奠定了中式烹调技法的框架;明清时期大量山东厨师和菜品进入宫廷,使鲁菜雍容华贵、中正大气、平和养生的风格特点进一步得到升华。</div></div></div><div class="caixi_item"><div class="caixi_img"><img src="./img/caxi3.jpg" alt=""></div><div class="caixi_info"><div class="caixi_name">闽菜</div><div class="caixi_jieshao">闽菜是中国八大菜系之一,闽南菜是它的重要组成部分,它涵盖了福建泉州、厦门、漳州“闽南地区的菜肴,和台湾以及东南亚地区的菜肴有重要的渊源关系。闽南菜清鲜香脆,注重调汤估料,口味清淡,酸甜适宜,中西合璧,变化无穷,它的烹调技法多样,有炸、炒、煮、炖、焖、煎、卤、淋、蒸等。</div></div></div><div class="caixi_item"><div class="caixi_img"><img src="./img/caxi4.jpg" alt=""></div><div class="caixi_info"><div class="caixi_name">湘菜</div><div class="caixi_jieshao">湘菜,又叫湖南菜,是中国历史悠久的汉族八大菜系之一 [1]  ,早在汉朝就已经形成菜系。以湘江流域、洞庭湖区和湘西山区三种地方风味为主。 [1] 湘菜制作精细,用料上比较广泛,口味多变,品种繁多;色泽上油重色浓,讲求实惠;品味上注重香辣、香鲜、软嫩;制法上以煨、炖、腊、蒸、炒诸法见称。</div></div></div><div class="caixi_item"><div class="caixi_img"><img src="./img/caxi5.jpg" alt=""></div><div class="caixi_info"><div class="caixi_name">川菜</div><div class="caixi_jieshao">川菜是中国汉族传统的四大菜系之一、中国八大菜系之一。川菜有着本土川菜与海派川菜之分,本土川菜中,四川菜系又包括川味菜肴、面点小吃、火锅等。川菜以取材广泛,调味多变,菜式多样,口味清鲜,醇浓并重,以善用麻辣调味著称,并以别具一格的烹调方法和浓郁的地方风味闻名,融会了东南西北各方的特点,博采众家之长,善于吸收和创新。</div></div></div><div class="caixi_item"><div class="caixi_img"><img src="./img/caxi6.jpg" alt=""></div><div class="caixi_info"><div class="caixi_name">江苏菜</div><div class="caixi_jieshao">江苏菜,中国汉族八大菜系之一 ,简称苏菜。由于苏菜和浙菜相近,因此和浙菜统称江浙菜系。主要以金陵菜、淮扬菜、苏锡菜、徐海菜等地方菜组成。江苏菜起源于二千多年前,其中金陵菜起源于先秦时期,当时吴人善制炙鱼、蒸鱼和鱼片,一千多年前,鸭已为南京美食。</div></div></div><div class="caixi_item"><div class="caixi_img"><img src="./img/caxi7.jpg" alt=""></div><div class="caixi_info"><div class="caixi_name">粤菜</div><div class="caixi_jieshao">粤菜即广东菜,是中国四大菜系、八大菜系之一。狭义上的粤菜指广府菜(即广州府菜),广义上又包含潮州菜(潮汕菜)、东江菜(也称客家菜)。粤菜源自中原,传承了孔子所倡导的“食不厌精,脍不厌细”的中原饮食风格  ,因此粤菜做法比较复杂、精细,如广府菜中的煲仔饭、烤乳猪源自周代“八珍”美食;烧鹅源自宋朝名菜烤鸭;点心从中原传到广东后演变出虾饺、干蒸烧卖等广式点心。</div></div></div><div class="caixi_item"><div class="caixi_img"><img src="./img/caxi8.jpg" alt=""></div><div class="caixi_info"><div class="caixi_name">浙江菜</div><div class="caixi_jieshao">浙江菜,简称浙菜,是中国汉族八大菜系之一 ,其地山清水秀,物产丰富,故谚曰:“上有天堂,下有苏杭”。浙江省位于我国东海之滨,北部水道成网,素有鱼米之乡之称。西南丘陵起伏,盛产山珍野味。东部沿海渔场密布,水产资源丰富,有经济鱼类和贝壳水产品500余种,总产值居全国之首,物产丰富,佳肴自美,特色独具,有口皆碑。</div></div></div></div>

五、源码获取

🥇 ~ 关注我,点赞博文~ 每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
💙2.想要获取本文源码,点击前往吧

相关文章:

HTML静态网页成品作业(HTML+CSS+JS)——中华美食八大菜系介绍(1个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;使用Javacsript代码实现图片轮播切换&#xff0c;共有1个页面。 二、…...

PostgreSQL11 | Windows系统安装PostgreSQL

本教程选取与参考书籍《PostgreSql11 从入门到精通》&#xff08;清华大学出版社&#xff09;的11大版本最新小版本11.22的安装作为教程案例 下载 下载PostgreSQL installer 下载到本地 安装 运行安装引导器 中国地区语言选项&#xff08;暂时&#xff09; Chinese(Simplifie…...

uniapp保留两位小数,整数后面加.00

直接把方法粘贴进去就能用 <text class"bold">总收入&#xffe5;{{formater(priceNumer)}}</text>export default {data() {priceNumer: 199.999, // 总收入},methods: {// 保留两位小数formater(data) {if(!data) return 0.00data parseFloat(data).…...

R: 网状Meta分析进行模型构建及图形绘制

网状meta分析的制作步骤主要包括&#xff1a; 1. 绘制网状证据图 2. 普通Meta分析&#xff08;两两之间的直接比较&#xff09; 3. 网状Meta分析&#xff08;整合直接比较和间接比较的结果&#xff0c;绘制相关图形&#xff09; 4. 绘制累积概率排序图 5. 三个假设的检验…...

数据结构——排序算法

1、排序的概念 排序是指的是将一组数据&#xff08;如数字、单词、记录等&#xff09;按照某种特定的顺序&#xff08;升序或降序&#xff09;进行排列的过程。排序算法是实现排序的程序或方法&#xff0c;它们在软件开发和数据处理中扮演着至关重要的角色。 排序算法可以根据…...

MyBatis的高级特性探索

MyBatis 是一个流行的Java持久层框架&#xff0c;它提供了简单和直观的方法来处理数据库操作。相比于传统的JDBC操作&#xff0c;MyBatis通过XML或注解方式映射Java对象与数据库之间的关系&#xff0c;极大地简化了数据库编程工作。除了基本的数据映射和SQL语句执行功能&#x…...

未来制造:机器人行业新质生产力提升策略

机器人行业新质生产力提升咨询方案 一、机器人行业目前发展现状及特点&#xff1a; 创新活跃、应用广泛、成长性强。 二、机器人企业发展新质生产力面临的痛点&#xff1a; 1、高端人才匮乏 2、核心技术受限 3、竞争日益国际化 4、成本控制挑战 5、用户体验提升需求 三…...

开发过程中PostgreSQL常用的SQL语句,持续更新ing

修改字段类型 -- ALTER TABLE 模式名.表明 ALTER COLUMN 字段名 TYPE 类型; alter table alarm.alarm_produce_config alter column alarm_level type int4;重置序列值 -- ALTER SEQUENCE 序列名 RESTART WITH 序列值; alter sequence enterprise_type_id_seq restart with 1…...

Linux screen命令教程:如何在一个终端窗口中管理多个会话(附实例详解和注意事项)

Linux screen命令介绍 screen是一个全屏窗口管理器&#xff0c;它将物理终端抽象为多个虚拟终端&#xff0c;每个虚拟终端都可以运行一个shell或程序。screen命令可以让你在一个终端窗口中打开多个会话&#xff0c;每个会话都有自己的环境&#xff0c;可以独立运行命令。这对于…...

Android中的本地广播与全局广播

文章目录 1. 概念介绍2. 本地广播3. 全局广播 1. 概念介绍 前文我们介绍了Android中的广播&#xff0c;按注册方式分为静态广播和动态广播&#xff1b;按接收顺序分为有序广播与无序广播 本文我们按照广播的传播范围&#xff0c;将广播分为本地广播和全局广播 本地广播&#x…...

Debezium日常分享系列之:Debezium2.5稳定版本之MySQL连接器配置示例和Connector参数详解

Debezium日常分享系列之&#xff1a;Debezium2.5稳定版本之MySQL连接器配置示例和Connector参数详解 一、MySQL 连接器配置示例二、添加连接器配置三、连接器属性四、必须的连接器配置属性五、高级 MySQL 连接器配置属性六、Debezium 连接器数据库架构历史配置属性七、用于配置…...

vue3父组件给子组件传值,并在子组件接受

1、在父组件中定义数据&#xff1a; 在父组件中定义需要传递给子组件的数据。 <template><div><ChildComponent :message"parentMessage" /></div> </template><script> import { defineComponent } from vue; import ChildCom…...

Python爬虫如何快速入门

写了几篇网络爬虫的博文后&#xff0c;有网友留言问Python爬虫如何入门&#xff1f;今天就来了解一下什么是爬虫&#xff0c;如何快速的上手Python爬虫。 一、什么是网络爬虫 网络爬虫&#xff0c;英文名称为Web Crawler或Spider&#xff0c;是一种通过程序在互联网上自动获取…...

酷开科技依托酷开系统用“平台+产品+场景”塑造全屋智能生活!

杰弗里摩尔的“鸿沟理论”中写道&#xff1a;高科技企业推进产品的早期市场和产品被广泛接受的主流市场之间&#xff0c;存在着一条巨大的“鸿沟”。“鸿沟”&#xff0c;指产品吸引早期接纳者后、赢得更多客户前的那段间歇&#xff0c;以及其中可预知和不可预知的阻碍。多数产…...

P8649 [蓝桥杯 2017 省 B] k 倍区间:做题笔记

目录 思路 代码思路 代码 推荐 P8649 [蓝桥杯 2017 省 B] k 倍区间 思路 额嗯&#xff0c;这道题我刚上来是想到了前缀和&#xff0c;但是还要判断每个子序列&#xff0c;我就两层for嵌套&#xff0c;暴力解了题。就是我知道暴力肯定过不了但是写不出来其他的[留下了苦…...

LeetCode题练习与总结:旋转图像

一、题目描述 给定一个 n n 的二维矩阵 matrix 表示一个图像。请你将图像顺时针旋转 90 度。 你必须在 原地 旋转图像&#xff0c;这意味着你需要直接修改输入的二维矩阵。请不要 使用另一个矩阵来旋转图像。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,2,3],[4,5,6],…...

如何在家中使用手机平板电脑 公司iStoreOS软路由实现远程桌面

文章目录 简介一、配置远程桌面公网地址二、家中使用永久固定地址 访问公司电脑**具体操作方法是&#xff1a;** 简介 软路由是PC的硬件加上路由系统来实现路由器的功能&#xff0c;也可以说是使用软件达成路由功能的路由器。 使用软路由控制局域网内计算机的好处&#xff1a…...

【文献分享】myMUSCLE, a New Multiphysics, Multiscale Simulation Coupling Environment

题目&#xff1a;myMUSCLE, a New Multiphysics, Multiscale Simulation Coupling Environment 链接&#xff1a; https://doi.org/10.1080/00295639.2022.2148809 myMUSCLE&#xff0c;一种新的多物理场、多尺度仿真耦合环境 摘要 计算能力的提高使核界能够结合有关反应…...

2024年云计算使用报告,89%组织用多云,25%广泛使用生成式AI,45%需要跨云数据集成,节省成本是云首要因素

备注&#xff1a;本文来自Flexera2024年的云现状调研报告的翻译。原报告地址&#xff1a; https://info.flexera.com/CM-REPORT-State-of-the-Cloud Flexera是一家专注于做SaaS的IT解决方案公司&#xff0c;有30年发展历史&#xff0c;5万名客户&#xff0c;1300名员工。Flex…...

【Python操作基础】——序列

&#x1f349;CSDN小墨&晓末:https://blog.csdn.net/jd1813346972 个人介绍: 研一&#xff5c;统计学&#xff5c;干货分享          擅长Python、Matlab、R等主流编程软件          累计十余项国家级比赛奖项&#xff0c;参与研究经费10w、40w级横向 文…...

Spring Boot 实现流式响应(兼容 2.7.x)

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

c++ 面试题(1)-----深度优先搜索(DFS)实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

Caliper 负载(Workload)详细解析

Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分,它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构: use strict;/…...

ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]

报错信息&#xff1a;libc.so.6: cannot open shared object file: No such file or directory&#xff1a; #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...

Monorepo架构: Nx Cloud 扩展能力与缓存加速

借助 Nx Cloud 实现项目协同与加速构建 1 &#xff09; 缓存工作原理分析 在了解了本地缓存和远程缓存之后&#xff0c;我们来探究缓存是如何工作的。以计算文件的哈希串为例&#xff0c;若后续运行任务时文件哈希串未变&#xff0c;系统会直接使用对应的输出和制品文件。 2 …...

机器学习的数学基础:线性模型

线性模型 线性模型的基本形式为&#xff1a; f ( x ) ω T x b f\left(\boldsymbol{x}\right)\boldsymbol{\omega}^\text{T}\boldsymbol{x}b f(x)ωTxb 回归问题 利用最小二乘法&#xff0c;得到 ω \boldsymbol{\omega} ω和 b b b的参数估计$ \boldsymbol{\hat{\omega}}…...