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

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

6.14作业

使用手动连接&#xff0c;将登录框中的取消按钮使用第二中连接方式&#xff0c;右击转到槽&#xff0c;在该槽函数中&#xff0c;调用关闭函数&#xff0c;将登录按钮使用qt4版本的连接到自定义的槽函数中&#xff0c;在槽函数中判断ui界面上输入的账号是否为"admin"…

MySQL常见的命令

MySQL常见的命令 查看数据库&#xff08;注意添加分号&#xff09; show databases;进入到某个库 use 库; 例如&#xff1a;进入test use test;显示表格 show tables;直接展示某个库里面的表 show tables from 库&#xff1b; 例如&#xff1a;展示mysql中的表格 show tabl…

一个软件是如何开发出来的呢?

一、前言 如今&#xff0c;AI大爆发的时代&#xff0c;作为一名IT从业者&#xff0c;你是否也想尝试开发一套自己的系统&#xff0c;实现那些看似有可能实现的天马行空的想法&#xff0c;变成一个优秀甚至伟大的产品&#xff0c;甚至带来某个行业的革新&#xff0c;那作为一名…

11 数制介绍及转换

数制介绍 一、数制介绍 &#xff08;一&#xff09;计算机的数制 ​ 二进制这个词的意思是基于两个数字 ​ 二进制数或二进制位表示为0 和1 ​ 示例&#xff1a;10001011 ​ 十进制数制系统包括10 个数字&#xff1a;十进制数0、1、2、3、4、5、6、7、8、9 ​ 示例&…

List, Set, Map, Queue介绍

Java集合框架是一组接口和实现这些接口的类的集合&#xff0c;它提供了对数据集合的高效率存储和操作。以下是Java集合框架中一些核心接口的介绍&#xff1a; 1.List&#xff1a; List是一个有序的集合&#xff0c;允许包含重复的元素。它提供了按插入顺序访问元素的方法&…

React+TS前台项目实战(十一)-- 全局常用组件提示语可复制Link组件封装

文章目录 前言HighLightLink组件1. 功能分析2. 代码详细注释3. 使用方式4. 效果展示 总结 前言 今天这篇讲的这个组件&#xff0c;是一个用于高亮显示文本并添加可选的跳转链接&#xff0c;提示文本&#xff0c;复制文本的 React 组件 HighLightLink组件 1. 功能分析 &#x…

CentOS搭建kubernetes集群详细过程(yum安装方式)

kubernetes集群搭建详细过程&#xff08;yum安装方式&#xff09; Kubernetes&#xff0c;也被称为K8s&#xff0c;是一个多功能的容器管理工具&#xff0c;它不仅能够协调和调度容器的部署&#xff0c;而且还能监控容器的健康状况并自动修复常见问题。这个平台是在谷歌十多年…

VS2022打开.netcore2.2 问题解决

1.vs2022运行时一直提示异常 2.解决方法&#xff0c;双击当前的项目修改xxxx.csproj文件 把当前的版本修改为2.2.0即可重新编译运行

事务所管理系统的设计

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

Java多线程设计模式之不可变对象(Immutable Object)模式

简介 多线程共享变量的情况下&#xff0c;为了保证数据一致性&#xff0c;往往需要对这些变量的访问进行加锁。而锁本身又会带来一些问题和开销。Immutable Object模式使得我们可以在不加锁的情况下&#xff0c;既保证共享变量访问的线程安全&#xff0c;又能避免引入锁可能带…

Vue 3与ESLint、Prettier:构建规范化的前端开发环境

title: Vue 3与ESLint、Prettier&#xff1a;构建规范化的前端开发环境 date: 2024/6/11 updated: 2024/6/11 publisher: cmdragon excerpt: 这篇文章介绍了如何在Vue 3项目中配置ESLint和Prettier以统一代码风格&#xff0c;实现代码规范性与可读性的提升。通过设置规则、解…

QT——MySQL数据库联用

一、ODBC 1、ODBC简介 ODBC全称为Open Database Connectivity,是一种用于数据库操作的标准接口。要使用ODBC,首先需要安装相应的ODBC驱动程序,然后在系统中配置ODBC数据源。接着,可以通过编程语言(如C++、Java等)或者数据库工具(如SQL Server Management Studio)来连…

【离散化 二维差分】850. 矩形面积 II

本文涉及知识点 离散化 二维差分 LeetCode850. 矩形面积 II 给你一个轴对齐的二维数组 rectangles 。 对于 rectangle[i] [x1, y1, x2, y2]&#xff0c;其中&#xff08;x1&#xff0c;y1&#xff09;是矩形 i 左下角的坐标&#xff0c; (xi1, yi1) 是该矩形 左下角 的坐标…

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

图案一&#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…

上海亚商投顾:沪指缩量调整 PCB概念股持续爆发

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 一.市场情绪 大小指数昨日走势分化&#xff0c;沪指全天震荡调整&#xff0c;创业板指午后涨超1%。消费电子板块全天强势&a…

持续学习的综述: 理论、方法与应用

摘要 为了应对现实世界的动态&#xff0c;智能系统需要在其整个生命周期中增量地获取、更新、积累和利用知识。这种能力被称为持续学习&#xff0c;为人工智能系统自适应发展提供了基础。从一般意义上讲&#xff0c;持续学习明显受到灾难性遗忘的限制&#xff0c;在这种情况下…

新手如何入门Web3?

一、什么是Web3&#xff1f; Web3是指下一代互联网&#xff0c;它基于区块链技术&#xff0c;致力于将各种在线活动变得更加安全、透明和去中心化。Web3是一个广义的概念&#xff0c;涵盖了包括数字货币、去中心化应用、智能合约等在内的多个方面。它的主要特点包括去中心化、…

深度学习 --- stanford cs231学习笔记四(神经网络的几大重要组成部分)

训练神经网络1 1&#xff0c;激活函数&#xff08;activation functions&#xff09; 激活函数是神经网络之于线性分类器的最大进步&#xff0c;最大贡献&#xff0c;即&#xff0c;引入了非线性。 1&#xff0c;1 Sigmoid sigmoid函数的性质&#xff1a; 结合指数函数的图像可…

element-plus的Tour 漫游式引导怎么去绑定Cascader 级联选择器

首先官方例子是用的button 官方.$el这个log出来是&#xff1a; 知道是以元素为准就拿对应的元素就行 级联选择器.$el是这样的&#xff1a; 你可以移入这个元素部分去看看是哪个要用的&#xff08;好像火狐直接放上去就可以看到元素表示&#xff0c;谷歌要双击或者右键选择去看…

[深度学习]--分类问题的排查错误的流程

原因复现&#xff1a; 原生的.pt 好使&#xff0c; 转化后的 CoreML不好使&#xff0c; 分类有问题。 yolov8 格式的支持情况 Format Argument Suffix CPU GPU 0 PyTorch - .pt True True 1 Tor…