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

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

文章目录


一、作品介绍

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

二、作品演示

三、代码目录

四、网站代码

HTML部分代码

c 复制代码
<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年前山东的儒家学派奠定了中国饮食注重精细、中和、健康的审美取向;北魏末年《齐民要术》(成书时间为约公元533---544年)总结的黄河中下游地区的"蒸、煮、烤、酿、煎、炒、熬、烹、炸、腊、盐、豉、醋、酱、酒、蜜、椒"奠定了中式烹调技法的框架;明清时期大量山东厨师和菜品进入宫廷,使鲁菜雍容华贵、中正大气、平和养生的风格特点进一步得到升华。
					</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.想要获取本文源码,点击前往吧

相关推荐
牧码岛16 分钟前
Web前端之Vue+Element实现表格动态不同列合并多行、localeCompare、forEach、table、push、sort、Map
前端·javascript·elementui·vue·web·web前端
老K(郭云开)19 分钟前
如何让eDrawings html文件在Chrome浏览器上展示——allWebPlugin中间件扩展
前端·javascript·chrome·中间件·edge·html
point_zg33 分钟前
Vue报错...properly without JavaScript enabled. Please enable it to continue
开发语言·javascript·vue
DCTANT37 分钟前
【原创】vue-element-admin-plus完成确认密码功能,并实时获取Form中表单字段中的值
前端·javascript·vue.js·elementui·typescript
GISer_Jing1 小时前
字符串操作&栈和队列
前端·javascript
黑土豆1 小时前
TypeScript技术系列13:深入理解配置文件tsconfig.json
前端·javascript·typescript
zheshiyangyang1 小时前
JavaScript---原型和原型链
开发语言·前端·javascript
大个个个个个儿2 小时前
vue3腾讯云直播 前端拉流(前端页面展示直播)
前端·javascript·腾讯云
Cutey9162 小时前
实现可配置的滚动效果:JavaScript与CSS双方案
javascript·面试
喝西瓜汁的兔叽Yan2 小时前
【常用功能】下载文件和复制到剪切板
前端·javascript