网页基础开发教程 4

项目12AI+综合项目实现2AI辅助制作信创公司网站页面通过AI指令快速拆分公共组件并在多页复用，确保全站风格一致性。运用Flex布局实现横向卡片、图文混排及对齐等高区块，提升开发效率。运用Grid布局完成二维栅格、服务流程与能力矩阵，实现精准对齐与响应。借助CSS变量与模块化命名，统一管理主题色、字号、间距，提升可维护性。掌握AI生成代码的审查与优化方法，确保语义、性能、可访问性达标。任务描述任务实现任务小结任务测试与考核实训制作赋能服务页和资源中心页本部分以“需求→原型→设计→编码”流程为蓝本：在上一章纯手工成果之上，借助AI极速落地“解决方案页”与“资源中心页”。两页直接复用已写好的header、固定侧边栏与footer，保持1200px版心、蓝色主题与黑体字号体系；主体区域全面采用Flex与Grid现代布局：赋能服务页用Flex卡片呈现行业方案与优势对比，解决方案页用Grid矩阵展示服务流程与技术能力。精灵图、字体图标、关键帧动画均由AI补全，开发者仅需微调即可交付。项目描述制作赋能服务页面赋能服务页延续全站统一蓝白科技风格，由网页头部、固定侧边栏、主内容区及页脚四大部分组成。（1）HTML结构复用原导航栏与固定侧边栏、页脚轮播图区：1个全宽容器，内嵌3幅横幅div，每幅含主标题与2–3行描述文字，底部3个圆点指示方案展示区：

–总容器分左、右两栏

–左栏3×5网格，15张服务卡片（图标＋标题＋简述＋查看详情按钮）

–右栏单列：小轮播图卡片、小程序二维码卡片、公众号二维码卡片依次排列项目描述（2）CSS样式轮播图全宽，背景图居中裁切，标题版心1200px水平居中；淡入淡出3s循环，底部圆点指示，悬停暂停方案展示浅灰背景，标题黑体48px居中，上下60px间距左栏网格gap20px，卡片300×200px，白底圆角，顶部4px彩条，悬停微抬加阴影右栏三卡片均240px宽、180px高，轮播图带圆点指示，二维码卡片纯白居中，文字12px灰色1100px以下右栏隐藏，左栏卡片自适应缩放，布局完整可读。制作资源中心页面解决方案页延续全站统一风格，由网页头部、固定侧边栏、主内容区及页脚四大区域组成，（1）HTML结构网页头部：复用网站首页的头部结构（Logo、主导航、登录/注册按钮）全宽轮播：3幅高图＋半透明遮罩，版心1200px左侧白字标题/副标题，底部圆点指示器方案展示：h2居中标题；五行卡片区（3-4-2-5-4张），每卡含图、标题、简述、“了解更多”按钮固定侧边栏：复用网站首页的固定侧边栏样式页脚：复用网站首页的页脚样式项目描述（2）CSS样式通过通配符设置所有元素的外边距和内边距为0；整体页面通版展示；整体字体类型为“黑体”，默认字体大小为16px；整体页面字体大小主要有48px、32px、24px、16px；整体页面色调为蓝色（#0066ff）；轮播图视口高30%，淡入淡出自动播，圆点可点击切换方案区浅灰背景，白卡圆角阴影，悬停上浮4px版心1200px居中；≥1200px按指定列数网格布局，350–1199px自动缩放，＜325px单列285px卡片图居中带10px边距，标题加粗，按钮左下10px主题色响应式字号、间距、图片比例自动缩小，保证移动端触控体验任务描述知识准备任务实现任务小结任务测试与考核实训制作赋能服务页面

见实训手册2制作资源中心页面见实训手册2任务描述知识准备任务实现任务小结任务测试与考核实训总结任务描述知识准备任务实现任务小结任务测试与考核实训测试与考核4．AI生成代码后，开发者首要进行的步骤是（）。A.立即上线 B.删除源码 C.审查与微调 D.关闭项目一、单选题1．在AI辅助开发中，让Cursor复用已有样式文件的关键操作是（）。A.直接粘贴提示词 B.点击“@AddContext”加入上下文 C.重新编写CSS D.删除旧文件2．下列CSS属性中，用于实现卡片“悬停上浮+阴影加深”交互效果的是（

）。A.transform与box-shadow B.float与clearC.position与top D.display与visibility3．在Cursor中实时预览网页，应右键文件选择（

）。A.OpenwithBrowser B.OpenwithLiveServer C.RuninTerminal D.PreviewinAIB5.在Flex布局中，控制主轴对齐方式的属性是（

）。A.flex-direction B.justify-content C.align-items D.flex-wrap6.实现文字强制不换行，应使用（

）。A.white-space:nowrap B.word-break:break-all C.text-wrap:none D.line-break:strictABCBA测试与考核3.定义无序列表的标签是_______________。二、填空题1.HTML中，用于插入图片的标签是_______________。2.CSS设置元素透明度的属性是_______________。<img>4.将元素定位为相对于其正常位置进行偏移，应将position设置为_______________。5.设置元素最大宽度的CSS属性是_______________。opacity<ul>relativemax-width6.在Grid布局中，定义列宽的属性是_____________________________。grid-template-columns任务描述知识准备任务实现任务小结任务测试与考核实训完成科技强国页一、实训目的实训全程在Cursor编辑器内完成，要求“零手写代码、全AI指令”。

具体任务与考核点如下：AI工具链实战：掌握Cursor的Chat、Composer、Terminal三大核心模块，体验“提示词即生产”的敏捷开发。提示词工程：通过精准描述，让AI一次性生成符合视觉稿、语义化、可访问性、SEO、响应式的静态页面。视觉还原度：像素级还原原型图；允许对文字/图片进行可商用替换，但版式、配色、留白、字号、模块顺序必须1:1。性能与规范：产出代码通过W3C校验0Error、0Warning；Lighthouse评分≥95（性能、可访问性、最佳实践）。课程思政：在页面尾部注入“科技报国”标语，并添加alt、aria-label等无障碍属性，强化社会责任意识。完成科技强国页二、实训内容实训1.打开Cursor，打开智能对话框（快捷键Ctrl+i）2.将原型图（如图12-59）输入Cursor“智能对话框”，如果有需要参考的已完成网页可以添加上下文。3.根据需求输入相关提示词（以下提示词仅供参考）：请页面生成ScienceTechnology.html和css/ScienceTechnology.css两个文件（仅HTML+CSS，无JS）：

实现内容和结构请重点参考已上传原型图。（1）主题与文案：突出“科技强国、科技报国、关键核心技术自立自强、产学研用协同、强国建设、民族复兴”的思政导向。（2）布局与版心：banner区域banner-section：背景全宽（通版），高度约600px；内部内容容器banner-content宽度约束为max-width:1200px，左右安全边距40px，水平居中。banner区左右两列：左侧banner-left标题h1（大号字）、描述段落、主按钮；右侧banner-right为科技卡片矩阵/示意（不需要JS），有轻微阴影与悬停动效（hover）。后续区块（挑战、服务、AI、工具）按已有结构分区，主体内容继续使用1200px版心。（3）样式风格：主色：#0066ff；背景渐变：linear-gradient(135deg,#f0f4fc0%,#e8f2ff100%)用于banner区。字体层级：标题48/36/28/24px，正文18/16px，行高舒适（1.6~1.8）。卡片：圆角12~15px，阴影08px25pxrgba(0,0,0,0.1)，hover上浮与阴影增强。（4）响应式：≤1200px：容器宽度95%，适当缩小科技展示尺寸。≤768px：banner区改为上下布局、文本居中、左右间距缩到20px。≤480px：进一步降低字号与卡片尺寸。完成科技强国页二、实训内容实训（5）语义化与可维护性：仅使用HTML5语义标签（header/main/section/footer等）。使用已指定类名：banner-section、banner-content、banner-left、banner-right、banner-title、banner-description、banner-btn、tech-showcase、tech-card、connection-lines等。将页面专属样式集中到css/ScienceTechnology.css，不引入第三方框架。（6）资源占位：背景图使用images/bg1.png（可作为poster/背景）。其他示意图片/视频使用已有路径占位（无需添加新资源）。（7）兼容性与规范：兼容现代Chromium、Firefox、Safari。不要内联样式；保持缩进风格统一；不要引入外部CDN。（8）输出要求：完整ScienceTechnology.html（含head