版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
AI生成式探究学习教学辅助设计单使用AI名称：DeepSeek班级：学生姓名：子任务名称提示词AI的回应对AI回应的评价我的收获第五模块网站页面布局5.1电子礼盒设计制作使用HTML5，CSS3，盒子模型相关属性。完成父亲节专属的购物网页设计的制作，给出案例代码。 下面是一个简单的父亲节专属购物网页设计的案例代码，使用了HTML5和CSS3，并应用了盒子模型的相关属性。---###1.HTML结构<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>父亲节专属购物</title><linkrel="stylesheet"href="styles.css"></head><body><header><h1>父亲节专属购物</h1><p>为爸爸挑选最棒的礼物！</p></header><main><sectionclass="product"><imgsrc="gift1.jpg"alt="礼物1"><h2>豪华剃须刀</h2><p>让爸爸每天都能享受舒适的剃须体验。</p><pclass="price">¥499</p><button>加入购物车</button></section><sectionclass="product"><imgsrc="gift2.jpg"alt="礼物2"><h2>男士香水</h2><p>经典男士香水，展现爸爸的独特魅力。</p><pclass="price">¥299</p><button>加入购物车</button></section><sectionclass="product"><imgsrc="gift3.jpg"alt="礼物3"><h2>智能手表</h2><p>健康监测，智能提醒，爸爸的健康助手。</p><pclass="price">¥899</p><button>加入购物车</button></section></main><footer><p>©2023父亲节专属购物.保留所有权利。</p></footer></body></html>---###2.CSS样式```css/*styles.css*//*重置样式*/*{margin:0;padding:0;box-sizing:border-box;}body{font-family:Arial,sans-serif;line-height:1.6;background-color:#f4f4f4;color:#333;}header{background-color:#333;color:#fff;padding:20px;text-align:center;}headerh1{margin-bottom:10px;}main{display:flex;justify-content:space-around;flex-wrap:wrap;padding:20px;}.product{background-color:#fff;border:1pxsolid#ddd;border-radius:5px;width:30%;margin:10px;padding:20px;text-align:center;box-shadow:02px5pxrgba(0,0,0,0.1);}.productimg{max-width:100%;border-radius:5px;}.producth2{margin:15px0;font-size:1.5em;}.productp{margin:10px0;color:#666;}.product.price{font-size:1.2em;color:#e67e22;font-weight:bold;}.productbutton{background-color:#333;color:#fff;border:none;padding:10px20px;border-radius:5px;cursor:pointer;margin-top:10px;}.productbutton:hover{background-color:#555;}footer{background-color:#333;color:#fff;text-align:center;padding:10px;position:fixed;width:100%;bottom:0;}---###4.功能说明1.HTML结构：header
部分包含网页的标题和描述。main
部分包含多个
section，每个
section
代表一个商品。footer
部分包含版权信息。2.CSS样式：使用了
box-sizing:border-box;
来确保盒子模型的计算方式一致。flexbox
布局用于商品部分的排列，使其在不同屏幕尺寸下都能保持良好的布局。每个商品卡片使用了
box-shadow
来增加立体感。按钮的样式和悬停效果通过
background-color
和
color
属性来实现。3.响应式设计：通过
flex-wrap:wrap;
和
width:30%;
的设置，商品卡片在小屏幕设备上会自动换行，适应不同屏幕尺寸。4.图片资源gift1.jpg,
gift2.jpg,
gift3.jpg
是商品的图片，你需要准备这些图片并放在与HTML文件相同的目录下，或者修改图片路径以适应你的项目结构。5.运行效果将上述代码保存为
index.html
和
styles.css
文件，然后在浏览器中打开
index.html
文件，即可看到一个简单的父亲节专属购物网页。DeepSeek非常严谨的使用了提示词当中的web前端技术，完成了案例的制作和代码的输出。将代码运行到hbuilder环境当中可以得到这样的一个结果。AI给出的案例代码。兼顾了功能，样式设计。需要仔细阅读一遍。理解模型给出的代码的语法逻辑，并且和教材当中的案例进行对比学习。AI生成式辅助学习方法，功能非常强大。从另外一个角度非常严谨完整的给出了另外一种设计方法，代码的书写。打开了学习Web前端页面布局模块的思维定式和畏难情绪。AI生成式探究学习教学辅助设计单使用AI名称：DeepSeek班级：学生姓名：子任务名称提示词AI的回应对AI回应的评价我的收获第五模块网站页面布局5.2九宫格设计制作使用HTML5，CSS3，浮动方式相关属性。完成一个九宫格的制作，给出案例代码。 下面是一个使用HTML5和CSS3制作的九宫格案例代码，使用了浮动（float）属性来实现布局。---###1.HTML结构<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>九宫格布局</title><linkrel="stylesheet"href="styles.css"></head><body><divclass="container"><divclass="grid-item">1</div><divclass="grid-item">2</div><divclass="grid-item">3</div><divclass="grid-item">4</div><divclass="grid-item">5</div><divclass="grid-item">6</div><divclass="grid-item">7</div><divclass="grid-item">8</div><divclass="grid-item">9</div></div></body></html>---###2.CSS样式css/*styles.css*//*重置样式*/*{margin:0;padding:0;box-sizing:border-box;}body{font-family:Arial,sans-serif;background-color:#f4f4f4;display:flex;justify-content:center;align-items:center;height:100vh;}.container{width:300px;height:300px;background-color:#fff;border:2pxsolid#333;box-shadow:0010pxrgba(0,0,0,0.1);}.grid-item{width:33.33%;height:33.33%;float:left;border:1pxsolid#333;display:flex;justify-content:center;align-items:center;font-size:24px;font-weight:bold;background-color:#e67e22;color:#fff;transition:background-color0.3sease;}.grid-item:hover{background-color:#d35400;}/*清除浮动*/.container::after{content:"";display:table;clear:both;}---###4.功能说明1.HTML结构：使用一个
container
容器包裹了9个
grid-item，每个
grid-item
代表九宫格中的一个格子。2.CSS样式：使用
float:left;
实现格子的横向排列。每个格子的宽度和高度设置为
33.33%，确保三行三列的布局。使用
flexbox
将格子中的内容居中显示。添加了
hover
效果，当鼠标悬停在格子上时，背景颜色会发生变化。使用
::after
伪元素清除浮动，防止容器高度塌陷。3.响应式设计：九宫格的宽度和高度固定为
300px，你可以根据需要调整容器的大小，或者使用百分比来实现响应式布局。4.运行效果将上述代码保存为
index.html和
styles.css
文件，然后在浏览器中打开
index.html
文件，即可看到一个九宫格布局。每个格子中的数字表示格子的编号，鼠标悬停在格子上时，背景颜色会发生变化。你可以根据需要修改格子的内容和样式，例如添加图片或文字。DeepSeek非常严谨的使用了提示词当中的web前端技术，完成了案例的制作和代码的输出。将代码运行到hbuilder环境当中可以得到这样的一个结果。AI给出的案例代码。兼顾了功能，样式设计。需要仔细阅读一遍。理解模型给出的代码的语法逻辑，并且和教材当中的案例进行对比学习。AI生成式辅助学习方法，功能非常强大。从另外一个角度非常严谨完整的给出了另外一种设计方法，代码的书写。打开了学习Web前端页面布局模块的思维定式和畏难情绪。AI生成式探究学习教学辅助设计单使用AI名称：DeepSeek班级：学生姓名：子任务名称提示词AI的回应对AI回应的评价我的收获第五模块网站页面布局5.3购物车图标的制作使用HTML5，CSS3，定位相关属性。完成购物车页面上购物车按钮显示在右下角位置的制作，给出案例代码。 使用HTML5和CSS3完成的购物车页面布局示例代码，其中购物车按钮固定在页面的右下角位置。这种布局常见于电商网站，方便用户随时访问购物车。---<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>购物车页面-右下角购物车按钮</title><style>/*页面整体样式*/body{font-family:Arial,sans-serif;margin:0;padding:0;background-color:#f4f4f4;}/*页面内容区域*/.content{padding:20px;text-align:center;}/*购物车按钮容器*/.cart-button-container{position:fixed;/*固定定位*/bottom:20px;/*距离底部20px*/right:20px;/*距离右侧20px*/z-index:1000;/*确保按钮在最上层*/}/*购物车按钮*/.cart-button{width:60px;height:60px;background-color:#ff4757;/*红色背景*/border-radius:50%;/*圆形按钮*/display:flex;justify-content:center;align-items:center;color:#fff;/*白色文字*/font-size:24px;text-decoration:none;box-shadow:04px8pxrgba(0,0,0,0.2);/*阴影效果*/transition:background-color0.3sease;/*背景色过渡效果*/}/*购物车按钮悬停效果*/.cart-button:hover{background-color:#ff6b81;/*悬停时背景色变浅*/}/*购物车数量提示*/.cart-count{position:absolute;top:-5px;right:-5px;background-color:#333;/*黑色背景*/color:#fff;/*白色文字*/font-size:12px;width:20px;height:20px;border-radius:50%;/*圆形*/display:flex;justify-content:center;align-items:center;}</style></head><body><!--页面内容--><divclass="content"><h1>欢迎来到我的商店</h1><p>这里是商品展示区域。</p><p>向下滚动查看更多内容。</p><p>...</p><p>更多内容...</p><p>...</p><p>继续滚动...</p><p>...</p><p>到底了！</p></div><!--购物车按钮--><divclass="cart-button-container"><ahref="#"class="cart-button">🛒<!--购物车图标--><spanclass="cart-count">3</span><!--购物车数量提示--></a></div></body></html>---###4.功能说明1.页面整体样式：body设置了页面字体和背景颜色。.content是页面内容区域，用于展示商品信息。2.购物车按钮容器(.cart-button-container)：使用position:fixed将按钮固定在页面上。bottom:20px和right:20px将按钮定位在页面的右下角。z-index:1000确保按钮始终显示在最上层。3.购物车按钮(.cart-button)：使用width和height设置按钮大小，border-radius:50%使其变成圆形。使用display:flex将购物车图标和数量提示居中。背景色为红色（#ff4757），文字为白色。添加了阴影效果（box-shadow）和悬停效果（hover）。4.购物车数量提示(.cart-count)：使用position:absolute将数量提示定位在按钮的右上角。背景为黑色，文字为白色，形状为圆形5.页面内容区域(.content)：用于展示页面主要内容，包含一些占位文本。效果：页面右下角固定显示一个圆形的购物车按钮。按钮背景为红色，包含一个购物车图标（🛒）和数量提示（例如“3”）。当用户滚动页面时，按钮始终保持在右下角位置。悬停按钮时，背景色会变浅，提供交互反馈。DeepSeek非常严谨的使用了提示词当中的Web前端技术，完成了案例的制作和代码的输出。将代码运行到Hbuilder环境当中可以得到这样的一个结果。AI给出的案例代码。兼顾了功能，样式设计。需要仔细阅读一遍。理解模型给出的代码的语法逻辑，并且和教材当中的案例进行对比学习。AI生成式辅助学习方法，功能非常强大。从另外一个角度非常严谨完整的给出了另外一种设计方法，代码的书写。打开了学习Web前端页面布局模块中定位的思维定式和畏难情绪。AI生成式探究学习教学辅助设计单使用AI名称：DeepSeek班级：学生姓名：子任务名称提示词AI的回应对AI回应的评价我的收获第五模块网站页面布局5.4购物车商品列表制作使用HTML5，CSS3，弹性布局相关属性。完成一个移动端商品列表展示的制作，给出案例代码。 以下是一个使用HTML5、CSS3和弹性布局（Flexbox）来制作移动端商品列表页面的示例代码。这个示例展示了一个3行2列的商品列表。---<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>商品列表</title><linkrel="stylesheet"href="styles.css"></head><body><divclass="container"><divclass="item">商品1</div><divclass="item">商品2</div><divclass="item">商品3</div><divclass="item">商品4</div><divclass="item">商品5</div><divclass="item">商品6</div></div></
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 铁路运输企业绩效管理考核方案
- 私募股权公司绩效管理考核标准
- 装饰装修施工现场临电方案
- 2026-2030中国桑叶市场运营模式与未来前景预测分析研究报告
- 2026年注册土木工程师（水利水电）之专业知识试题预测试卷及参考答案详解AB卷
- 分散式风电项目退役处置技术方案
- 传感器模组公司绩效管理方案
- 2026年中式烹调师考前冲刺测试卷包及完整答案详解（历年真题）
- 固体废弃物资源化利用和处置项目设备巡检维护方案
- 2026年质量员(土建质量基础知识)预测复习附完整答案详解【网校专用】
- 正确使用酒精灯的课件
- 消防队道路交通事故救援
- 卫生院控烟培训课件
- ECMO辅助下心脏移植患者围术期管理方案
- 中药制剂室建设方案
- 2025年陕西延长石油(集团)有限责任公司管理人才招聘考试考点笔试题库及答案
- 小学生讲解西湖
- 2025年湖北省中考数学真题试题（含答案解析）
- 银行反诈宣传课件教学
- 2025年泰安市中考历史试题卷（含答案及解析）
- 2025年临沂市中考地理试卷（含答案解析）
评论
0/150
提交评论