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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

探索国内ip切换App:打破网络限制

在国内网络环境中&#xff0c;有时我们会遇到一些限制或者屏蔽&#xff0c;使得我们无法自由访问一些网站或服务。而国内IP切换App的出现&#xff0c;为解决这些问题提供了非常便捷的方式。这些App可以帮助用户切换IP地址&#xff0c;让用户可以轻松地访问被限制或屏蔽的网站&a…

超越 GPT-4V 和 Gemini Pro!HyperGAI 发布最新多模态大模型 HPT,已开源

随着AI从有限数据迈向真实世界&#xff0c;极速增长的数据规模不仅赋予了模型令人惊喜的能力&#xff0c;也给多模态模型提供了更多的可能性。OpenAI在发布GPT-4V时就已经明确表示&#xff1a; 将额外模态&#xff08;如图像输入&#xff09;融入大语言模型&#xff08;LLMs&am…

鸿蒙一次开发,多端部署(一)简介

背景 随着终端设备形态日益多样化&#xff0c;分布式技术逐渐打破单一硬件边界&#xff0c;一个应用或服务&#xff0c;可以在不同的硬件设备之间随意调用、互助共享&#xff0c;让用户享受无缝的全场景体验。而作为应用开发者&#xff0c;广泛的设备类型也能为应用带来广大的…

Unity访问安卓(Android)或苹果(iOS)相册

1.下载Native Gallery for Android & iOS插件 2.在场景中添加截图按钮、选择图片按钮、选择视频按钮等 using OpenCVForUnity.CoreModule; using OpenCVForUnity.ImgprocModule; using OpenCVForUnity.UnityUtils; using System.Collections; using System.Collections.Gen…

线段树+暴力区修 P4145 上帝造题的七分钟 2 / 花神游历各国

传送门https://www.luogu.com.cn/problem/P4145 这道题着实想了好久&#xff0c;本来想的是用数学方法找规律&#xff0c;结果写了好久&#xff0c;发现想假了&#xff0c;于是只好看思路&#xff0c;暴力区修&#xff01;原因是被开根号一定次数就会变成1&#xff0c;是有限的…

安卓studio连接手机之后,一两秒之后就自动断开了。问题解决。

太坑了&#xff0c;安卓studio链接手机之后。几秒之后就断开了。我以为是adb的问题&#xff0c;就重新安装了一下adb。并且在环境变量中配置了Path的路径。然而并没有什么用啊。 后来查看是wps的服务和ADB有冲突。直接把WPS卸载掉之后就没有出现链接手机闪现的的问题。

网络通信——IP地址、端口号、协议(TCP、UDP)

通信架构 网络通信三要素 IP地址 IPv4地址 IPv6地址 IP域名 IP常识 端口号 概念 协议 开放式网络互联标准&#xff1a;OSI、TCP/IP 传输层的2个通信协议——UDP、TCP TCP协议&#xff1a;三次握手建立建立可靠连接 进行三次握手的原因&#xff1a;为了确保客户端和服务端…

在基于Android相机预览的CV应用程序中使用 OpenCL

查看&#xff1a;OpenCV系列文章目录&#xff08;持续更新中......&#xff09; 上一篇&#xff1a;OpenCV4.9.0在Android 开发简介 下一篇&#xff1a;在 MacOS 中安装 本指南旨在帮助您在基于 Android 相机预览的 CV 应用程序中使用 OpenCL ™。教程是为 Android Studio 20…

复习斐波那契(用C++写)

或者这样写&#xff1a; 斐波那契数列 题目描述 斐波那契数列是指这样的数列&#xff1a;数列的第一个和第二个数都为 1 1 1&#xff0c;接下来每个数都等于前面 2 2 2 个数之和。 给出一个正整数 a a a&#xff0c;要求斐波那契数列中第 a a a 个数是多少。 输入格式…

霍格沃兹测试开发从人员外包到测试工具、测试平台,提供全方位的测试解决方案~

随着学社的学员越来越多&#xff0c;影响力越来越大&#xff0c;不停有学员和企业问我们&#xff1a;能否提供人员外包服务&#xff1f;与此同时&#xff0c;企业对于外包人员的业务技能要求也越来越高&#xff0c;寻找一个稳定靠谱的供应商也成了很多学员所在公司的需求。对此…

SCI一区 | Matlab实现SSA-TCN-BiGRU-Attention麻雀算法优化时间卷积双向门控循环单元融合注意力机制多变量时间序列预测

SCI一区 | Matlab实现SSA-TCN-BiGRU-Attention麻雀算法优化时间卷积双向门控循环单元融合注意力机制多变量时间序列预测 目录 SCI一区 | Matlab实现SSA-TCN-BiGRU-Attention麻雀算法优化时间卷积双向门控循环单元融合注意力机制多变量时间序列预测预测效果基本介绍模型描述程序…

树莓派夜视摄像头拍摄红外LED灯

NoIR相机是一种特殊类型的红外摄像头&#xff0c;其名称来源于"No Infrared"的缩写。与普通的彩色摄像头不同&#xff0c;NoIR相机具备红外摄影和低光条件下摄影的能力。 一般摄像头能够感知可见光&#xff0c;并用于普通摄影和视频拍摄。而NoIR相机则在设计上去除了…

基于python+vue共享单车信息系统的设计与实现flask-django-php-nodejs

课题主要分为二大模块&#xff1a;即管理员模块和用户模块&#xff0c;主要功能包括&#xff1a;用户、区域、共享单车、单车租赁、租赁归还、报修信息、检修信息等&#xff1b;快速发展的社会中&#xff0c;人们的生活水平都在提高&#xff0c;生活节奏也在逐渐加快。为了节省…

安卓实现翻转时间显示效果

效果 废话不多说上代码 自定义组件 import android.content.Context; import android.content.res.TypedArray; import android.graphics.Camera; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Matrix; import android.graphics.…

谷歌具身智能最新进展:RT-H 机器人通用灵巧抓取

随着 GPT-4 等大型语言模型与机器人研究的结合愈发紧密&#xff0c;人工智能正在越来越多地走向现实世界&#xff0c;因此具身智能相关的研究也正受到越来越多的关注。在众多研究项目中&#xff0c;谷歌的「RT」系列机器人始终走在前沿&#xff08;参见《大模型正在重构机器人&…

实现React组件之间的数据共享:使用React Redux

实现React组件之间的数据共享&#xff1a;使用React Redux 在复杂的React应用中&#xff0c;组件之间的数据共享是必不可少的。为了解决这个问题&#xff0c;可以使用React Redux来管理应用的状态&#xff0c;并实现组件之间的数据共享。在本文中&#xff0c;我们将介绍如何使…

修改网站源码,给电子商城的商品添加图片时商品id为0的原因

修改网站源码&#xff0c;给电子商城的商品添加图片时商品id为0的原因。花了几个小时查找原因。后来&#xff0c;由于PictureControl.class.php是复制CourseControl.class.php而来&#xff0c;于是对比了这两个文件&#xff0c;在CourseControl.class.php找到了不一样的关键几条…

Svg Flow Editor 原生svg流程图编辑器(三)

系列文章 Svg Flow Editor 原生svg流程图编辑器&#xff08;一&#xff09; Svg Flow Editor 原生svg流程图编辑器&#xff08;二&#xff09; Svg Flow Editor 原生svg流程图编辑器&#xff08;三&#xff09; 实现对齐辅助线 在 logicFlow 中&#xff0c;辅助线的实现是通…

SpringCloudGateway之高性能篇

SpringCloudGateway之高性能篇 背景 在公司的开放平台中&#xff0c;为了统一管理对外提供的接口、处理公共逻辑、实现安全防护及流量控制&#xff0c;确实需要一个API网关作为中间层。 场景 统一接入点: API网关作为所有对外服务的单一入口&#xff0c;简化客户端对内部系统…

基于python+vue渔船出海及海货统计系统的设计与实现flask-django-php-nodejs

当今社会已经步入了科学技术进步和经济社会快速发展的新时期&#xff0c;国际信息和学术交流也不断加强&#xff0c;计算机技术对经济社会发展和人民生活改善的影响也日益突出&#xff0c;人类的生存和思考方式也产生了变化。传统渔船出海及海货统计采取了人工的管理方法&#…