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

news2024/10/7 2:27:16

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

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • 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.coloradmin.cn/o/1549026.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

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

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

PTA L2-037 包装机

一种自动包装机的结构如图 1 所示。首先机器中有 N 条轨道&#xff0c;放置了一些物品。轨道下面有一个筐。当某条轨道的按钮被按下时&#xff0c;活塞向左推动&#xff0c;将轨道尽头的一件物品推落筐中。当 0 号按钮被按下时&#xff0c;机械手将抓取筐顶部的一件物品&#x…

详解智慧路灯杆网关的集中供电能力

智慧路灯杆网关是智慧杆物联网系统中不可或缺的设备。智慧杆网关不仅可以作为杆载设备与云平台、设备与设备之间的桥梁&#xff0c;促进数据的无缝传输&#xff0c;而且还能提供高效的能源管理和供电功能。 BMG8200系列交流型智慧路灯杆网关就集成了强大的供电能力&#xff0c;…

短视频矩阵系统--技术3年源头迭代

短视频矩阵系统核心技术算法主要包括以下几个方面&#xff1a; 1. 视频剪辑&#xff1a;通过剪辑工具或API从各大短视频平台抓取符合要求的视频。这些视频通常符合某些特定条件&#xff0c;如特定关键词、特定时间段发布的视频、视频点赞评论转发等数据表现良好的视频。 2. 视…

Kotlin 中的类和构造方法

1 Kotlin 中的类以及接口 对象是什么&#xff1f;任何可以描述的事物都可以看作对象。我们以鸟为例&#xff0c;来分析它的组成&#xff1a; 形状、颜色等可以看作是鸟的静态属性&#xff1b;年龄、大小等可以看作是鸟的动态属性&#xff1b;飞行、进食等可以看作是鸟的行为&…

VTK 光源 Transform 自定义BoundingBox绘制

这段代码展示了如何在 VTK 中创建光源&#xff0c;并在场景中添加光源的可视化表示。以下是关于代码的详细解释和教程&#xff1a; 创建光源 vtkSmartPointer<vtkLight> light vtkSmartPointer<vtkLight>::New();使用 vtkSmartPointer 创建了一个智能指针&#…

oracle补丁升级(19.3-19.22)

一、备份原来的opatch和数据库文件 这里要根据自己的路径&#xff1a; mv /u01/app/oracle/product/19.3.0/db_1/OPatch /u01/app/oracle/product/19.3.0/db_1/OPatch.bakcd /u01/app mkdir -p /u01/app/backup tar -pcvf /u01/app/backup/oracle_backup.tar /u01/app/oracle/…

glibc内存管理ptmalloc - 实时打印bin链的变化

前言 在《glibc内存管理ptmalloc - largebin》中我们详细解释了 largebins共63个&#xff0c;并用表格点出了每个bin的size的范围largebin在free一些内存后的状态 特别是第2点&#xff0c;我其实不太满意&#xff0c;因为只有全部free后的一个结果&#xff0c;并没有中间状态…

【jenkins+cmake+svn管理c++项目】jenkins回传文件到svn(windows)

书接上文&#xff1a;创建一个项目 在经过cmakemsbuild顺利生成动态库之后&#xff0c;考虑到我一个项目可能会生成多个动态库&#xff0c;它们分散在build内的不同文件夹&#xff0c;我希望能将它们收拢到一个文件夹下&#xff0c;并将其回传到svn。 一、动态库移位—cmake实…

工作12年了,我还没能过上自己想要的生活

写这篇文章之前&#xff0c;我想了很久&#xff0c;不知道该如何下笔&#xff0c;如何向读者说明这些年我是怎么走过来的&#xff0c;我只是依稀的记得当时的自己犹如在昨天。 2009年大学毕业&#xff0c;我和大多数的毕业生一样写简历求职。不管是招聘会还是网上投简历&#x…

容器网络隔离验证

结论&#xff0c;可以直接扫描内网路由能通的机器。 1.节点1 192.168.55.6 2.节点2 192.168.55.5 3.非节点3 192.168.55.3

4005.K次取反后最大化的数组和

// 定义一个名为Solution的类 class Solution {// 定义一个public方法largestSumAfterKNegations&#xff0c;输入参数为一个整数数组nums和一个整数K&#xff0c;返回值类型为整数public int largestSumAfterKNegations(int[] nums, int K) {// 使用Java流对数组中的元素进行操…

win11 环境配置 之 Jmeter

一、安装 JDK 1. 安装 jdk 截至当前最新时间&#xff1a; 2024.3.27 jdk最新的版本 是 官网下载地址&#xff1a; https://www.oracle.com/java/technologies/downloads/ 建议下载 jdk17 另存为到该电脑的 D 盘下&#xff0c;新建jdk文件夹 开始安装到 jdk 文件夹下 2. 配…

1111111111111111111111111111111111

欢迎关注博主 Mindtechnist 或加入【智能科技社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和技术。关…

ClickHouse初体验

1.clickHouse是啥&#xff1f; ClickHouse 是俄罗斯的 Yandex 于 2016 年开源的列式存储数据库(DBMS)&#xff0c;使用 C语言编写&#xff0c;主要用于在线分析处理查询(OLAP)&#xff0c;能够使用SQL查询实时生成分析数据报告 2.clickHouse的特点 2.1列式存储 对于列的聚合&…

Java零基础入门到精通_Day 3

37 switch default&#xff1a; 后面的break;可以省略 38 春夏秋冬 注意事项:在switch语句中&#xff0c;如果case控制的语句体后面不写break&#xff0c;将出现穿透现象&#xff0c;在不判断下一个case值的情况下&#xff0c;向下运行 直到遇到break&#xff0c;或者整体swi…

班级综合测评管理系统的设计与实现|Springboot+ Mysql+Java+ B/S结构(可运行源码+数据库+设计文档)

本项目包含可运行源码数据库LW&#xff0c;文末可获取本项目的所有资料。 推荐阅读100套最新项目持续更新中..... 2024年计算机毕业论文&#xff08;设计&#xff09;学生选题参考合集推荐收藏&#xff08;包含Springboot、jsp、ssmvue等技术项目合集&#xff09; 目录 1. …

opengl草稿复习,承上启下

目录 1、链接文件夹中的cpp 2、链接资源到输出目录 3、多编译目标 4、cmakelist添加库 4、添加glfw和glad 5、glfw运行 6、NDC、VBO、VAO 7、渐变三角形 8、渲染两个三角形 9、渲染两个三角形&#xff0c;同时基于原来颜色进行渐变 1、链接文件夹中的cpp cmake_minimu…

一本书掌握数字化运维方法,构建数字化运维体系

文章目录 前言主要内容读者对象 前言 数字化转型已经成为大势所趋&#xff0c;各行各业正朝着数字化方向转型&#xff0c;利用数字化转型方法论和前沿科学技术实现降本、提质、增效&#xff0c;从而提升竞争力。 数字化转型是一项长期工作&#xff0c;包含的要素非常丰富&…

React和Vue.js的有什么区别

在当今前端开发领域&#xff0c;React 和 Vue.js 作为两大热门的前端框架备受开发者关注。它们各自拥有独特的特点和优势&#xff0c;在实际项目中有着广泛的运用。本文将深入探讨 React 和 Vue.js 之间的区别&#xff0c;从组件化方式、数据绑定、模板语法以及生态系统和工具支…