远方游子的归家记：模仿美食网页的制作与实现
前言
2023年的夏天，闲得无聊学了一个礼拜前端知识点。并根据所学知识点模仿制作了一篇网络上公开发布的关于家乡美食的文章。今天才想到有这个不错的案例可以分享出来，以供大家学习参考。
知识点简介
运用的知识点比较简单，常规的div盒子，文字的排版（居中，首行缩进，字体大小等），图片的插入与位置的规划，图片超链接与文字超链接的使用。页面背景的整体规划以及颜色等知识点的使用。
部分效果图展示
网页源代码如下
HTLM5代码如下：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>美食</title><link rel="stylesheet" type="text/css" href="css/444.css"/></head>
<body><div id="uu"><h1><a href="https://tv.cctv.com/2020/10/15/VIDE6RxRzuTKyw8SJi0fAVPQ201015.shtml" target="_blank">文水</a>传统宴席技艺的传承与保护</h1><p>发布日期：2023-02-13 11:31 文章来源:吕梁晚报</p><hr /><p class="abc">饮食既是我们日常生活的一部分，也是人类多彩文化的重要组成部分。它既是物质的文化载体，更作用和影响我们的精神世界。随着生活质量的提升，我们更应该进一步深入体会和理解美食中体现的“活”的文化精髓，把这种精神气质在日常生活中的作用加以展现，让非遗饮食文化在现实生活中得以传承。文水传统宴席记忆列入了吕梁市非物质文化遗产名录，国家级综合服务试点单位文水丽彬文化园成为文水传统宴席非遗项目的传承保护单位，通过标准化的实施，让文水传统宴席插上了腾飞的翅膀，使这一古老的技艺换发了勃勃生机。</p><p class="ab">文水传统宴席的历史渊源</p> <div id="c"><p>吕梁文水历史悠久，勤劳朴实的文水人民在世代传承的饮食文化中，受历朝历代皇家思想、地域环境、气候变化、民俗礼节、文化饮食的影响，久经岁月的历练，集结皇家及地域民间饮食的熏陶，逐渐形成了当地特色的“八碗八碟”宴席。这一宴席被收入吕梁市非物质文化遗产名录。</p><p>文水传统宴席集蒸、煮、煲、氽、烧、烤、炖、凉拌等制作技艺为一体，尤以炒、烩、炖、蒸、煨而赋盛名，涵盖了文水及文峪河流域地区的民俗饮食特色，囊括了文水地方菜的所有经典种类和制作工艺，是文水饮食文化的综合体现。由于北方冬天较为寒冷，传统宴席制作讲究“烧七成、煮八成，想吃绵的上蒸笼”。这一特色制作方式，对文水饮食文化的发展产生一定的导向作用。据史料记载，武则天被封皇后回乡省亲，家乡百姓就是以当地宴席盛情款待，文水传统宴席被注入了皇家宫廷味道，因此文水传统宴席也有人称为武皇贡宴。</p> <p> 清末民初，文水人余双盛在总理衙门当领班掌厨，他结合文水地域饮食“八碗八碟”“八八席”“三八席”的基础上，又注入南味、北味等诸多元素，极大地丰富了文水传统宴席的谱系及制作技艺。其中具有代表性的有苜蓿汤、红烧肉、炉煿肉、羊肉夹山药、扣八宝蒸饭、醪糟汤等，曾代表北味盛行不衰。</p></div><p class="ab">文水传统宴席的主要内容</p><p class="ee">文水传统宴席以“八碗八碟”为基础，宴席的主要内容分为茶点鲜干，压酒冷菜，盘盛炒菜，碗扣蒸菜、馍糕面点。在传统基础上创新发展的文水传统宴席菜品共计十六种干鲜果点，八碗八碟，四汤四主食，中途两道汤、两主食，最后两尾汤、两主食，由什锦火锅收尾，分别为：</p><div id="ac"><ur><ol>四干果：葡萄干、果则片片、柿饼、小花生；</ol><ol>四鲜果：武皇贡梨、苹果、龙眼葡萄、骏枣；</ol><ol>四茶点：绿豆糕、山楂糕、山药酥、草子糕；</ol><ol>四蜜饯：蜜枣、蜜杏脯、蜜桃脯、蜜瓜脯；</ol></ur> </div><div id="w"><a href="https://www.bilibili.com/video/BV1Qq4y1o7qq/?spm_id_from=333.337.search-card.all.click&vd_source=e3c9873feae248d711e92d3ba404a2fa" target="_blank"><img src="img/烩玉米百合.jpg"/title="烩玉米百合"; width="400px"></a><p>烩玉米百合</p><p>四炒四烩八碟子：葱炒鸡脯肉、海参过油肉、海米香菇、苜蓿肉、烩三鲜、烩玉米百合、莲子烩猪肚、虎皮红烧肉烩鸽蛋；</p><img src="img/扒肘子.png"/title="扒肘子"; width="500px"><p>扒肘子</p></div><p class="pp"> 红汤清汤八碗则：扒时子(红)、羊肉夹山药(清)、扣炖则(红)、扣鸡块(清)、扣牛腱(红)、扣羊肚菌让馅(清)、扣八宝蒸饭(甜)、扣丸子(红)；</p><p class="pp">中途两道汤：苜蓿汤、乌鱼汤；</p><div class="ui"><img src="img/点心.png"/ width="400px"; title="一窝酥"><p>一窝酥</p></div><div class="pp"><ur><ol>中途两主食：百花烧麦、一窝酥；</ol><ol>两尾汤：三鲜汤、醪糟汤；</ol><ol>两主食：枣泥糕，煮饺子；</ol><ol>收尾：什锦火锅。</ol></ur></div><div id="er"><p>红汤清汤八碗则，荤素搭配，清浑相间，肥而不腻，瘦而不柴,清爽利口，各具风味，是宴席中最为丰盛丰美的组成部分，最能体现文水传统宴席的风格。创新发展的文水传统宴席，蒸制饮食松软酥绵味浓；炒制饮食脆而不腻，色正香远；煲汤饮食清正味纯，温热利口；凉菜类饮食花草并茂，观赏别致。整个宴席菜肴用料严谨，注重配色，讲究造型，口味鲜美，四季有别，颇具地域特色。</p><p>传统文水传统宴席的取料主要以本土所产为主，肉类主料为猪肉、羊肉、鸡肉和牛肉；菜类主料以当地时令蔬菜为主。像南武度的长山药、大象豆腐皮、保贤牛肉等当地特产。保贤村的牛肉加工一有四百多年的历史，独特的加工技艺深受当地老百姓的欢迎。<p>当然，宴席的标准与规模是根据实际情况来决定的，可分为“四盘四碗”“四盘八碗”“八盘八碗”或“八碟八盘八碗”等档次。</p></p>
<div><p class="ab">文水传统宴席的传承与发展</p><div id="rt"><p>余双盛极大地丰富了文水传统宴席的谱系及制作技艺，当时，文水的好多厨师慕名前往北京学艺。余双盛师傅在众多徒弟中选定文水籍厨师夏桂年为传承人，进行口传手授。赵世恭、马小静等在文水传统宴席方面有所传承。因多种因素，文水传统宴席在制作技艺的巩固、发展、传播等方面受到影响，懂关键技艺的人越来越少。为拯救这一珍贵饮食传统技艺，文水丽彬文化园聘请民间师傅，了解学习文水传统宴席技艺，挖掘文水地方性饮食文化精髓，利用优越的内、外部环境，对该技艺进行深入调查研究，系统地收集整理成较为完整的资料。并成功地申报了吕梁市非物质文化遗产项目，丽彬文化园成为文水传统宴席技艺非物质文化遗产的保护单位。</p><p>丽彬文化园是国家级综合服务标准化试点单位，他们把文水传统宴席也纳入标准化管理体系，专门成立“文水传统宴席传习所”和“邓镔起大师工作室”，他们组织非遗传承人组建传习所核心团队，主要成员有邓镔起、张炳耀、马海龙、张树保等，建立整套制作技艺的资料档案。依照章程，形成年会制度、培训制度。确立年会研讨议题，定期召开研讨会议。他们制订了餐饮业的公共标准、安全标准、服务标准，还对文水传统宴席的每道菜品都进行了规范，从食材原料、调料的精准，到烹饪器具、制作工艺以及色泽、香味、口感、形态等方面的质量要求，都制订了具体标准。</p><div id="oi"><img src="img/富贵牡丹菜.png" width="400px"title="富贵牡丹菜"><p>富贵牡丹菜</p><img src="img/花椒大鱼头.png" width="400px" title="花椒大鱼头"><p>花椒大鱼头</p></div><p>在文水传统宴席菜品的基础上，他们还结合当地饮食习惯，制定出武皇醋鱼、功夫状元鸡、晋阳素合菜、蔬菜沾片子、炉烳肉、邓厨花椒大鱼头、桃胶炖雪梨、酸菜汆白肉、饸饹面等地方特色菜品的制作规范，极大地丰富了文水宴席的内容，推进了文水传统宴席的提升和品位。文水传统宴席传习所成员多次参加省、市餐饮行业技能大赛并屡获殊荣，在餐饮业赢得了良好口碑。</p><p>丽彬文化园餐饮行政总厨邓镔起被评为中国晋菜名师、全国餐饮服务单位食品安全管理员，他的大师工作室通过带徒和培训，为非遗传承人的培养搭建了平台，对非遗饮食文化的传承起到了示范引领和骨干带头作用，特别是在完善和传承文水传统宴席技艺方面做出了有益的探索和实践。2021年12月，文水传统宴席入选吕梁市十大宴席。邓镔起作为文水传统宴席非遗传承人参加了“非遗民俗展·传承中国年”非遗贺岁宣传片拍摄。</p> <p> 在文水传统宴席技艺非遗项目传承中，以工匠精神不断探索其所蕴藏的人文含义，追索中华美食之魂，进一步让文水传统宴席背后的文化精神和历史价值取向都得以充分展现。</p></div><div id="tr"><p>文字：<a href="https://baike.baidu.com/item/%E6%A2%81%E5%A4%A7%E6%99%BA/8610226" target="_blank">梁大智</a></p><p>编辑：褚慧灵</p><p>审核：马 燕</p></div><h3>网页模仿者：陌上烟雨，如果想认识我，请点击<a href="https://blog.csdn.net/weixin_63279307?type=blog" target="_blank">链接</a></h3> </div>
</body>
</html>CSS3代码如下：
h1{font-family: "微软雅黑";text-align: center;
}
h1>a:hover,h3>a:hover,#tr p a:hover{
color: #5F9EA0;
background-color:#FF0000;
}
.ab{text-align: center;font-family: "微软雅黑";font-size: 30px;
}
#c,.ee,.abc{
font-size: 24px;line-height: 2;text-indent: 2em;font-family: "微软雅黑";
}
#w{font-family: "微软雅黑";font-size: 17px;text-indent: 2em;margin: 0 auto;text-align: center;width: 1050px;height:780px;line-height: 2;
}
#er,.de,#ac,#rt{font-family: "微软雅黑";font-size: 18px;text-indent: 2em;line-height:2;
}
#tr{font-family: "微软雅黑";font-size: 18px;text-align: right;line-height: 2;
}
a{text-decoration: none;
}
h3{color: cadetblue;
}
#uu{width: 1050px;height: 5400px;margin: 0 auto;background-color: aliceblue;
}
#oi{width: 1000px;height: 680px;text-align: center;margin: 0 outo;}
.pp{text-indent:2em;line-height: 2;
}
.ui{width: 1050px;height: 480px;text-align: center;
}大家可以找找代码中有几个文字超链接，有几个图片超链接。
本文结束，这可能是大学更新的最后一篇学习博客了。
因为本案例需要一些图片，特此把源代码以及图片一起打包上传分享给大家
相关文章：
远方游子的归家记：模仿美食网页的制作与实现
前言 2023年的夏天，闲得无聊学了一个礼拜前端知识点。并根据所学知识点模仿制作了一篇网络上公开发布的关于家乡美食的文章。今天才想到有这个不错的案例可以分享出来，以供大家学习参考。 知识点简介 运用的知识点比较简单，常规的div盒子&…...
【消息队列kafka_中间件】三、Kafka 打造极致高效的消息处理系统
在当今数字化时代，数据量呈爆炸式增长，实时数据处理的需求变得愈发迫切。Kafka 作为一款高性能、分布式的消息队列系统，在众多企业级应用中得到了广泛应用。然而，要充分发挥 Kafka 的潜力，实现极致高效的消息处理&…...
element-ui colorPicker 组件源码分享
简单分享 colorPicker 颜色选择器组件源码，主要从以下三个方面： 1、colorPicker 组件页面结构。 2、colorPicker 组件属性。 3、colorPicker 组件事件。 一、组件页面结构。 二、组件属性。 2.1 value/v-model 绑定值属性，类型为 string…...
Git 学习笔记
这篇笔记记录了我在git学习中常常用到的指令，方便在未来进行查阅。此篇文章也会根据笔者的学习进度持续更新。 网站分享 Git 常用命令大全 Learn Git Branching 基础 $ git init //在当前位置配置一个git版本库 $ git add <file> //将文件添加至…...
安防监控视频管理平台EasyCVR助力建筑工地施工4G/5G远程视频监管方案
一、项目背景 随着城市建设的快速发展，房地产建筑工地的数量、规模与施工复杂性都在增加，高空作业、机械操作频繁，人员流动大，交叉作业多，安全风险剧增。施工企业和政府管理部门在施工现场管理上都面临难题。政府部门…...
Cursor Talk To Figma MCP 安装与配置指南
Cursor Talk To Figma MCP 安装与配置指南 1.项目基础介绍 Cursor Talk To Figma MCP 是一个开源项目，它实现了 Cursor AI 与 Figma 之间的 Model Context Protocol（MCP）集成。通过这个集成，Cursor 能够与 Figma 进行通信&#…...
设计模式之状态模式：优雅管理对象行为变化
引言 状态模式（State Pattern）是一种行为型设计模式，它允许对象在其内部状态改变时改变它的行为，使对象看起来似乎修改了它的类。状态模式将状态转移逻辑和状态相关行为封装在独立的状态类中，完美解决了复杂条件判断问…...
高性能内存kv数据库Redis
目录 引言 一.Redis相关命令详解及其原理 1.redis是什么？ 2.redis中存储数据的数据结构都有哪些？ 3.redis的存储结构（KV） 4.reidis中value编码 5.string的基本原理和相关命令 5.1基本原理 5.2基础命令 5.3string存储结构 …...
C 语言宏定义的新用法
// power on/off #define SPK_POWER_ON() {GPIO_SET_OUT(PT_SPK_EN, PB_SPK_EN);GPIO_SET_HIGH(PT_SPK_EN, PB_SPK_EN);} #define SPK_POWER_OFF() {GPIO_SET_OUT(PT_SPK_EN, PB_SPK_EN);GPIO_SET_LOW(PT_SPK_EN, PB_SPK_EN);}在 C 语言中，宏定义可以…...
性能优化实践
4.1 大规模量子态处理的性能优化 背景与问题分析 量子计算中的大规模量子态处理（如量子模拟、量子态可视化）需要高效计算和实时渲染能力。传统图形API（如WebGL）在处理高维度量子态时可能面临性能瓶颈，甚至崩溃（如表格中14量子比特时WebGL的崩溃）。而现代API（如WebGPU…...
使用wpa_cli和wpa_supplicant配置Liunx开发板的wlan0无线网
目录 1 简单介绍下wpa_cli和wpa_supplicant 1.1 wpa_supplicant 简介 1.2 wpa_cli 简介 1.3 它们之间的关系 2 启动wpa_supplicant 3 使用rz工具把wpa_cli命令上传到开发板 4 用wpa_cli配置网络 参考文献： 1 简单介绍下wpa_cli和wpa_supplicant 1.1 wpa_su…...
C++Cherno 学习笔记day19 [76]-[80] std::optional、variant、any、如何让C++及字符串运行得更快
b站Cherno的课[76]-[80] 一、如何处理OPTIONAL数据 std::optional二、单一变量存放多类型的数据 std::variant三、如何存储任意类型的数据 std::any四、如何让C运行得更快五、如何让C字符串更快 一、如何处理OPTIONAL数据 std::optional std::optional C17 数据是否存在是可选…...
【信息系统项目管理师】高分论文：论信息系统项目的整合管理（旅游景区导游管理平台）
更多内容请见： 备考信息系统项目管理师-专栏介绍和目录 文章目录 论文一、制定项目章程二、制订项目管理计划三、指导和管理项目工作四、管理项目知识五、监控项目工作六、实施整体变更控制七、结束项目或阶段论文 在国家《中国旅游“十三五”发展规划信息化专项规划的背景下…...
【项目日记（一）】-仿mudou库one thread oneloop式并发服务器实现
1、模型框架 客户端处理思想：事件驱动模式 事件驱动处理模式：谁触发了我就去处理谁。 （ 如何知道触发了）技术支撑点：I/O的多路复用 （多路转接技术） 1、单Reactor单线程：在单个线程…...
[特殊字符] LoRA微调大模型实践：从MAC到Web的全流程指南
🚀 实践步骤概览 今天我们要在MAC上完成一个完整的AI项目闭环： 微调一个大模型 → 2. 导出模型并部署 → 3. 暴露API给web后端 → 4. 前端展示 🛠️ 微调模型准备 核心配置 框架：LLama-Factory 🏭 算法：…...
关于 Spring Boot 监控方式的详细对比说明及总结表格
以下是关于 Spring Boot 监控方式的详细对比说明及总结表格： 1. 监控方式概述 1.1 Actuator（内置核心监控） 功能： Spring Boot 内置的监控模块，提供健康检查、指标收集、环境信息、HTTP 追踪等端点。 适用场景&#…...
OpenCV 图形API（35）图像滤波-----中值模糊函数medianBlur()
操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述 使用中值滤波器模糊图像。 该函数使用带有 ksizeksize 开口的中值滤波器来平滑图像。多通道图像的每个通道都是独立处理的。输出图像必须与输入…...
【嵌入式八股5】C++：多线程相关
1. 线程创建与管理 1.1 pthread_create 功能: 创建一个新的线程，并指定该线程的执行函数。参数: pthread_t *thread: 指向线程标识符的指针。const pthread_attr_t *attr: 线程属性，通常为 NULL。void *(*start_routine)(void *): 线程执行的函数指针。…...
视觉slam框架从理论到实践-第一节绪论
从opencv的基础实现学习完毕后，接下来依照视觉slam框架从理论到实践（第二版）的路线进行学习，主要以学习笔记的形式进行要点记录。 目录 1.数据里程计 2.后端优化 3.回环检测 4.建图 在视觉SLAM 中整体作业流程可分为࿱…...
图论--DFS搜索图/树
目录 一、图的存储结构 二、题目练习 846. 树的重心 - AcWing题 dfs，之前学习的回溯算法好多都是用dfs实现搜索的（把题目抽象成树形结构来搜索），其实 回溯算法就是 深搜，只不过针对某一搜索场景 我们给他一个更细分…...
Visual Studio + OpenCV C++ 安装与配置教程
OpenCV（Open Source Computer Vision Library）是一个开源的计算机视觉库，广泛用于图像处理、视频分析、模式识别和机器学习等领域。它由Intel公司于1999年发起，并在2000年由Willow Garage（一个机器人研究机构）进一步开发和维护。OpenCV支持多种编程语言，包括C++、Python…...
Java核心知识点的系统整理（一）
目录 一、数据类型与运算符秘籍 1. 四类八种数据类型 2. 自增运算符的暗战 3. 位运算与逻辑运算对决 二、流程控制三剑客 1. 分支结构抉择 2. 循环控制四骑士 三、面向对象核心机制 1. final的三重封印 2. 静态成员生存法则 四、进阶特性解密 1. 多态的三重境界 2…...
在Android Studio中，`Settings`里的Gradle路径、环境变量以及`gradle - wrapper.properties`文件关联
在Android Studio中，Settings里的Gradle路径、环境变量以及gradle - wrapper.properties文件关联 Android Studio中Settings里的Gradle路径 在Android Studio的Settings（Preferences ） -> Build, Execution, Deployment -> Build Tools -> Gradle 中： Use defau…...
算法复习（二分+离散化+快速排序+归并排序+树状数组）
一、二分算法 二分算法，堪称算法世界中的高效查找利器，其核心思想在于利用数据的有序性，通过不断将查找区间减半，快速定位目标元素或满足特定条件的位置。 1. 普通二分 普通二分适用于在有序数组中查找特定元素的位置。我们可以…...
VSCode写java时常用的快捷键
首先得先安好java插件 1、获取返回值 这里是和idea一样的快捷键的，都是xxxx.var 比如现在我new一个对象 就输入 new MbDo().var // 点击回车即可变成下面的// MbDo mbDo new MbDo()//以此类推get方法也可获取 mbDo.getMc().var // 点击回车即可变成下面的 // St…...
【Code】《代码整洁之道》笔记-Chapter16-重构SerialDate
第16章 重构SerialDate 如果你找到JCommon类库，深入该类库，其中有个名为org.jfree.date的程序包。在该程序包中，有个名为SerialDate的类，我们即将剖析这个类。 SerialDate的作者是David Gilbert。David显然是一位经验丰富、能力…...
使用 Node.js、Express 和 React 构建强大的 API
了解如何使用 Node.js、Express 和 React 创建一个强大且动态的 API。这个综合指南将引导你从设置开发环境开始，到集成 React 前端，并利用 APIPost 进行高效的 API 测试。无论你是初学者还是经验丰富的开发者，这篇文章都适合你。 今天&#…...
深度学习入门：神经网络的学习
目录 1 从数据中学习1.1 数据驱动1.2 训练数据和测试数据 2损失函数2.1 均方误差2.2 交叉熵误差2.3 mini-batch学习2.4 mini-batch版交叉熵误差的实现2.5 为何要设定损失函数 3 数值微分3.1 数值微分3.3 偏导数 4 梯度4.1 梯度法4.2 神经网络的梯度 5 学习算法的实现5.1 2层神经…...
OSI参考模型和TCP/IP模型
1.OSI参考模型 OSI模型： OSI参考模型有7层，自下而上依次为物理层，数据链路层，网络层，传输层，会话层，表示层，应用层。（记忆口诀：物联网叔会用）。低…...
人工智能中的卷积神经网络（CNN）综述
文章目录 前言 1. CNN的基本原理 1.1 卷积层 1.2 池化层 1.3 全连接层 2. CNN的发展历程 2.1 LeNet-5 2.2 AlexNet 2.3 VGGNet 2.4 ResNet 3. CNN的主要应用 3.1 图像分类 3.2 目标检测 3.3 语义分割 3.4 自然语言处理 4. 未来研究方向 4.1 模型压缩与加速 4.2 自监督学习 4.3 …...