AI生成式探究学习教学辅助设计单-5.1 简单计算器的制作_第1页
AI生成式探究学习教学辅助设计单-5.1 简单计算器的制作_第2页
AI生成式探究学习教学辅助设计单-5.1 简单计算器的制作_第3页
AI生成式探究学习教学辅助设计单-5.1 简单计算器的制作_第4页
AI生成式探究学习教学辅助设计单-5.1 简单计算器的制作_第5页
已阅读5页，还剩3页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

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前端技术，完成了案例的制作和代码的输出。将代码运行到h

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论