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

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

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

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 代码:茄子食谱网页编写] 该文观点仅代表作者本人,今日霍州系信息发布平台,霍州网仅提供信息存储空间服务。

猜你喜欢

《定风波》开播,王星越向涵之化身“神捕”探案(王星越新剧《定风波》开播)

《定风波》以七桩环环相扣、诡谲离奇的迷案为骨,讲述了大亓第一神捕萧北冥(王星越 饰)与飒爽女捕钟雪漫(向涵之 饰)因命运牵引,与风清浊(陈宥维饰)、霍黛蓉(张南 饰)、童双(何洛洛 饰)、诸葛孔云(邓凯 …

《定风波》开播,王星越向涵之化身“神捕”探案(王星越新剧《定风波》开播)

“容嬷嬷”年轻时竟是校花?本以为是玩笑,看到照片后被惊艳了!

这个角色的威慑力深深印在观众心里,以至于当《还珠格格》火爆全国时,李明启走在街上会被人指指点点,甚至遭遇鸡蛋袭击。 然而,真正让李明启为人熟知的是1998年热播的《还珠格格》。一个优秀的演员,不仅能让人恨得牙…

“容嬷嬷”年轻时竟是校花?本以为是玩笑,看到照片后被惊艳了!

杜淳老婆为自己发声,希望大家看到我的努力,不仅是因为某人的光(杜淳老婆发文)

4 月,她一句“爱情不该精确到小数点”把情侣 AA 制送上热搜;7月,又被卷入“名媛培训班”传闻,她直接晒本科毕业证回应:“我没报过班,我是正儿八经念完大学的。” 王灿兮透露,正在筹备一档以“30+斜杠妈…

杜淳老婆为自己发声,希望大家看到我的努力,不仅是因为某人的光(杜淳老婆发文)

《向往的生活8》重启,何炅黄磊再启乌镇,张艺兴缺席引热议!

上周,《向往的生活》节目组发布了全新的海报,黄磊、何炅、彭昱畅和张子枫并肩而立,画面静默却宣告着节目的回归——在停播了823天后,节目终于在浙江乌镇重启。与此同时,离开节目的成员们各自有了新的发展:彭昱畅从曾…

《向往的生活8》重启,何炅黄磊再启乌镇,张艺兴缺席引热议!

赵龙豪胖到认不出,若不是张译带他,反派专业户可能真没戏拍了(赵龙豪是哪里人)

大多是配角,但对赵龙豪来说,能有机会出演这些角色已经是足够的满足。 赵龙豪的演技有多强,尤其是在反派角色上的塑造,圈内人都深有体会。尤其是在2023年,凭借与张译搭档出演的《狂飙》,他真正迎来了爆发,继而接连…

赵龙豪胖到认不出,若不是张译带他,反派专业户可能真没戏拍了(赵龙豪是哪里人)