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

猜你喜欢

『肖战』再获业内认可,被称打破古偶剧套路,唯一能撑爆款的男主角🎭️(『肖战』再次现身)

媒体甚至罕见地用“贴金”来形容他,称他彻底打破了古偶剧“躺赢”的幻想,让观众重新相信,作品和演员的实力才是收视和热度的根本。 从『社交平台』的评论区可以看到,粉丝们几乎“列出清单”式地统计《藏海传》获得的荣誉与奖…

『肖战』再获业内认可,被称打破古偶剧套路,唯一能撑爆款的男主角🎭️(『肖战』再次现身)

非婚生子男方拒承认 法院判付抚养费 责任无法逃避(非婚生子女,男方不承认怎么办)

在广东深圳,一名女子与男友同居期间未婚先孕生下一子。然而,孩子的到来并未促使两人步入婚姻,反而导致分手。男方坚称孩子不是他的,并拒绝支付任何抚养费,甚至认为只要不进行亲子鉴定就能逃避责任

非婚生子男方拒承认 法院判付抚养费 责任无法逃避(非婚生子女,男方不承认怎么办)

6-8月国内手机市场份额曝光:vivo领跑 苹果位列第六(8月国内手机出货量)

从该博主此前的数据来看,vivo在第32周(8月4日-10日)市场份额达到19.3%(含iQOO6%);在第33周(8月11日-17日)进一步提升至19.7%(含iQOO 6.4%);在第34周(8月18日…

6-8月国内手机市场份额曝光:vivo领跑 苹果位列第六(8月国内手机出货量)

出口美国专用240V变380V变压器,通过UL认证助力中国企业进军北美市场(美国出口eei)

为美国市场设计的240V变380V变压器,该产品已通过美国UL认证,满足北美市场严格的电气安全标准,为中国制造企业进军美国市场提供了可靠的电力转换解决方案。 机械设备:为进口的美国原产380V设备提供电力适配…

出口美国专用240V变380V变压器,通过UL认证助力中国企业进军北美市场(美国出口eei)

『洗面奶』哪个温和?爱它祛痘很实用(『洗面奶』是温和的好,还是清洁力度强的好)

油痘肌易因油脂多长痘,它的氨基酸表活能深层清洁油脂,苦参碱抑制痘痘;敏感痘肌怕刺激,纯氨基酸体系温和无负担,酵母菌成分还能修护肌肤屏障,像给肌肤加了层“防护盾”,减少外界刺激;混合肌 T 区油、两颊干,它的…

『洗面奶』哪个温和?爱它祛痘很实用(『洗面奶』是温和的好,还是清洁力度强的好)