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;使得用…

使用 git 遇到权限错误,重新生成SSH密钥

如果在执行 git 相关的命令的时候遇到权限错误&#xff0c;可能是因为你之前使用了不同的用户名在本地生成了SSH密钥。你可以尝试以下步骤来解决这个问题&#xff1a; 打开终端&#xff0c;并执行以下命令来删除旧的SSH密钥文件&#xff1a; rm ~/.ssh/id_rsa rm ~/.ssh/id_rsa…

容器之对齐构件

代码&#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;网线可以提供更…

vos3000外呼系统通话会话超时中断详解

在VOS3000中&#xff0c;通话会话超时中断可能由多种因素引起。这些因素包括网络问题、配置错误、硬件资源不足等。以下是一些可能导致通话会话超时中断的详细解释&#xff1a; 网络问题&#xff1a; 网络延迟和丢包&#xff1a;网络延迟或丢包会导致数据包在传输过程中被丢弃或…

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

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

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

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

Go单测时的Parallel

在 Go 语言中&#xff0c;t.Parallel() 通常用于测试代码中&#xff0c;表示将当前的测试用例标记为可以并行执行。 当在测试函数中调用 t.Parallel() 后&#xff0c;测试框架会尝试在多个 goroutine 中并行地执行被标记的测试用例。 这可以显著提高测试的执行效率&#xff0c;…

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

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

比官方镜像体积还小的基于Anolis OS8.6的Python3.8.8的编译安装Dockerfile

本次编译安装解决了安装3.8.8编译安装过程中的所有报错&#xff0c;同时&#xff0c;OpenSSL升级至3.0.14、内置Git&#xff0c;支持IPv6&#xff0c;Python环境同时预安装httpx和boto3模块。 FROM openanolis/anolisos:8.6 as PYTHONARG PYTHON_VERSION"3.8.8" ARG…

Elasticsearch term 查询:精确值搜索

一、引言 Elasticsearch 是一个功能强大的搜索引擎&#xff0c;它支持全文搜索、结构化搜索等多种搜索方式。在结构化搜索中&#xff0c;term 查询是一种常用的查询方式&#xff0c;用于在索引中查找与指定值完全匹配的文档。本文将详细介绍 term 查询的工作原理、使用场景以及…

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

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

辅助构造函数相关学习以及php实现

https://mp.weixin.qq.com/s/J9hgLTxYi7ZJdFVG2VszQg 对这个文章进行摘要生成 ### 总体概要 文章阐述了在对象创建过程中&#xff0c;辅助构造函数&#xff08;或称为“多个”构造函数&#xff09;的重要性&#xff0c;它们为代码增加了功能性逻辑&#xff0c;并允许根据需求调…

Ada判别式记录的效率问题

在Ada语言的判别式记录类型&#xff08;discriminated record type&#xff09;中&#xff0c;包含了被称为判别器&#xff08;discriminant&#xff09;的元件&#xff08;component&#xff09;&#xff0c;以及依赖判别器的记录分量&#xff08;component&#xff09;。 依…

文章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…