目录
成品:
任务描述
源码：
详细讲解：
1.导航栏讲解
2.主体部分
3.图像部分
4.评分部分
5.按钮部分
6.配置信息部分
7.响应式设计
成品:
任务描述
创建一个产品展示页面，包括以下内容：
- 网页结构：使用 HTML 标签构建页面的基本结构，包括导航栏、产品图片、产品描述、价格信息、购物车按钮等部分。
- 页面内容：页面中包括一个产品的图片、名称、详细描述、价格和“添加到购物车”按钮。
- 样式：使用 CSS 进行页面布局和样式设计，使用 CSS Flexbox 实现响应式设计，使页面在不同设备上看起来都很美观。
- 交互效果：为按钮添加悬停效果（hover），并使用伪类选择器添加一些简单的动画效果。
要求
- 使用
HTML创建网页的基本结构，包括<!DOCTYPE html>、<html>、<head>、<body>等标签。 - 使用
CSS修改页面的背景颜色、设置字体、图片大小和样式、按钮样式等。 - 使用
CSS Flexbox实现页面布局，使页面在不同尺寸的设备上都能良好显示。 - 使用伪类选择器（如
:hover）为按钮添加悬停效果。 - 使用媒体查询实现响应式设计。
源码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>产品详情页</title><style>body {margin: 0;padding: 0;background-color: #f4f4f4;color: #333;}/* 导航栏部分 */header{background-color:rgb(87, 87, 87);/* 固定显示 */position: fixed;top: 0px;width: 100%;}header ul{/* 去除无序列表的装饰 */list-style-type: none;display: flex;justify-content: center;padding: 0;margin: 0;}header li{margin: 0px 20px;}header a{color: white;text-decoration: none;padding: 15px 20px;display: block;}header ul li a:hover{background-color: rgb(137, 137, 137);}/* 主体部分 */.st1{ background-color: white;/* 居中对齐 */align-items: center;justify-content: center;margin-top: 100px;margin-right: 100px;margin-left: 100px;padding: 20px;/* 分栏显示 */display: flex;/* 左右两侧之间的间距 */gap: 60px;/* 圆角处理 */border-radius: 10px;/* 阴影 */box-shadow: 0 2px 4px rgba(0, 0, 0,0.4);}/* 图像部分 */.left img {max-width: 100%;border-radius: 8px;transition: transform 0.5s, background-color 0.5s;}.left img:hover {transform: scale(1.1);}/* 右侧部分 */.right{width: 500px;max-width: 100%;}/* 评分 */.a{background-color: rgb(195, 195, 195);width: 100%;height: 15px;border-radius: 5px;margin: 10px 0;}.b{background-color: green;height: 15px;text-align: center;color: aliceblue;}/* 小字部分 */.st2{margin-top: 0px;/* 分两侧显示 */display: flex;justify-content: space-between;}.st2 div{font-size: small;color: rgb(62, 62, 62);}/* XYZ官网链接 */.website a{font-size: small;color: rgb(61, 156, 175);/* 去除下划线 */text-decoration: none;}/* 价格一行 */.st3{align-items: center;/* 分两侧显示 */display: flex;/* 设置两则中间为空格 */justify-content: space-between;}/* 添加到购物车按钮 */.st3 .button1{background-color: rgb(241, 241, 82);border: none;border-radius: 10px;padding: 15px;font-weight: bold;/* 鼠标选中时，鼠标转化为指针 */cursor: pointer;}.st3 .button1:hover{background-color: rgb(222, 193, 27);}/* 现在购买按钮 */.st3 .button2{background-color: rgb(255, 140, 0);border: none;border-radius: 10px;padding: 15px;font-weight: bold;cursor: pointer;}.st3 .button2:hover{background-color: rgb(188, 104, 2);}/* 价格显示 */.st3 .piece{color: red;font-size: 30px;}.st3 .text{font-size: large;}/* 配置表格 */table{width: 100%;/* 单元格之间没有间隙,连成一条线 */border-collapse: collapse;}table .c {/* 加粗 */font-weight: bold;width: 30%;}table td {padding: 10px;border-bottom: 1px solid #ccc;}/* 响应式设计 */@media (max-width: 768px) {.st1 {flex-direction: column;gap: 20px;margin:0px 10px 20px 10px;padding: 15px;}header{position: unset;}header ul {flex-direction: column;}header li{margin: 0;}.button1, .button2 {width: 100%;padding: 10px;}}</style></head>
<body><header><ul><li><a href="">产品图片</a></li><li><a href="">产品描述</a></li><li><a href="">价格信息</a></li><li><a href="">规格详情</a></li><li><a href="">购物车</a></li></ul></header><section class="st1"><div class="left"><div><img src="https://m.media-amazon.com/images/I/815uX7wkOZS._AC_SX679_.jpg" alt="图片加载失败"></div></div><div class="right"><h3>XYZ 超轻薄笔记本电脑 AI超能本</h3><p style="font-size: larger;">XYZ 14 笔记本电脑，英特尔赛扬 N4020，4 GB RAM，64 GB 存储，14 英寸微边高清显示屏，Windows 11 家庭版，轻薄便携，4K 显卡，一年 Microsoft 365（14-dq0040nr，雪花白）</p><p class="website"><a href="#www.XYZ.com">访问XYZ官网</a></p><p><div class="a"><div class="b" style="width: 89%; font-size: 10px; ">89%好评</div></div></p><div class="st2"><div>英特尔赛扬|4G+512G|快速充电</div><div>已售20万+</div></div><hr><div class="st3"><div style="display: flex; align-items: center;"><p class="piece">￥6999</p><p class="text">到手价</p></div><div><div style="display: flex; align-items: center;"></div><button type="submit" class="button1">添加到购物车</button><button type="submit" class="button2">现在购买</button></div></div><table cellspacing="10"><tr><td class="c">品牌</td> <td>XYZ</td></tr><tr><td class="c">型号名称</td> <td>14-dq0040nr</td></tr><tr><td class="c">屏幕大小</td><td>14英寸</td></tr><tr><td class="c">颜色</td><td>雪花白</td></tr><tr><td class="c">硬盘大小</td><td>512GB</td></tr><tr><td class="c">CPU型号</td><td>Celeron N4020</td></tr><tr><td class="c">运行内存</td><td>4GB</td></tr><tr><td class="c">操作系统</td><td>Windows 11 S</td></tr><tr><td class="c">特殊</td><td>微边边框</td></tr><tr><td class="c">显卡</td><td>集成显卡</td></tr></table></div></section></body>
</html>详细讲解：
1.导航栏讲解
css">/* css导航栏部分 */header{background-color:rgb(87, 87, 87);/* 固定显示 */position: fixed;top: 0px;width: 100%;
}
header ul{/* 去除无序列表的装饰 */list-style-type: none;display: flex;justify-content: center;padding: 0;margin: 0;
}
header li{margin: 0px 20px;
}header a{color: white;text-decoration: none;padding: 15px 20px;display: block;
}header ul li a:hover{background-color: rgb(137, 137, 137);
}
<header><ul><li><a href="">产品图片</a></li><li><a href="">产品描述</a></li><li><a href="">价格信息</a></li><li><a href="">规格详情</a></li><li><a href="">购物车</a></li></ul>
</header>(1). 导航栏的固定显示：position: fixed; 要掌握导航栏的创建。
2.主体部分
css">/* 主体部分 */
.st1{ background-color: white;/* 居中对齐 */align-items: center;justify-content: center;margin-top: 100px;margin-right: 100px;margin-left: 100px;padding: 20px;/* 分栏显示 */display: flex;/* 左右两侧之间的间距 */gap: 60px;/* 圆角处理 */border-radius: 10px;/* 阴影 */box-shadow: 0 2px 4px rgba(0, 0, 0,0.4);
}(1).align-items: center;和justify-content: center;的使用，表示居中。display: flex;表示并列显示；gap: 60px;表示每一部分之间的间距；
3.图像部分
css">/* css图像部分 */
.left img {max-width: 100%;border-radius: 8px;transition: transform 0.5s, background-color 0.5s;
}.left img:hover {transform: scale(1.1);
}<div class="left"><div><img src="https://m.media-amazon.com/images/I/815uX7wkOZS._AC_SX679_.jpg" alt="图片加载失败"></div>
</div>(1).transition: transform 0.1s, background-color 0.3s;
css">transition: [property] [duration] [timing-function] [delay];
property：指定要应用过渡效果的 CSS 属性。可以是单个属性，也可以是多个属性，用逗号分隔。duration：指定过渡效果的持续时间（时间单位如秒s或毫秒ms）。timing-function：指定过渡效果的时间曲线。delay：指定过渡效果的延迟时间（时间单位如秒s或毫秒ms）。
(2).transform: scale(1.03)
transform: scale(1.03)是 CSS 的一个变换属性，用于缩放元素。 scale() 函数是 transform 属性的一部分，用于改变元素的大小，而不改变其实际布局或位置。scale()括号中的值大于1表示放大，小于1表示缩小。
transform常用值：
translate(x, y)：移动元素的位置。rotate(angle)：旋转元素。scale(x, y)：缩放元素的大小。skew(x, y)：倾斜元素。matrix(a, b, c, d, e, f)：应用 2D 转换矩阵。
4.评分部分
css">/* 评分 */
.a{/* 进度条底色 */background-color: rgb(195, 195, 195);width: 100%;height: 15px;/* 圆角处理 */border-radius: 5px;margin: 10px 0;
}
.b{/* 进度条进度颜色 */background-color: green;height: 15px;text-align: center;color: aliceblue;
}<p><div class="a"><div class="b" style="width: 89%; font-size: 10px; ">89%好评</div></div>
</p>(1).掌握进度条如何构建即可。
5.按钮部分
css">/* 添加到购物车按钮 */
.st3 .button1{/* 按钮颜色 */background-color: rgb(241, 241, 82);/* 去除按钮边框 */border: none;/* 圆角处理 */border-radius: 10px;padding: 15px;/* 字体加粗 */font-weight: bold;/* 鼠标选中时，鼠标转化为指针 */cursor: pointer;
}.st3 .button1:hover{background-color: rgb(222, 193, 27);
}/* 现在购买按钮 */
.st3 .button2{/* 按钮颜色 */background-color: rgb(255, 140, 0);/* 去除按钮边框 */border: none;/* 圆角处理 */border-radius: 10px;padding: 15px;/* 字体加粗 */font-weight: bold;/* 鼠标选中时，鼠标转化为指针 */cursor: pointer;
}
.st3 .button2:hover{background-color: rgb(188, 104, 2);
}<div><div style="display: flex; align-items: center;"></div><button type="submit" class="button1">添加到购物车</button><button type="submit" class="button2">现在购买</button>
</div>(1).见代码解释。
6.配置信息部分
css">/* 配置表格 */
table{width: 100%;/* 单元格之间没有间隙,连成一条线 */border-collapse: collapse;
}
table .c {/* 加粗 */font-weight: bold;width: 30%;
}table td {padding: 10px;/* 单位格底线设置 */border-bottom: 1px solid #ccc;
}<table><tr><td class="c">品牌</td> <td>XYZ</td></tr><tr><td class="c">型号名称</td> <td>14-dq0040nr</td></tr><tr><td class="c">屏幕大小</td><td>14英寸</td></tr><tr><td class="c">颜色</td><td>雪花白</td></tr><tr><td class="c">硬盘大小</td><td>512GB</td></tr><tr><td class="c">CPU型号</td><td>Celeron N4020</td></tr><tr><td class="c">运行内存</td><td>4GB</td></tr><tr><td class="c">操作系统</td><td>Windows 11 S</td></tr><tr><td class="c">特殊</td><td>微边边框</td></tr><tr><td class="c">显卡</td><td>集成显卡</td></tr></table>(1). border-bottom: 1px solid #ccc;设置单元格底线为实线；border-collapse: collapse;去除间隙。
7.响应式设计
css">/* 响应式设计 */
/* 当宽度小于768时，就会生效 */
@media (max-width: 768px) {.st1 {/* 将拍板为竖式排版 */flex-direction: column;gap: 20px;margin:0px 10px 20px 10px;padding: 15px;}header{position: unset;}header ul {/* 将拍板为竖式排版 */flex-direction: column;}header li{margin: 0;}.button1, .button2 {width: 100%;padding: 10px;}
}(1).当用手机端打开网页时，能够正常观看。
完
