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

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

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

子任务名称

提示词

AI的回应

对AI回应的评价

我的收获

第五模块网站页面布局

5.1电子礼盒设计制作

使用HTML5，CSS3，盒子模型相关属性。完成父亲节专属的购物网页设计的制作，给出案例代码。

下面是一个简单的父亲节专属购物网页设计的案例代码，使用了HTML5和CSS3，并应用了盒子模型的相关属性。

---

###1.HTML结构

!DOCTYPEhtml

htmllang=zh-CN

head

metacharset=UTF-8

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

title父亲节专属购物/title

linkrel=stylesheethref=styles.css

/head

body

header

h1父亲节专属购物/h1

p为爸爸挑选最棒的礼物！/p

/header

main

sectionclass=product

imgsrc=gift1.jpgalt=礼物1

h2豪华剃须刀/h2

p让爸爸每天都能享受舒适的剃须体验。/p

pclass=price￥499/p

button加入购物车/button

/section

sectionclass=product

imgsrc=gift2.jpgalt=礼物2

h2男士香水/h2

p经典男士香水，展现爸爸的独特魅力。/p

pclass=price￥299/p

button加入购物车/button

/section

sectionclass=product

imgsrc=gift3.jpgalt=礼物3

h2智能手表/h2

p健康监测，智能提醒，爸爸的健康助手。/p

pclass=price￥899/p

button加入购物车/button

/section

/main

footer

pcopy;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{