当前位置: 首页 > 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级横向 文…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

Vue ③-生命周期 || 脚手架

生命周期 思考&#xff1a;什么时候可以发送初始化渲染请求&#xff1f;&#xff08;越早越好&#xff09; 什么时候可以开始操作dom&#xff1f;&#xff08;至少dom得渲染出来&#xff09; Vue生命周期&#xff1a; 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...

HTML前端开发:JavaScript 获取元素方法详解

作为前端开发者&#xff0c;高效获取 DOM 元素是必备技能。以下是 JS 中核心的获取元素方法&#xff0c;分为两大系列&#xff1a; 一、getElementBy... 系列 传统方法&#xff0c;直接通过 DOM 接口访问&#xff0c;返回动态集合&#xff08;元素变化会实时更新&#xff09;。…...

Vue 3 + WebSocket 实战:公司通知实时推送功能详解

&#x1f4e2; Vue 3 WebSocket 实战&#xff1a;公司通知实时推送功能详解 &#x1f4cc; 收藏 点赞 关注&#xff0c;项目中要用到推送功能时就不怕找不到了&#xff01; 实时通知是企业系统中常见的功能&#xff0c;比如&#xff1a;管理员发布通知后&#xff0c;所有用户…...

2025年- H71-Lc179--39.组合总和(回溯,组合)--Java版

1.题目描述 2.思路 当前的元素可以重复使用。 &#xff08;1&#xff09;确定回溯算法函数的参数和返回值&#xff08;一般是void类型&#xff09; &#xff08;2&#xff09;因为是用递归实现的&#xff0c;所以我们要确定终止条件 &#xff08;3&#xff09;单层搜索逻辑 二…...