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

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.kler.cn/a/288061.html

相关文章:

  • 测试实项中的偶必现难测bug--互斥逻辑异常
  • Android 6年经验面试总结 2024.11.15
  • More effective C++:杂项
  • windows@多系统引导名字修改@默认引导系统修改@bcdedit配置
  • 编译原理(手绘)
  • RK3568平台(I2C篇)i2c_transfer接口详解
  • git switch和git checkout
  • Vue(十一)默认插槽、具名插槽、作用域插槽
  • Java面试自我介绍
  • Leetcode面试经典150题-239.滑动窗口最大值
  • Java集合记录
  • 苍穹初始-云与应用设计
  • 关于STC-ISP软件选项“下次下载用户程序时擦除用户EEPROM区”的质疑
  • 【CanMV K230】画图,画它个多啦A梦
  • 仿人机器人
  • 单片机-STM32 时钟(六)
  • 73.给定一个 m x n 的矩阵,实现一个算法如果一个元素为 0 ,则将其所在行和列的所有元素都设为 0 。请使用 原地 算法
  • Python多种列表操作方法
  • Django Admin在列表视图页面上显示计算字段
  • godot开发初体验
  • 黑马JavaWeb开发笔记13——Springboot入门(创建、运行测试项目)、Http协议(请求响应协议)、HTTP协议解析
  • 问:关于内部类,知道这些就够了~
  • C++初学(18)
  • Vue学习笔记 二
  • 【赵渝强老师】MongoDB的WiredTiger存储引擎
  • C#Math计算的几个常用方法