HTML 代码:茄子食谱网页编写

一个关于茄子的简单HTML网页代码,包含茄子介绍、食谱和图片:

今日霍州(www.jrhz.info)©️

html

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>美味茄子食谱</title>

<style>

body {

font-family: 'Microsoft YaHei', sans-serif;

line-height: 1.6;

margin: 0;

padding: 0;

background-color: #f5f5f5;

color: #333;

}

header {

background-color: #6a1b9a;

color: white;

text-align: center;

padding: 2rem 0;

}

.container {

max-width: 1200px;

margin: 0 auto;

padding: 20px;

}

.eggplant-info {

background-color: white;

padding: 20px;

margin: 20px 0;

border-radius: 5px;

box-shadow: 0 2px 5px rgba(0,0,0,0.1);

}

.recipe {

background-color: white;

padding: 20px;

margin: 20px 0;

border-radius: 5px;

box-shadow: 0 2px 5px rgba(0,0,0,0.1);

}

.recipe img {

max-width: 100%;

height: auto;

border-radius: 5px;

margin: 10px 0;

}

h1, h2, h3 {

color: #6a1b9a;

}

footer {

text-align: center;

padding: 20px;

background-color: #6a1b9a;

color: white;

margin-top: 20px;

}

.nutrition {

background-color: #f8f9fa;

padding: 15px;

border-left: 4px solid #6a1b9a;

}

</style>

</head>

<body>

<header>

<h1>美味茄子食谱</h1>

<p>探索茄子的多种烹饪方式</p>

</header>

<img src="

https://bbs.csdn.net/topics/619712657

" alt="鱼香茄子">

<div class="container">

<section class="eggplant-info">

<h2>关于茄子</h2>

<img src="

https://bbs.csdn.net/topics/619712741

" alt="茄子图片" style="float:right; margin-left:20px; width:300px;">

<p>茄子(学名:Solanum melongena)是一种常见的蔬菜,原产于印度,现已在世界各地广泛种植。茄子属于茄科植物,与番茄、土豆和辣椒是近亲。</p>

<p>茄子有多种品种,颜色从深紫色到白色不等,形状也各异,有长形、圆形和椭圆形等。茄子肉质柔软,口感细腻,适合多种烹饪方式。</p>

<div class="nutrition">

<h3>营养价值</h3>

<ul>

<li>富含膳食纤维</li>

<li>含有多种维生素(如维生素B1、B6和K)</li>

<li>矿物质含量丰富(如钾、锰和铜)</li>

<li>低热量,适合减肥饮食</li>

</ul>

</div>

</section>

<section class="recipe">

<h2>经典食谱:鱼香茄子</h2>

<img src="

https://bbs.csdn.net/topics/619712902

" alt="鱼香茄子">

<h3>材料</h3>

<ul>

<li>茄子 2根</li>

<li>猪肉末 100克</li>

<li>葱 1根</li>

<li>姜 1小块</li>

<li>蒜 3瓣</li>

<li>豆瓣酱 1大勺</li>

<li>生抽、老抽、醋、糖、淀粉适量</li>

</ul>

<h3>做法</h3>

<ol>

<li>茄子洗净切条,用盐水浸泡10分钟,沥干水分</li>

<li>葱、姜、蒜切末备用</li>

<li>调鱼香汁:生抽2勺、老抽1勺、醋2勺、糖1勺、淀粉1勺、水半碗</li>

<li>热锅热油,放入茄子炸至金黄捞出</li>

<li>锅中留底油,放入肉末炒至变色,加入豆瓣酱炒出红油</li>

<li>加入葱姜蒜末炒香,倒入炸好的茄子</li>

<li>倒入鱼香汁,大火收汁即可</li>

</ol>

</section>

<section class="recipe">

<h2>健康食谱:烤茄子</h2>

<img src="

https://bbs.csdn.net/topics/619712742

" alt="烤茄子">

<h3>材料</h3>

<ul>

<li>茄子 2根</li>

<li>橄榄油 2大勺</li>

<li>大蒜 3瓣(切末)</li>

<li>柠檬汁 1大勺</li>

<li>盐和胡椒粉 适量</li>

<li>新鲜香草(如罗勒或欧芹)适量</li>

</ul>

<h3>做法</h3>

<ol>

<li>烤箱预热至200°C</li>

<li>茄子洗净,纵向切成两半</li>

<li>在茄子切面上划几刀(不要切透)</li>

<li>将橄榄油、大蒜、柠檬汁、盐和胡椒粉混合成调味汁</li>

<li>将调味汁均匀涂抹在茄子切面上</li>

<li>将茄子放在烤盘上,烤25-30分钟,直到茄子变软</li>

<li>出炉后撒上新鲜香草即可食用</li>

</ol>

</section>

</div>

<footer>

<p>© 2023 美味茄子食谱 | 版权©️所有</p>

</footer>

</body>

</html>

代码说明

这个HTML页面包含以下部分:

头部:包含标题和简介,使用紫色背景突出显示

茄子介绍:包括茄子的基本信息、图片和营养价值

两个食谱:

鱼香茄子(中式烹饪)

烤茄子(健康烹饪方式)

页脚:版权©️信息

样式特点

响应式设计,适应不同屏幕尺寸

使用柔和的紫色(#6a1b9a)作为主色调

卡片式布局,使内容更易读

包含营养价值的信息框

特别声明:[HTML 代码:茄子食谱网页编写] 该文观点仅代表作者本人,今日霍州系信息发布平台,霍州网仅提供信息存储空间服务。

猜你喜欢

2025无源物联网白皮书—人工智能篇(无源无线🛜技术)

同时,面对无源标签易被伪造、数据易被篡改的安全挑战,以AI为核心的智能安全保障技术,通过学习合法数据的信号特征、编码规则与时空轨迹,能够从源头实时识别并阻断异常数据,为供应链、智能制造等关键场景的可靠运行构建…

2025无源物联网白皮书—人工智能篇(无源无线🛜技术)

意大利进口平底锅真的适合日常厨房吗?2025消费升级必知(意大利进口fgv)

想买意大利进口平底锅却不知如何选?本文从材质、涂层、适用性等多维度解析。帮助您根据家庭实际需求找到最合适的选择,轻松烹饪煎蛋、烙饼、牛排等美味。

意大利进口平底锅真的适合日常厨房吗?2025消费升级必知(意大利进口fgv)

打破误区 70多岁不是种牙“禁区” 做好这些准备老人也能拥有好牙

随着人口老龄化加剧,70多岁老人的口腔健康问题日益受到关注。其中,“是否适合做种植牙”是许多老年朋友及家属关心的重点

打破误区 70多岁不是种牙“禁区” 做好这些准备老人也能拥有好牙

放羊的星星》女主角🎭️刘荷娜被质疑换脸,完全判若两人,太可惜了(《放羊的星星》在线观看)

放羊的星星》里那个活泼又勇敢的“阿星”,大家还记得吗?可很多网友一看她现在的样子,都愣住了:这真的是当年那个阿星吗? 距离《放羊的星星》拍摄已经过去了将近二十年,刘荷娜选择在这个时候露面,并且再次回忆这部剧…

《<strong>放羊的星星</strong>》女主角🎭️刘荷娜被质疑换脸,完全判若两人,太可惜了(《<strong>放羊的星星</strong>》在线观看)

流浪地球3》将在南极取景,中国科幻电影大门,要给轰开了!(流浪地球3是哪家上市公司出品的)

将庞大复杂的剧情脉络梳理清晰,其重要性甚至不亚于震撼的视觉特效,这是稳住影片口碑的基石。计划的契机,源自『吴京』参与南极科考纪录片《极境》拍摄时与郭帆的一次通话。 事实上,2018年的爱情电影《南极绝恋》已有…

《<strong>流浪地球3</strong>》将在南极取景,中国科幻电影大门,要给轰开了!(流浪地球3是哪家上市公司出品的)