版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
AI实践：基于AI制作在线食谱分享网站随着互联网技术的飞速发展与生活节奏的日益加快，现代人的饮食习惯与烹饪方式正经历着深刻的变革。传统的家庭烹饪模式往往依赖于口耳相传的经验或厚重的纸质菜谱，这种方式在信息获取的便捷性、多样性以及互动性上已难以满足当代用户的需求。在此背景下，开发一个基于Web的在线食谱分享网站显得尤为必要。下面将演示如何在TRAE中开发一个在线食谱分享网站。在TARE中打开一个空文件夹，创建一个index.html文件，确保已切换到TRAE的@Agent智能体，向AI提出如下问题。编写一个在线食谱网站，基于HTML5+CSS3，不使用JavaScript，页面中包含以下信息。1.页眉（1）网站标题：例如“我的美食厨房”或“家常菜教程”。（2）导航栏：包含指向页面不同区域的链接，如“首页”“热门食谱”“联系我们”。2.主要内容区这是网页的核心，可以划分为以下区域：（1）今日推荐：突出展示一道特色菜，包含一张诱人的大图、菜名和简短介绍。（2）食谱列表：以卡片或列表形式展示多道菜谱。每个食谱条目应包含：·菜名：作为小标题。·成品图：展示菜肴图片。（3）简介：一两句话描述这道菜的口味或特点。（4）详情链接：点击后可以查看完整的做法（可以通过锚点跳转到下方的烹饪步骤区域）。（5）食谱详情示例：选择一到两道菜作为示例，展示其完整的制作流程。（6）准备时间&份量：罗列相关信息。（7）食材清单：清晰罗列所需食材和用量。（8）烹饪步骤：按顺序写出每一步的操作。3.页脚版权信息：例如“©2026我的美食厨房”。等待AI处理完成后，会自动生成代码，具体如下。<!DOCTYPEhtml><htmllang="zh-CN"><head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>我的美食厨房</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:'MicrosoftYaHei','PingFangSC',sans-serif;
line-height:1.6;
color:#333;
background-color:#f8f5f1;
}
/*页眉样式*/
header{
background:linear-gradient(135deg,#d4a5740%,#c9a06b100%);
padding:20px0;
box-shadow:02px10pxrgba(0,0,0,0.1);
}
.header-content{
max-width:1200px;
margin:0auto;
padding:020px;
display:flex;
justify-content:space-between;
align-items:center;
}
.logoh1{
color:#fff;
font-size:2rem;
text-shadow:2px2px4pxrgba(0,0,0,0.2);
}
navul{
list-style:none;
display:flex;
gap:30px;
}
nava{
color:#fff;
text-decoration:none;
font-size:1.1rem;
font-weight:500;
padding:8px16px;
border-radius:20px;
transition:background-color0.3sease;
}
nava:hover{
background-color:rgba(255,255,255,0.2);
}
/*主要内容区*/
main{
max-width:1200px;
margin:0auto;
padding:40px20px;
}
/*今日推荐*/
.today-feature{
background:linear-gradient(135deg,#fff0%,#fef8f0100%);
border-radius:20px;
overflow:hidden;
box-shadow:010px40pxrgba(0,0,0,0.1);
margin-bottom:50px;
}
.feature-content{
display:grid;
grid-template-columns:1fr1fr;
}
.feature-image{
width:100%;
height:400px;
object-fit:cover;
}
.feature-text{
padding:40px;
display:flex;
flex-direction:column;
justify-content:center;
}
.feature-texth2{
font-size:2.5rem;
color:#d4a574;
margin-bottom:20px;
}
.feature-textp{
font-size:1.2rem;
color:#666;
margin-bottom:30px;
line-height:1.8;
}
.btn{
display:inline-block;
padding:12px30px;
background:linear-gradient(135deg,#d4a5740%,#c9a06b100%);
color:#fff;
text-decoration:none;
border-radius:30px;
font-weight:500;
transition:transform0.3sease,box-shadow0.3sease;
align-self:flex-start;
}
.btn:hover{
transform:translateY(-3px);
box-shadow:05px20pxrgba(212,165,116,0.4);
}
/*食谱列表*/
.recipe-section{
margin-bottom:60px;
}
.section-title{
font-size:2rem;
color:#333;
text-align:center;
margin-bottom:40px;
position:relative;
}
.section-title::after{
content:'';
position:absolute;
bottom:-10px;
left:50%;
transform:translateX(-50%);
width:60px;
height:4px;
background:linear-gradient(90deg,#d4a574,#c9a06b);
border-radius:2px;
}
.recipe-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:30px;
}
.recipe-card{
background:#fff;
border-radius:16px;
overflow:hidden;
box-shadow:05px20pxrgba(0,0,0,0.08);
transition:transform0.3sease,box-shadow0.3sease;
}
.recipe-card:hover{
transform:translateY(-8px);
box-shadow:015px35pxrgba(0,0,0,0.12);
}
.recipe-cardimg{
width:100%;
height:200px;
object-fit:cover;
}
.recipe-card-content{
padding:20px;
}
.recipe-cardh3{
font-size:1.4rem;
color:#333;
margin-bottom:10px;
}
.recipe-cardp{
color:#666;
margin-bottom:15px;
font-size:0.95rem;
}
.recipe-card.btn{
padding:8px20px;
font-size:0.9rem;
}
/*食谱详情*/
.recipe-detail{
background:#fff;
border-radius:20px;
padding:40px;
box-shadow:010px40pxrgba(0,0,0,0.08);
margin-bottom:50px;
}
.detail-header{
text-align:center;
margin-bottom:40px;
}
.detail-headerh2{
font-size:2.2rem;
color:#333;
margin-bottom:15px;
}
.detail-headerimg{
width:100%;
max-height:400px;
object-fit:cover;
border-radius:12px;
margin-bottom:20px;
}
.detail-meta{
display:flex;
justify-content:center;
gap:40px;
flex-wrap:wrap;
}
.meta-item{
display:flex;
align-items:center;
gap:8px;
color:#666;
}
.meta-itemsvg{
width:20px;
height:20px;
color:#d4a574;
}
.detail-section{
margin-bottom:35px;
}
.detail-sectionh3{
font-size:1.4rem;
color:#d4a574;
margin-bottom:20px;
padding-left:15px;
border-left:4pxsolid#d4a574;
}
.ingredients-list{
columns:2;
gap:30px;
}
.ingredients-listli{
list-style:none;
padding:10px15px;
background:#f8f5f1;
border-radius:8px;
margin-bottom:10px;
}
.steps-list{
counter-reset:step;
}
.steps-listli{
list-style:none;
padding:15px;
background:#f8f5f1;
border-radius:10px;
margin-bottom:15px;
position:relative;
padding-left:45px;
}
.steps-listli::before{
counter-increment:step;
content:counter(step);
position:absolute;
left:15px;
top:50%;
transform:translateY(-50%);
width:28px;
height:28px;
background:linear-gradient(135deg,#d4a574,#c9a06b);
color:#fff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-weight:bold;
}
/*页脚*/
footer{
background:#333;
color:#fff;
text-align:center;
padding:30px;
}
footerp{
font-size:1rem;
opacity:0.8;
}
/*响应式设计*/
@media(max-width:768px){
.header-content{
flex-direction:column;
gap:15px;
}
.logoh1{
font-size:1.5rem;
}
navul{
gap:15px;
}
.feature-content{
grid-template-columns:1fr;
}
.feature-image{
height:250px;
}
.feature-text{
padding:25px;
}
.feature-texth2{
font-size:1.8rem;
}
.ingredients-list{
columns:1;
}
.detail-meta{
gap:20px;
}
}
</style></head><body>
<!--页眉-->
<header>
<divclass="header-content">
<divclass="logo">
<h1>我的美食厨房</h1>
</div>
<nav>
<ul>
<li><ahref="#home">首页</a></li>
<li><ahref="#recipes">热门食谱</a></li>
<li><ahref="#contact">联系我们</a></li>
</ul>
</nav>
</div>
</header>
<!--主要内容区-->
<main>
<!--今日推荐-->
<sectionid="home"class="today-feature">
<divclass="feature-content">
<div>
<img
src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=delicious%20Chinese%20braised%20pork%20belly%20hongshao%20rou%20on%20white%20plate%20with%20green%20vegetables%20garnish%20professional%20food%20photography&image_size=landscape_16_9"
alt="红烧肉"class="feature-image">
</div>
<divclass="feature-text">
<h2>今日推荐：红烧肉</h2>
<p>色泽红亮，肥而不腻，入口即化。这道经典的中式菜肴，是家宴必备的硬菜。选用五花肉，经过焯水、煸炒、炖煮等多道工序，肉质酥烂，汤汁浓郁，每一口都是满满的幸福感。</p>
<ahref="#hongshaorou"class="btn">查看做法</a>
</div>
</div>
</section>
<!--食谱列表-->
<sectionid="recipes"class="recipe-section">
<h2class="section-title">热门食谱</h2>
<divclass="recipe-grid">
<articleclass="recipe-card">
<img
src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=Chinese%20kung%20pao%20chicken%20with%20peanuts%20and%20dried%20chilies%20on%20white%20plate%20professional%20food%20photography&image_size=landscape_16_9"
alt="宫保鸡丁">
<divclass="recipe-card-content">
<h3>宫保鸡丁</h3>
<p>鲜香微辣，花生酥脆，鸡肉嫩滑。经典川菜，下饭神器。</p>
<ahref="#gongbaojiding"class="btn">查看详情</a>
</div>
</article>
<articleclass="recipe-card">
<img
src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=Chinese%20mapo%20tofu%20with%20minced%20pork%20and%20green%20onions%20on%20white%20plate%20professional%20food%20photography&image_size=landscape_16_9"
alt="麻婆豆腐">
<divclass="recipe-card-content">
<h3>麻婆豆腐</h3>
<p>麻辣鲜香，豆腐嫩滑，川味经典，百吃不厌。</p>
<ahref="#mapotoufu"class="btn">查看详情</a>
</div>
</article>
<articleclass="recipe-card">
<img
src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=Chinese%20fried%20rice%20with%20egg%20and%20vegetables%20on%20white%20plate%20professional%20food%20photography&image_size=landscape_16_9"
alt="蛋炒饭">
<divclass="recipe-card-content">
<h3>蛋炒饭</h3>
<p>粒粒分明，蛋香浓郁，简单却美味的家常主食。</p>
<ahref="#danchaofan"class="btn">查看详情</a>
</div>
</article>
</div>
</section>
<!--食谱详情：红烧肉-->
<sectionid="hongshaorou"class="recipe-detail">
<divclass="detail-header">
<h2>红烧肉</h2>
<img
src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=delicious%20Chinese%20braised%20pork%20belly%20hongshao%20rou%20on%20white%20plate%20with%20green%20vegetables%20garnish%20professional%20food%20photography&image_size=landscape_16_9"
alt="红烧肉">
<divclass="detail-meta">
<divclass="meta-item">
<svgviewBox="002424"fill="none"stroke="currentColor"stroke-width="2">
<circlecx="12"cy="12"r="10"/>
<polylinepoints="12612121614"/>
</svg>
<span>准备时间：30分钟</span>
</div>
<divclass="meta-item">
<svgviewBox="002424"fill="none"stroke="currentColor"stroke-width="2">
<pathd="M2211.08V12a1010011-5.93-9.14"/>
<polylinepoints="2241214.01911.01"/>
</svg>
<span>烹饪时间：90分钟</span>
</div>
<divclass="meta-item">
<svgviewBox="002424"fill="none"stroke="currentColor"stroke-width="2">
<pathd="M1721v-2a44000-4-4H5a44000-44v2"/>
<circlecx="9"cy="7"r="4"/>
<pathd="M2321v-2a44000-3-3.87"/>
<pathd="M163.13a4400107.75"/>
</svg>
<span>份量：4人份</span>
</div>
</div>
</div>
<divclass="detail-section">
<h3>食材清单</h3>
<ulclass="ingredients-list">
<li>五花肉500克</li>
<li>姜片10片</li>
<li>葱段适量</li>
<li>八角2个</li>
<li>桂皮1小段</li>
<li>香叶2片</li>
<li>料酒2汤匙</li>
<li>生抽3汤匙</li>
<li>老抽1汤匙</li>
<li>冰糖30克</li>
<li>盐适量</li>
</ul>
</div>
<divclass="detail-section">
<h3>烹饪步骤</h3>
<olclass="steps-list">
<li>五花肉切成2.5厘米见方的块，冷水下锅，加入姜片和料酒，大火烧开后撇去浮沫，捞出沥干水分。</li>
<li>锅中不放油，直接放入五花肉块，小火煸炒至表面微黄，逼出油脂后盛出。</li>
<li>锅中留少许底油，放入冰糖，小火慢慢炒至冰糖融化并变成焦糖色。</li>
<li>迅速倒入煸炒好的五花肉块，翻炒均匀，让每块肉都裹上糖色。</li>
<li>加入姜片、葱段、八角、桂皮和香叶，翻炒出香味。</li>
<li>加入生抽和老抽，翻炒均匀使肉块上色。</li>
<li>加入开水，水量要没过肉块，大火烧开后转小火慢炖60-90分钟。</li>
<li>炖至肉质酥烂后，加入适量盐调味，大火收汁至汤汁浓稠即可。</li>
</ol>
</div>
</section>
<!--食谱详情：宫保鸡丁-->
<sectionid="gongbaojiding"class="recipe-detail">
<divclass="detail-header">
<h2>宫保鸡丁</h2>
<img
src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=Chinese%20kung%20pao%20chicken%20with%20peanuts%20and%20dried%20chilies%20on%20white%20plate%20professional%20food%20photography&image_size=landscape_16_9"
alt="宫保鸡丁">
<divclass="detail-meta">
<divclass="meta-item">
<svgviewBox="002424"fill="none"stroke="currentColor"stroke-width="2">
<circlecx="12"cy="12"r="10"/>
<polylinepoints="12612121614"/>
</svg>
<span>准备时间：20分钟</span>
</div>
<divclass="meta-item">
<svgviewBox="002424"fill="none"stroke="currentColor"stroke-width="2">
<pathd="M2211.08V12a1010011-5.93-9.14"/>
<polylinepoints="2241214.01911.01"/>
</svg>
<span>烹饪时间：15分钟</span>
</div>
<divclass="meta-item">
<svgviewBox="002424"fill="none"stroke="currentColor"stroke-width="2">
<pathd="M1721v-2a44000-4-4H5a44000-44v2"/>
<circlecx="9"cy="7"r="4"/>
<pathd="M2321v-2a44000-3-3.87"/>
<pathd="M163.13a4400107.75"/>
</svg>
<span>份量：3人份</span>
</div>
</div>
</div>
<divclass="detail-section">
<h3>食材清单</h3>
<ulclass="ingredients-list">
<li>鸡胸肉300克</li>
<li>花生50克</li>
<
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2026年《营养学基础》高频考点题库及答案
- 软件开发服务协议解除函（4篇）
- 2026年客户信用评估体系优化计划通知7篇
- 商业中心开发工程延期情况说明函3篇范本
- 运营部门运营效率绩效考评表
- 电子行业供应链整合与物联网应用邀请函（5篇）范文
- 人力资源招聘与面试评估操作手册
- 2026年辽阳市宏伟区中小学教师招聘考试参考试题及答案详解
- 2026年洛阳市吉利区中小学教师招聘笔试备考试题及答案详解
- 2026年上海市黄浦区中小学教师招聘笔试参考题库及答案详解
- 圆机操作工作业指导书
- 科技局遴选公务员面试经典题及答案
- 初中化学第一单元测试题及答案
- JJG 667-2025液体容积式流量计检定规程
- T/CASTEM 1006-2022科技评估报告编制通用要求
- 2025年天津市十二区重点学校毕业班高考英语联考试卷（一）
- 《大学生心理健康》课件全套 侯瑞鹤 主题1-10 心理健康课：送给自己大学生活的礼物-生命与成长：踏上成为自己的英雄之旅
- CNAS-GL033-2018 建设领域典型检验检测设备计量溯源指南
- 《Python金融数据分析与挖掘（微课版）》全套教学课件
- 人工智能大模型
- 初二物理期末试卷带答案
评论
0/150
提交评论