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

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

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • HTML部分代码
  • 五、源码获取


一、作品介绍

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

二、作品演示

在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码

<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.想要获取本文源码,点击前往吧

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/719002.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

springboot知识点大全

文章目录 LombokLombok介绍Lombok常用注解Lombok应用实例代码实现idea安装lombok插件 Spring InitializrSpring Initializr介绍Spring Initializr使用演示需求说明方式1: IDEA创建方式2: start.spring.io创建 注意事项和说明 yaml语法yaml介绍使用文档yaml基本语法数据类型字面…

rk3568 适配WiFi模组(四)

rk3568 适配WiFi模组(Pcie+USB) 本篇文章简单讲解由Pcie+USB组成WiFi模组在rk3568 Android12适配过程。RTL8822CE是Realtek推出的一款802.11ac WiFi +蓝牙5.0组合模块。PCI Express(Peripheral Component Interconnect Express)总线WiFi,USB(Universal Serial Bus)连接蓝…

搜索与人工智能相结合如何解决企业数据问题?

作者&#xff1a;来自 Elastic Fermi Fang 企业数据是好处还是负担&#xff1f; 组织正被数据淹没 —— 从安全事件日志和应用程序错误消息到物联网指标和帮助中心常见问题解答。这些丰富的信息通常存在于孤立的孤岛中&#xff0c;在整合这些信息以提升客户体验、提高运营弹性…

关于html简单的学习和链接博客

HTML&#xff08;超文本标记语言&#xff09;是用于创建网页的标准标记语言。它通过使用一系列元素和标记来定义网页的结构和布局。这些元素用于表示标题、段落、链接、图像、列表和网页上各种其他类型的内容。HTML是网络的基础&#xff0c;是创建和设计网站的关键。 下面简单…

第十七课,海龟画图习题课(一)

图案一&#xff0c;半圆 import turtleturtle.circle(50, 180)turtle.left(90)turtle.forward(100) 图案二&#xff0c;同心圆 import turtleturtle.circle(100)turtle.right(90)turtle.penup()turtle.forward(50)turtle.pendown()turtle.left(90)turtle.circle(150) 图案三&am…

MYSQL部分术语及原理解释(缓冲池、LRU、redo log buffer、WAL、Checkpoint、LSN)

文章目录 一、缓冲池 Buffer Pool二、 LRU List、Free List、Flush List三、 重做日志缓存redo log buffer四、WAL与Checkpoint五、LSN 总结来自《MySQL技术内幕 InnoDB存储引擎》 第二版 一、缓冲池 Buffer Pool InnoDB存储引擎的MySQL是基于磁盘的数据库系统。缓冲池是一片内…

Ubuntu与RedHat Linux的不同

部署Ubuntu 安装在服务器上的系统一般追求极致的稳定&#xff0c;所以安装系统时为了避免潜在的问题&#xff0c;所以选的时候应该往后推选几个版本 首先因为现在使用的电脑是MacBook&#xff0c;还是最新的Mac所以在部署的时候要注意其安装的支持芯片架构&#xff08;最新的…

事务所管理系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;管理员管理&#xff0c;客户管理&#xff0c;评论管理&#xff0c;基础数据管理&#xff0c;公告信息管理 客户账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;律师管理&#xff0…

【Python机器学习实战】----基于AdaBoost分类树模型、梯度提升分类树模型、Bagging分类树模型以及随机森林分类模型对空气质量等级进行预测

&#x1f3a9; 欢迎来到技术探索的奇幻世界&#x1f468;‍&#x1f4bb; &#x1f4dc; 个人主页&#xff1a;一伦明悦-CSDN博客 ✍&#x1f3fb; 作者简介&#xff1a; C软件开发、Python机器学习爱好者 &#x1f5e3;️ 互动与支持&#xff1a;&#x1f4ac;评论 &…

【Redis实战篇】redis的擅长实现的功能

&#x1f525;作者主页&#xff1a;小林同学的学习笔录 &#x1f525;小林同学的专栏&#xff1a;JAVA之基础专栏 【Redis实战篇】Redis有可能出现的问题以及如何解决问题_redis实现用户登录可能造成哪些问题-CSDN博客 本文接上面的文章 目录 2.优惠券秒杀 2.1 全局唯一ID 2.…

微信小程序-界面提示框和消息

一.Loading加载框 小程序提供了wx.showLoading用来在加载界面的时候使用&#xff0c;比如加载图片和数据的时候可以使用。 常常和wx.hideLoading()配合使用&#xff0c;否则加载框一直存在。 其效果如下&#xff1a; 代码如下&#xff1a; //显示加载消息wx.showLoading({//提…

【Java】已解决java.lang.CloneNotSupportedException异常

文章目录 问题背景可能出错的原因错误代码示例正确代码示例注意事项 已解决java.lang.CloneNotSupportedException异常 在Java编程中&#xff0c;java.lang.CloneNotSupportedException是一个常见的运行时异常&#xff0c;它发生在尝试调用对象的clone()方法时&#xff0c;但该…

【Effective Web】常见的css布局方式--三栏布局

常见的css居中方式–三栏布局 第一种实现&#xff1a;table布局&#xff08;不推荐&#xff09; 缺点&#xff1a;在table加载前&#xff0c;整个table都是空白的&#xff0c;且修改布局排版都十分困难 <table class"container"><td class"left"…

C++及cmake语法介绍

c/cmake学习 文章目录 c/cmake学习1. c1.1 基本模型1.1.1 for循环1.1.2 main函数1.1.2 带参数函数编译函数 2. CMAKE2.1 相关命令2.1.1 编译基本命令2.1.2 动态库静态库编译2.1.3 消息输出2.1.4 cmake变量常见参数1. 设置构建类型2. 设置编译器标志3. 指定编译器4. 设置安装路径…

[AIGC] 图论基础入门

图论是数学的一个分支&#xff0c;旨在研究图&#xff08;graph&#xff09;的属性和应用。这是一个跨学科领域&#xff0c;因为图论可以用于描述和解决各种实际问题。如社交网络分析&#xff0c;电脑网络&#xff0c;生物网络等。 文章目录 什么是图&#xff1f;图的基本性质L…

VUE3版本新特性

VUE3版本新特性 VUE3和VUE2的区别路由的使用vite安装项目新特性使用 1.VUE3和VUE2的区别 2020年9月18日&#xff0c;Vue.js发布版3.0版本&#xff0c;代号&#xff1a;One Piece 于 2022 年 2 月 7 日星期一成为新的默认版本! Vue3性能更高,初次渲染快55%, 更新渲染快133% 。…

Raylib的贪吃蛇

配置Raylib库 工具链主函数模板Draw: 绘制网格Snake: 初始化Draw&#xff1a;绘制蛇与果Input&#xff1a;移动Logic&#xff1a;游戏主要逻辑Draw: 游戏结束 工具链 mkdir snake cd snakeCMakeLists.txt cmake_minimum_required(VERSION 3.10) project(snake) set(CMAKE_EXP…

TWM论文阅读笔记

这是ICLR2023的一篇world model论文&#xff0c;用transformer来做世界模型的sequence prediction。文章贡献是transformer-based world model&#xff08;不同于以往的如transdreamer的world model&#xff0c;本文的transformer-based world model在inference 的时候可以丢掉…

适用于世界上最先进的医疗应用的高压电阻器

我们的电阻器专为用于医疗诊断、治疗和预防的各种产品而设计。从小型植入式和非侵入性设备到大型诊断成像设备&#xff0c;医疗制造商之所以选择 EAK电阻器&#xff0c;是因为操作环境是高电压和磁场&#xff0c;准确性和稳定性至关重要。 EAK 专有的精密打印技术生产出非常适…

Python自动化(1)——获取窗口句柄

Python自动化(1)——获取窗口句柄 前言 在现代生活中&#xff0c;人们的工作往往有很大的重复性。可能一个工作&#xff0c;会有90%的相似性&#xff0c;这时候&#xff0c;就会思考能否通过程序来代替人工。 Python作为近几年来大火的编程语言&#xff0c;其便捷性和高效性&a…