网页设计与制作 课件 o29 AI生成网页初稿.pptxVIP

;入门测

作业分析

知识回顾

%单位

vw（视口宽度）和vh（视口高度）单位

1vw等于视口宽度的1%

1vh等于视口高度的1%

rem和em单位

通常用来设置字体

;请扮演一位前端工程师，用一句不超过120字的自然语言提示词，驱动AI自动生成一份环保主题的响应式首页初稿。

该初稿必须同时满足以下要求：

结构完整：包含固定在顶部的导航栏（LOGO与5个一级菜单）、全屏轮播Banner（自动切换3张环保主题高清图）、栅格布局的图文卡片区（至少4张卡片，每张含16:9图片、标题、80字以内摘要、绿色“了解详情”按钮）。

响应式适配：在320～1920px视口宽度下，导航栏自动折叠成汉堡菜单，Banner文字保持居中，图文卡片由4→2→1列弹性布局。

品牌色统一：主色使用#95c62e，辅色使用#f4f9ea，背景留白，鼠标悬停在按钮上时颜色加深10%。

可访问性：所有图片必须带alt文本，按钮与文字对比度≥4.5:1，动画默认关闭prefers-reduced-motion。

代码规范：输出HTML5+CSS3（Flex+Clamp）+一行内联JavaScript控制轮播，代码保持语义化、缩进2空格、中文注释。

最终交付：可下载的zip源码包，解压后双击index.html即可在浏览器正常预览，无需