HTML静态网页成品作业(HTML+CSS)——美食火锅介绍网页(1个页面)

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

文章目录


一、作品介绍

🏷️本套采用HTML+CSS,未使用Javacsript代码,共有1个页面

二、作品演示

三、代码目录

四、网站代码

HTML部分代码

c 复制代码
<div class="top">
		火锅
	</div>
	<div class="pic">
		<img src="./img/pic.jpg" alt="" width="100%">
	</div>
	
	<div class="bt">
		火锅起源:爱你一万年
	</div>
	<div class="box">
		<div class="box1">
			<div class="bp">
				关于火锅,可能就得从一万年前说起。那时的"火锅"不是锅,而是用陶制成的"鼎"。先在鼎内加好水,再放入各种肉类,在鼎底生火煮成一锅大杂烩,这在当时叫做"英"。又因为把食物放入沸水中发出的"咕咚咕咚〞声,因此最早的火锅,不叫火锅,而叫 "古董羹"
			</div>
			<div class="bp">因为鼎,器大具高,不方便活动,只能在固定的地方煮,每煮一次鼎都够分给全村的人吃。到了西周,发明了铜和铁以及各种陶器</div>
			<div class="bp">后,出现了许多小型的器皿,火锅才成为了百姓的常用器皿。</div>
		</div>
		<div class="bpi">
			<img src="./img/hg1.jpg" alt="">
		</div>
	</div>
	
	<div class="bt">
		火锅派系
	</div>
	<div class="boxp1">火锅的存在己是多年,在"吃货"集中的国度里,火锅的吃法会一如开始时的单一吗?答業必定是否定的。到了现代的中国,火锅已以各式形态出现在大众眼前,各地不同的制作手法、不同的火锅底料、 不同的器皿烹饪已闻名全国甚至全世界。在中国,一个月不带重样的吃火锅葡直就是"洒洒水"</div>
	<div class="boxp">
		<div class="bp">川渝派:代表:四川火锅,重庆火锅,串串香火锅等</div>
		<div class="bp">北派:代表:老北京火锅,内蒙肥羊火锅,东北白肉火锅,山东肥牛火锅,羊蝎子火锅,羊汤火锅等</div>
		<div class="bp">云贵派:代表:酸汤鱼火锅,菌菇火锅,滇味火锅,黑山羊火锅等</div>
		<div class="bp">江浙派:代表菊花暖锅,一品锅,什锦暖锅,三线火锅</div>
		<div class="bp">粤派:代表:海鲜火锅,粥底火锅,五捞火锅,猪肚鸡 火锅,潮汕牛肉火锅等</div>
		<div class="bp">其他派系火锅:海南椰子鸡火锅等</div>
	</div>
	
	<div class="boxpimg">
		<img src="./img/hg2.jpg" alt="">
		<img src="./img/hg3.jpg" alt="">
		<img src="./img/hg4.jpg" alt="">
		<img src="./img/hg5.jpg" alt="">
		<img src="./img/hg6.jpg" alt="">
		<img src="./img/hg7.jpg" alt="">
		<img src="./img/hg8.jpg" alt="">
		<img src="./img/hg9.jpg" alt="">
	</div>

五、源码获取

🥇 ~ 关注我,点赞博文~ 每天带你涨知识!

🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。

💙2.想要获取本文源码,点击前往吧

相关推荐
范小多1 分钟前
24小时学会Python Visual code +Python Playwright通过谷歌浏览器取控件元素(连载、十一)
服务器·前端·python
ooolmf1 分钟前
matlab2024读取温度01
java·前端·javascript
打工人小夏3 分钟前
前端vue3项目使用nprogress动画组件,实现页面加载动画
前端
一颗宁檬不酸4 分钟前
前端农业商城中产品产地溯源功能的实现
前端
李少兄12 分钟前
深入理解前端中的透视(Perspective)
前端·css
江公望21 分钟前
HTML5 History 模式 5分钟讲清楚
前端·html·html5
云和数据.ChenGuang28 分钟前
Zabbix Web 界面安装时**无法自动创建配置文件 `zabbix.conf.php`** 的问题
前端·zabbix·运维技术·数据库运维工程师·运维教程
码界奇点31 分钟前
Java Web学习 第15篇jQuery万字长文详解从入门到实战解锁前端交互新境界
java·前端·学习·jquery
A242073493038 分钟前
使用jQuery动态操作HTML和CSS
css·html·jquery
前端老曹40 分钟前
vue3 三级路由无法缓存的终极解决方案
前端·javascript·vue.js·vue