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.mzph.cn/web/31721.shtml

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

相关文章

微信对话生成器2.0版本

微信对话生成器2.0版&#xff0c;这是一款革命性的通讯辅助工具&#xff0c;在数字通信领域带来了新的创新浪潮。这一升级版的生成器不仅囊括了从基本的文字编辑、格式调整到语音转换的多种功能&#xff0c;更重要的是&#xff0c;它提供了模拟真实对话的能力&#xff0c;使得用…

容器之对齐构件

代码&#xff1a; #include <gtk-2.0/gtk/gtk.h> #include <glib-2.0/glib.h> #include <gtk-2.0/gdk/gdkkeysyms.h> #include <stdio.h>int main(int argc, char *argv[]) {gtk_init(&argc, &argv);GtkWidget *window;window gtk_window_ne…

C++ 72 之 友元和类模版

#define _CRT_SECURE_NO_WARNINGS #include <iostream> using namespace std; #include <string>// 写法2&#xff1a; // template<class T1, class T2> // class Students12;// 要提前用到Students12&#xff0c;需要在前面先让编译器见过Students12才可…

汇聚荣做拼多多运营口碑怎么样?

拼多多作为国内领先的电商平台&#xff0c;其运营口碑一直是业界和消费者关注的焦点。汇聚荣作为拼多多的运营服务商&#xff0c;其服务质量直接影响到拼多多平台的用户体验和品牌形象。那么&#xff0c;汇聚荣做拼多多运营口碑怎么样呢? 一、服务响应速度 汇聚荣在服务响应速…

树莓派4B学习笔记11:PC端网线SSH连接树莓派_网线连接请求超时问题解决

今日继续学习树莓派4B 4G&#xff1a;&#xff08;Raspberry Pi&#xff0c;简称RPi或RasPi&#xff09; 本人所用树莓派4B 装载的系统与版本如下: 版本可用命令 (lsb_release -a) 查询: Opencv 版本是4.5.1&#xff1a; 今日学习使用网线连接树莓派&#xff0c;网线可以提供更…

邮件推送服务商有哪些核心功能?怎么选择?

邮件推送服务商支持哪些营销工具&#xff1f;推送性能如何评估&#xff1f; 邮件推送服务商的核心功能可以帮助企业更高效地管理和优化其电子邮件营销活动&#xff0c;从而提升客户参与度和转化率。AokSend将详细介绍邮件推送服务商的一些核心功能。 邮件推送服务商&#xff…

弹窗‘xlive.dll没有被指定在Windows’要怎么解决?教你4种修复xlive.dll的方法

大家在使用电脑期间是否曾遭遇过一个弹窗警告&#xff0c;“xlive.dll没有被指定在Windows”&#xff1f;假如你确实碰到过这样的问题&#xff0c;当时你是如何应对xlive.dll文件缺失的状况呢&#xff1f;对于那些还不清楚如何处理此问题的朋友们&#xff0c;接下来所述的几种方…

用Python的Pygame包实现水果忍者小游戏

先上一下运行结果 长按鼠标左键出刀, 切割水果几分, 切割炸弹结束游戏, 漏掉的水果也会几分, 难度会随时间慢慢提高(水果的刷新频率变快) 初始化 帧率200帧/秒, 游戏窗口大小800600 # 游戏设置 pygame.init() FPS 200 fpsClock pygame.time.Clock() WIDTH, HEIGHT 800, 60…

【FPGA】静态分析与时序约束(持续更新

Reference&#xff1a; V2静态时序分析与时序约束文档 入门 无时序约束场景中&#xff0c;普通图像显示不清晰&#xff0c;千兆网口接收Ethernet package 数据不正常&#xff0c;红外场景中图像显示不正常 Definition&#xff1a; 我们提出一些特定的时序要求&#xff08;或…

文章MSM_metagenomics(七):分组马赛克图

欢迎大家关注全网生信学习者系列&#xff1a; WX公zhong号&#xff1a;生信学习者Xiao hong书&#xff1a;生信学习者知hu&#xff1a;生信学习者CDSN&#xff1a;生信学习者2 介绍 本教程是使用一个Python脚本来绘制马赛克图&#xff0c;用于可视化两个变量的频率分布。 数…

我的Mac疯了!居然可以生成这样的奇葩AI图片!

在当今人工智能领域&#xff0c;midjourney无疑是生成图片的王者&#xff0c;但是苦于付费才能使用&#xff0c;今天我就给大家分享一下midjourney平替stable diffusion&#xff0c;实现本地生成不逊色于midjourney的图片 效果图 先上一个我自己生成的效果(就是在我的Mac上用C…

【anaconda】本地永久设置镜像源

【anaconda】本地永久设置镜像源 可以通过命令行设置全局的 pip 配置&#xff1a; pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple

python字符串的一些操作实例

已知字符串 a “aAsomr3idd4HGHbigs7Dlsf9YeAF”&#xff0c;要求如下 1. 请将a字符串的大写改为小写&#xff0c;小写改为大写。 2.将a字符串的数字取出&#xff0c;并输出成一个新的字符串。 3.将a字符串中的内容反向输出 4.打印a字符串中所有奇数位上的字符(下标是1&#x…

【已解决】手机进入fastboot无法退出

文章目录 报错及效果图报错代码效果图 解决方案必要的解决方法可能有用的解决方法 报错及效果图 报错代码 手机屏幕显示fastboot&#xff0c;长按电源键无法正常启动 效果图 解决方案 必要的解决方法 1.在电脑上下载并安装adb/fastboot驱动&#xff0c;可以在这里免费下载&…

【机器学习300问】129、RNN如何在情感分析任务中起作用的?

情感分析是自然语言处理&#xff08;NLP&#xff09;领域的一个重要分支&#xff0c;它的目标是自动检测和提取出非结构化文本数据中的主观信息&#xff08;比如&#xff1a;情绪、意见、评价等&#xff09; 一、情感分析任务案例 分析电商产品评论的情感倾向&#xff08;三分类…

MySQL之复制(九)

复制 复制管理和维护 确定主备是否一致 在理想情况下&#xff0c;备库和主库的数据应该是完全一样的。但事实上备库可能发生错误并导致数据不一致。即使没有明显的错误&#xff0c;备库同样可能因为MySQL自身的特性导致数据不一致&#xff0c;例如MySQL的Bug、网络中断、服务…

数据资产在供应链管理中担当核心角色:利用数据驱动,显著提升运营效率,有效降低潜在风险,实现决策优化,为企业的可持续发展奠定坚实基础

一、引言 在当今全球化和数字化的时代&#xff0c;供应链管理已成为企业竞争力的关键要素之一。随着信息技术的高速发展&#xff0c;数据资产在供应链管理中扮演着越来越重要的角色。通过有效地利用数据资产&#xff0c;企业能够显著提升运营效率&#xff0c;降低潜在风险&…

opencascade AIS_InteractiveContext源码学习2

AIS_InteractiveContext 前言 交互上下文&#xff08;Interactive Context&#xff09;允许您在一个或多个视图器中管理交互对象的图形行为和选择。类方法使这一操作非常透明。需要记住的是&#xff0c;对于已经被交互上下文识别的交互对象&#xff0c;必须使用上下文方法进行…

Hadoop3:MapReduce中Reduce阶段自定义OutputFormat逻辑

一、情景描述 我们知道&#xff0c;在MapTask阶段开始时&#xff0c;需要InputFormat来读取数据 而在ReduceTask阶段结束时&#xff0c;将处理完成的数据&#xff0c;输出到磁盘&#xff0c;此时就要用到OutputFormat 在之前的程序中&#xff0c;我们都没有设置过这部分配置 …

SQLite 3 优化批量数据存储操作---事务transaction机制

0、事务操作 事务的目的是为了保证数据的一致性和完整性。 事务&#xff08;Transaction&#xff09;具有以下四个标准属性&#xff0c;通常根据首字母缩写为 ACID&#xff1a; 原子性&#xff08;Atomicity&#xff09;&#xff1a;确保工作单位内的所有操作都成功完成&…