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.想要获取本文源码,点击前往吧

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/571969.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

实名羡慕!这些人已经用上了Sora

ChatGPT狂飙160天&#xff0c;世界已经不是之前的样子。 新建了人工智能中文站https://ai.weoknow.com 每天给大家更新可用的国内可用chatGPT资源 发布在https://it.weoknow.com 更多资源欢迎关注 Sora 第三方口碑出炉&#xff0c;或许带给艺术家们最大的好处是&#xff1a;…

KingSCADA|如何实现文本显示设备的实时通讯状态?

哈喽,你好啊,我是雷工! 在SCADA项目中,有些要求在界面上实时显示SCADA系统与设备的实时通讯状态,来及时了解PLC或其他设备与SCADA系统的通讯状态是否正常,以及简单的通讯异常分析,在KingSCADA中该如何实现通讯状态的文本显示呢? 接下来用简单的样例介绍KingSCADA如何实…

学成在线项目学习

技术栈 学成在线服务端基于Spring Boot构建&#xff0c;采用Spring Cloud微服务框架。 持久层&#xff1a;MySQL、MongoDB、Redis、ElasticSearch 数据访问层&#xff1a;使用Spring Data JPA 、Mybatis、Spring Data Mongodb等 业务层&#xff1a;Spring IOC、Aop事务控制、S…

3D软件坐标系速查

本文介绍不同3D软件的世界坐标系之间的差异及其工作原理。 基本上&#xff0c;游戏引擎和3D软件包最重要的问题是根据软件的坐标轴系统创建资产&#xff0c;正确缩放它们并根据要完成的工作设置枢轴系统。 坐标系正确性的定义可能会根据模型导入的游戏引擎或 3D 软件而变化。…

【C语言】linux内核pci_set_drvdata函数

一、讲解 该函数pci_set_drvdata是Linux内核中用于PCI设备的一个辅助函数&#xff0c;其主要作用是设置给定PCI设备的驱动程序私有数据。这个函数的参数包括一个指向pci_dev结构体的指针pdev&#xff0c;该结构体描述了一个PCI设备&#xff0c;以及一个void *类型的指针data&a…

鸿蒙OS实例:同步获取应用配置的【versionCode和versionName】

1.同步方式获取 首先需要导包&#xff1a; import bundleManager from ohos.bundle.bundleManager 工具类&#xff1a; public static async getVersionName(): Promise<string> {try {let bundleInfo await bundleManager.getBundleInfoForSelf(bundleManager.Bundle…

面试经典150题【111-120】

文章目录 面试经典150题【111-120】67.二进制求和190.颠倒二进制位191.位1的个数136.只出现一次的数字137.只出现一次的数字II201.数字范围按位与5.最长回文子串97.交错字符串72.编辑距离221.最大正方形 面试经典150题【111-120】 六道位运算&#xff0c;四道二维dp 67.二进制…

Profinet转ModbusTCP:从站设备转换与集成案例

本案例旨在探讨如何将Modbus TCP设备数据成功地接入到西门子PROFINET网络中。为了实 现这一目标&#xff0c;我们将使用西门子S7-1200型PLC以及耐特森Profinet转ModbusTCP网关作为 关键设备。为了模拟Modbus从站&#xff0c;我们将使用电脑安装modbus poll软件。首先需要了解Pr…

VLAN的原理及配置

文章目录 一、VLAN的概述1、VLAN的概念2、VLAN的优势 二、静态VLAN三、静态VLAN的配置1.VLAN的范围2.VLAN基本配置 四、Trunk和access的作用参考 一、VLAN的概述 1、VLAN的概念 VLAN就是将网络从逻辑上划分为若按个小的网络&#xff0c;也就是虚拟局域网。 2、VLAN的优势 使…

逐步学习Go-并发通道chan(channel)

概述 Go的Routines并发模型是基于CSP&#xff0c;如果你看过七周七并发&#xff0c;那么你应该了解。 什么是CSP&#xff1f; "Communicating Sequential Processes"&#xff08;CSP&#xff09;这个词组的含义来自其英文直译以及在计算机科学中的使用环境。 CSP…

今日AI热点:科技前沿新动态

引言&#xff1a; 人工智能领域日新月异&#xff0c;每天都有令人振奋的新进展。从苹果到谷歌&#xff0c;从OpenAI到Meta&#xff0c;各大科技巨头纷纷推出创新产品和技术&#xff0c;不断推动着人工智能的发展。让我们一起来看看今日AI热点&#xff0c;探索这个充满活力和激情…

软件测试技术之登录页面测试用例的设计方法

相信大家都有过写登录测试用例的经验&#xff0c;相较于开发人员编写代码而言&#xff0c;测试人员编写用例同样重要。本文作者总结了一些关于登录用例的经验。 一、功能测试用例设计&#xff1a; 1、正常登录场景 测试用例1&#xff1a;输入正确的用户名和密码&#xff0c;验证…