远方游子的归家记：模仿美食网页的制作与实现

陌上烟雨864

已于 2025-04-15 16:15:03 修改

阅读量358

点赞数 8

分类专栏：前端网页设计实战小案例文章标签：美食

于 2025-04-15 15:56:35 首次发布

本文链接：https://blog.csdn.net/weixin_63279307/article/details/147251123

版权

前端网页设计实战小案例专栏收录该内容

5 篇文章

订阅专栏

前言

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;
}