AI生成式探究学习教学辅助设计单-5.3 购物车图标制作.docx

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

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

子任务名称

提示词

AI的回应

对AI回应的评价

我的收获

第五模块网站页面布局

5.3购物车图标的制作

使用HTML5，CSS3，定位相关属性。完成购物车页面上购物车按钮显示在右下角位置的制作，给出案例代码。

使用HTML5和CSS3完成的购物车页面布局示例代码，其中购物车按钮固定在页面的右下角位置。这种布局常见于电商网站，方便用户随时访问购物车。

---

!DOCTYPEhtml

htmllang=zh-CN

head

metacharset=UTF-8

metaname=viewportcontent=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