AI生成式探究学习教学辅助设计单-5.4 购物车商品列表制作.docx

AI生成式探究学习教学辅助设计单

使用AI名称：DeepSeek班级：学生姓名：

子任务名称

提示词

AI的回应

对AI回应的评价

我的收获

第五模块网站页面布局

5.4购物车商品列表制作

使用HTML5，CSS3，弹性布局相关属性。完成一个移动端商品列表展示的制作，给出案例代码。

以下是一个使用HTML5、CSS3和弹性布局（Flexbox）来制作移动端商品列表页面的示例代码。这个示例展示了一个3行2列的商品列表。

---

!DOCTYPEhtml

htmllang=en

head

metacharset=UTF-8

metaname=viewportcontent=width=device-width,initial-scale=1.0

title商品列表/title

linkrel=stylesheethref=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

/body

/html

---

###3.CSS样式styles.css文件

/*基本样式重置*/

*{

margin:0;

padding:0;

box-sizing:border-box;

}

body{

font-family:Arial,sans-serif;

display:flex;

justify-content:center;

align-items:center;

height:100vh;

background-color:#f0f0f0;

}

.container{

display:flex;

flex-wrap:wrap;

width:90%;

max-width:600px;/*最大宽度以适应移动端*/

}

.item{

flex:1033.33%;/*每个项目占据1/3的宽度*/

padding:10px;

background-color:#fff;

margin:5px;

box-shadow:02px4pxrgba(0,0,0,0.1);

text-align:center;

border-radius:4px;

}

.itemimg{

max-width:100%;

height:auto;

border-radius:4px;

}

.itemh3{

margin:10px0;

font-size:16px;

}

.itemp{

color:#666;

font-size:14px;

}

###4.功能说明

这个示例代码使用了Flexbox布局，使得每个商品项在容器内自动调整大小并排列成3行2列。CSS部分还添加了一些基本的样式，包括内边距、背景颜色、阴影和圆角，使页面看起来更加美观。

DeepSeek非常严谨的使用了提示词当中的Web前端技术，完成了案例的制作和代码的输出。将代码运行到Hbuilder环境当中可以得到这样的一个结果。

AI给出的案例代码。兼顾了功能，样式设计。需要仔细阅读一遍。理解模型给出的代码的语法逻辑，并且和教材当中的案例进行对比学习。

AI生成式辅助学习方法，功能非常强大。从另外一个角度非常严谨完整的给出了另外一种设计方法，代码的书写。打开了学习Web前端页面布局模块中弹性布局的思维定式和畏难情绪。