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

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

---

一、作品介绍

️本套采用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年前山东的儒家学派奠定了中国饮食注重精细、中和、健康的审美取向；北魏末年《齐民要术》（成书时间为约公元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.想要获取本文源码，点击前往吧