页面设计任务 商品详情页(带评论区)

2024-08-26 20:20
文章标签 设计 页面 商品 评论 任务 详情页

本文主要是介绍页面设计任务 商品详情页(带评论区)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目录

效果图：

任务描述

源码：

详细讲解：

1.产品信息部分

2.用户评论区域

效果图：

 

任务描述

  1. 页面结构:

    • 页面应包括一个标题部分、一个产品展示区和一个客户评价区。
    • 使用图片展示产品，并添加描述。
    • 客户评价区展示一些用户的评价。

  2. 页面内容:

    • 标题部分：显示一个大标题和副标题。
    • 产品展示区：展示一张产品图片，并包含产品名称、价格和描述。
    • 客户评价区：显示几条用户评论，每条评论包含用户名和评论内容。

  3. 样式:

    • 使用 CSS 设置背景颜色、文本颜色和字体。
    • 使用不同的字体大小和颜色来区分标题和正文。
    • 为产品图片添加边框和阴影效果。
    • 使用网格布局（CSS Grid）或弹性盒布局（Flexbox）来组织页面内容。
    • 设置客户评价区的背景颜色，并使用内边距和边距来调整布局。

源码：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>XYZ笔记本电脑</title><style>/* 全局样式设置 */body {margin: 0; /* 移除浏览器默认的外边距 */padding: 0; /* 移除浏览器默认的内边距 */font-family: Arial, sans-serif; /* 设置字体为Arial */background-color: #f4f4f4; /* 设置背景颜色为浅灰色 */}/* 容器样式设置 */.container {width: 90%; /* 宽度设置为父容器的90% */max-width: 1200px; /* 最大宽度设置为1200px */margin: 0 auto; /* 水平居中对齐 */padding: 20px; /* 内部填充20px */background-color: #fff; /* 背景颜色为白色 */}/* 主内容布局样式 */.home {display: grid; /* 使用CSS网格布局 */grid-template-columns: 1fr 1fr; /* 设置两列布局 */gap: 20px; /* 列之间的间距 */align-items: center; /* 垂直方向对齐内容 */}/* 图片样式设置 */.home img {width: 100%; /* 图片宽度占满父容器 */height: auto; /* 高度自适应 */border-radius: 5px; /* 圆角边框 */}/* 产品标题样式设置 */.goods h3 {font-size: 24px; /* 字体大小 */color: #333; /* 字体颜色 */}/* 产品描述样式设置 */.goods p {font-size: 16px; /* 字体大小 */color: #555; /* 字体颜色 */line-height: 1.5; /* 行高，增加可读性 */}/* 链接样式设置 */.goods a {color: #5690c2; /* 链接颜色 */text-decoration: none; /* 去掉下划线 */font-size: 14px; /* 字体大小 */}/* 销售进度条背景样式设置 */.goods .pl1 {background-color: #bdbdbd; /* 背景颜色 */width: 50%; /* 宽度为50% */height: 20px; /* 高度为20px */border-radius: 5px; /* 圆角边框 */margin: 10px 0; /* 上下外边距 */}/* 销售进度条实际进度样式设置 */.goods .pl2 {background-color: green; /* 背景颜色 */height: 100%; /* 高度占满背景 */width: 82%; /* 宽度表示销售进度的百分比 */border-radius: 5px; /* 圆角边框 */text-align: center; /* 文本居中对齐 */color: white; /* 文本颜色 */line-height: 20px; /* 文本垂直居中 */}/* 配置选项按钮样式设置 */.goods .opt button {background-color: #fff; /* 背景颜色 */border: 2px solid #c7c7c7; /* 边框颜色 */border-radius: 10px; /* 圆角边框 */margin: 5px; /* 外边距 */padding: 10px; /* 内部填充 */cursor: pointer; /* 鼠标悬停时显示为手指图标 */font-size: 15px; /* 字体大小 */}/* 选中的配置按钮样式设置 */.goods .opt button.active-border {border-color: #030303; /* 选中状态的边框颜色 */font-weight: bold; /* 选中状态的字体加粗 */}/* 产品价格样式设置 */.goods .piece {color: #ce4444; /* 字体颜色 */font-size: 17px; /* 字体大小 */}/* 产品规格表样式设置 */.tab1 table {width: 100%; /* 表格宽度占满父容器 */border-collapse: collapse; /* 合并边框 */margin-top: 20px; /* 顶部外边距 */}/* 表格单元格样式设置 */.tab1 table td {border-bottom: 1px solid #8e8d8d; /* 下边框颜色 */padding: 10px; /* 内部填充 */}/* 表格标题单元格样式设置 */.tab1 .td1 {font-weight: bold; /* 粗体显示 */}/* 用户评论区域样式设置 */.mark {margin-top: 50px; /* 顶部外边距 */}/* 单个用户评论样式设置 */.mark .user1 {border-bottom: 1px solid #8f8f8f; /* 下边框颜色 */padding-bottom: 20px; /* 底部内边距 */margin-bottom: 20px; /* 底部外边距 */}/* 用户信息部分样式设置 */.top1 {display: flex; /* 使用flex布局 */gap: 10px; /* 头像和名称之间的间距 */align-items: center; /* 垂直方向对齐 */}/* 用户头像样式设置 */.top1 .pic3 {width: 50px; /* 头像宽度 */height: 50px; /* 头像高度 */border-radius: 50%; /* 圆形头像 */}/* 用户评论评分部分样式设置 */.mid1 {display: flex; /* 使用flex布局 */gap: 10px; /* 评分进度条和文本之间的间距 */align-items: center; /* 垂直方向对齐 */}/* 评分进度条背景样式设置 */.div2 {background-color: #bdbdbd; /* 背景颜色 */width: 100px; /* 进度条宽度 */height: 20px; /* 进度条高度 */border-radius: 5px; /* 圆角边框 */}/* 实际评分进度样式设置 */.div3 {background-color: green; /* 背景颜色 */height: 100%; /* 高度占满背景 */border-radius: 5px; /* 圆角边框 */color: white; /* 文本颜色 */text-align: center; /* 文本居中对齐 */line-height: 20px; /* 文本垂直居中 */}/* 评论评分文本样式设置 */.div4 {font-weight: bold; /* 字体加粗 */font-size: 14px; /* 字体大小 */color: #555; /* 字体颜色 */}/* 用户评论文本样式设置 */.down1 p {font-size: 16px; /* 字体大小 */color: #333; /* 字体颜色 */}/* 响应式设计：调整屏幕宽度小于768px时的布局 */@media (max-width: 768px) {.home {grid-template-columns: 1fr; /* 切换为单列布局 */}}</style><script>/* JavaScript函数：处理按钮选择和活动状态 */function selectButton(button) {var buttons = document.getElementsByClassName('my-button'); /* 获取所有具有 'my-button' 类的按钮 */for (var i = 0; i < buttons.length; i++) {buttons[i].classList.remove('active-border'); /* 移除所有按钮的活动边框类 */}button.classList.add('active-border'); /* 为当前按钮添加活动边框类 */}</script>
</head>
<body><div class="container"><!-- 产品展示区域 --><section class="home"><!-- 产品图片部分 --><div class="picture"><img src="https://m.media-amazon.com/images/I/51PsNbMd-CL._AC_SX679_.jpg" alt="XYZ笔记本电脑"></div><!-- 产品信息部分 --><div class="goods"><h3>XYZ笔记本电脑</h3> <!-- 产品标题 --><p>XYZ 2023 款最新 Chromebook 笔记本电脑，14 英寸显示屏，英特尔赛扬 N4120 处理器，4GB RAM，64GB eMMC，英特尔 UHD 显卡 600，WiFi，蓝牙，Chrome 操作系统，现代灰色</p> <!-- 产品描述 --><p><a href="#XYZhome">访问XYZ官网</a></p> <!-- 官网链接 --><!-- 销售进度条 --><div class="pl1"><div class="pl2">82%</div> <!-- 进度条表示销售进度 --></div><p>40万+已售</p> <!-- 销售数量 --><hr> <!-- 分隔线 --><!-- 配置选项按钮 --><div class="opt"><button type="button" class="my-button" onclick="selectButton(this)"><span>4GB RAM | 64GB eMMC</span><span class="piece">￥177.90</span></button><button type="button" class="my-button" onclick="selectButton(this)"><span>8GB RAM | 128GB eMMC</span><span class="piece">￥257.90</span></button><button type="button" class="my-button" onclick="selectButton(this)"><span>16GB RAM | 512GB eMMC</span><span class="piece">￥559.90</span></button></div><!-- 产品规格表 --><div class="tab1"><table><tr><td class="td1">品牌</td><td>XYZ</td></tr><tr><td class="td1">型号</td><td>XYZ Chromebook</td></tr><tr><td class="td1">屏幕尺寸</td><td>14英寸</td></tr><tr><td class="td1">CPU型号</td><td>Celeron N</td></tr><tr><td class="td1">操作系统</td><td>Chrome OS</td></tr><tr><td class="td1">图形处理器</td><td>Intel UHD Graphics 600</td></tr></table></div></div></section><!-- 用户评论区域 --><section class="mark"><h3>来自中国的热门评论</h3> <!-- 评论标题 --><!-- 用户1评论 --><div class="user1"><div class="top1"><img src="https://m.media-amazon.com/images/S/amazon-avatars-global/default.png" alt="用户头像" class="pic3"><p>Mike</p> <!-- 用户名 --></div><div class="mid1"><div class="div2"><div class="div3" style="width: 79%;">79%</div> <!-- 用户评分进度条 --></div><div class="div4">非常棒的一次购物，开机速度很快</div> <!-- 用户评分文字描述 --></div><div class="down1"><p>这款 chromebook 本身就具有价值。它启动速度很快，没有任何问题。它适用于日常计算。图形清晰锐利，不伤眼睛。屏幕为 14 英寸，易于阅读。 Chrome 应用程序非常棒，运行完美且易于导航。</p></div></div><!-- 用户2评论 --><div class="user1"><div class="top1"><img src="https://m.media-amazon.com/images/S/amazon-avatars-global/default.png" alt="用户头像" class="pic3"><p>Jone</p></div><div class="mid1"><div class="div2"><div class="div3" style="width: 88%;">88%</div> <!-- 用户评分进度条 --></div><div class="div4">我喜欢我的笔记本电脑。它拥有我需要的一切，甚至更多。</div></div><div class="down1"><p>今年3月9日购买。收到电源线大约一个月后，电源线停止工作，笔记本电脑死机。我们回到这里，发现无法退货，所以我们购买了另一根电源线。</p></div></div><!-- 用户3评论 --><div class="user1"><div class="top1"><img src="https://m.media-amazon.com/images/S/amazon-avatars-global/default.png" alt="用户头像" class="pic3"><p>Whilson</p></div><div class="mid1"><div class="div2"><div class="div3" style="width: 95%;">95%</div> <!-- 用户评分进度条 --></div><div class="div4">一台好电脑，物超所值</div></div><div class="down1"><p>同样，它绝不是一台完整的笔记本电脑。但话又说回来，如果您正在寻找 Chromebook，您并不是在寻找笔记本电脑的全部功能。</p></div></div><!-- 用户4评论 --><div class="user1"><div class="top1"><img src="https://m.media-amazon.com/images/S/amazon-avatars-global/default.png" alt="用户头像" class="pic3"><p>Lily</p></div><div class="mid1"><div class="div2"><div class="div3" style="width: 75%;">75%</div> <!-- 用户评分进度条 --></div><div class="div4">我喜欢带灯的键盘</div></div><div class="down1"><p>我不太懂电脑，但它是一台漂亮的电脑，而且比我以前的电脑更小、更轻。</p></div></div></section></div>
</body>
</html>

详细讲解：

1.产品信息部分

/* 产品标题样式设置 */
.goods h3 {font-size: 24px; /* 字体大小 */color: #333; /* 字体颜色 */
}/* 产品描述样式设置 */
.goods p {font-size: 16px; /* 字体大小 */color: #555; /* 字体颜色 */line-height: 1.5; /* 行高，增加可读性 */
}/* 链接样式设置 */
.goods a {color: #5690c2; /* 链接颜色 */text-decoration: none; /* 去掉下划线 */font-size: 14px; /* 字体大小 */
}/* 销售进度条背景样式设置 */
.goods .pl1 {background-color: #bdbdbd; /* 背景颜色 */width: 50%; /* 宽度为50% */height: 20px; /* 高度为20px */border-radius: 5px; /* 圆角边框 */margin: 10px 0; /* 上下外边距 */
}/* 销售进度条实际进度样式设置 */
.goods .pl2 {background-color: green; /* 背景颜色 */height: 100%; /* 高度占满背景 */width: 82%; /* 宽度表示销售进度的百分比 */border-radius: 5px; /* 圆角边框 */text-align: center; /* 文本居中对齐 */color: white; /* 文本颜色 */line-height: 20px; /* 文本垂直居中 */
}/* 配置选项按钮样式设置 */
.goods .opt button {background-color: #fff; /* 背景颜色 */border: 2px solid #c7c7c7; /* 边框颜色 */border-radius: 10px; /* 圆角边框 */margin: 5px; /* 外边距 */padding: 10px; /* 内部填充 */cursor: pointer; /* 鼠标悬停时显示为手指图标 */font-size: 15px; /* 字体大小 */
}/* 选中的配置按钮样式设置 */
.goods .opt button.active-border {border-color: #030303; /* 选中状态的边框颜色 */font-weight: bold; /* 选中状态的字体加粗 */
}/* 产品价格样式设置 */
.goods .piece {color: #ce4444; /* 字体颜色 */font-size: 17px; /* 字体大小 */
}
<script>/* JavaScript函数：处理按钮选择和活动状态 */function selectButton(button) {var buttons = document.getElementsByClassName('my-button'); /* 获取所有具有 'my-button' 类的按钮 */for (var i = 0; i < buttons.length; i++) {buttons[i].classList.remove('active-border'); /* 移除所有按钮的活动边框类 */}button.classList.add('active-border'); /* 为当前按钮添加活动边框类 */}
</script>
<!-- html产品信息部分 -->
<div class="goods"><h3>XYZ笔记本电脑</h3> <!-- 产品标题 --><p>XYZ 2023 款最新 Chromebook 笔记本电脑，14 英寸显示屏，英特尔赛扬 N4120 处理器，4GB RAM，64GB eMMC，英特尔 UHD 显卡 600，WiFi，蓝牙，Chrome 操作系统，现代灰色</p> <!-- 产品描述 --><p><a href="#XYZhome">访问XYZ官网</a></p> <!-- 官网链接 --><!-- 销售进度条 --><div class="pl1"><div class="pl2">82%</div> <!-- 进度条表示销售进度 --></div><p>40万+已售</p> <!-- 销售数量 --><hr> <!-- 分隔线 --><!-- 配置选项按钮 --><div class="opt"><button type="button" class="my-button" onclick="selectButton(this)"><span>4GB RAM | 64GB eMMC</span><span class="piece">￥177.90</span></button><button type="button" class="my-button" onclick="selectButton(this)"><span>8GB RAM | 128GB eMMC</span><span class="piece">￥257.90</span></button><button type="button" class="my-button" onclick="selectButton(this)"><span>16GB RAM | 512GB eMMC</span><span class="piece">￥559.90</span></button></div><!-- 产品规格表 --><div class="tab1"><table><tr><td class="td1">品牌</td><td>XYZ</td></tr><tr><td class="td1">型号</td><td>XYZ Chromebook</td></tr><tr><td class="td1">屏幕尺寸</td><td>14英寸</td></tr><tr><td class="td1">CPU型号</td><td>Celeron N</td></tr><tr><td class="td1">操作系统</td><td>Chrome OS</td></tr><tr><td class="td1">图形处理器</td><td>Intel UHD Graphics 600</td></tr></table></div>
</div>

(1).获取所有按钮:

  • var buttons = document.getElementsByClassName('my-button');
    • 这行代码使用 document.getElementsByClassName 方法获取页面上所有具有 my-button 类名的按钮元素，并将这些元素存储在 buttons变量中。
    • buttons是一个类数组对象（HTMLCollection），包含了所有配置选项按钮。

(2).移除活动状态:

  • for (var i = 0; i < buttons.length; i++)
    • 这个 for 循环遍历所有的按钮。
    • 对每个按钮调用 classList.remove('active-border') 方法，移除 active-border 类。这意味着所有按钮的选中样式都会被清除。

(3).添加活动状态:

  • button.classList.add('active-border');
    • 这行代码将 active-border 类添加到当前点击的按钮（button参数）上。
    • 这样就给用户一个视觉反馈，显示这个按钮是被选中的。

2.用户评论区域

/* 用户评论区域样式设置 */
.mark {margin-top: 50px; /* 顶部外边距 */
}/* 单个用户评论样式设置 */
.mark .user1 {border-bottom: 1px solid #8f8f8f; /* 下边框颜色 */padding-bottom: 20px; /* 底部内边距 */margin-bottom: 20px; /* 底部外边距 */
}/* 用户信息部分样式设置 */
.top1 {display: flex; /* 使用flex布局 */gap: 10px; /* 头像和名称之间的间距 */align-items: center; /* 垂直方向对齐 */
}/* 用户头像样式设置 */
.top1 .pic3 {width: 50px; /* 头像宽度 */height: 50px; /* 头像高度 */border-radius: 50%; /* 圆形头像 */
}/* 用户评论评分部分样式设置 */
.mid1 {display: flex; /* 使用flex布局 */gap: 10px; /* 评分进度条和文本之间的间距 */align-items: center; /* 垂直方向对齐 */
}/* 评分进度条背景样式设置 */
.div2 {background-color: #bdbdbd; /* 背景颜色 */width: 100px; /* 进度条宽度 */height: 20px; /* 进度条高度 */border-radius: 5px; /* 圆角边框 */
}/* 实际评分进度样式设置 */
.div3 {background-color: green; /* 背景颜色 */height: 100%; /* 高度占满背景 */border-radius: 5px; /* 圆角边框 */color: white; /* 文本颜色 */text-align: center; /* 文本居中对齐 */line-height: 20px; /* 文本垂直居中 */
}/* 评论评分文本样式设置 */
.div4 {font-weight: bold; /* 字体加粗 */font-size: 14px; /* 字体大小 */color: #555; /* 字体颜色 */
}/* 用户评论文本样式设置 */
.down1 p {font-size: 16px; /* 字体大小 */color: #333; /* 字体颜色 */
}

<h3>来自中国的热门评论</h3> <!-- 评论标题 -->
<!-- 用户1评论 -->
<div class="user1"><div class="top1"><img src="https://m.media-amazon.com/images/S/amazon-avatars-global/default.png" alt="用户头像" class="pic3"><p>Mike</p> <!-- 用户名 --></div><div class="mid1"><div class="div2"><div class="div3" style="width: 79%;">79%</div> <!-- 用户评分进度条 --></div><div class="div4">非常棒的一次购物，开机速度很快</div> <!-- 用户评分文字描述 --></div><div class="down1"><p>这款 chromebook 本身就具有价值。它启动速度很快，没有任何问题。它适用于日常计算。图形清晰锐利，不伤眼睛。屏幕为 14 英寸，易于阅读。 Chrome 应用程序非常棒，运行完美且易于导航。</p></div>
</div>

完

这篇关于页面设计任务 商品详情页(带评论区)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1109584。

相关文章

Python Invoke自动化任务库的使用

Python Invoke自动化任务库的使用

《PythonInvoke自动化任务库的使用》Invoke是一个强大的Python库,用于编写自动化脚本,本文就来介绍一下PythonInvoke自动化任务库的使用,具有一定的参考价值,感兴趣的可以... 目录什么是 Invoke？如何安装 Invoke？Invoke 基础1. 运行测试2. 构建文档3.
阅读更多...
Python中的可视化设计与UI界面实现

Python中的可视化设计与UI界面实现

《Python中的可视化设计与UI界面实现》本文介绍了如何使用Python创建用户界面（UI）,包括使用Tkinter、PyQt、Kivy等库进行基本窗口、动态图表和动画效果的实现,通过示例代码,展示... 目录从像素到界面：python带你玩转UI设计示例：使用Tkinter创建一个简单的窗口绘图魔法：用
阅读更多...
解决Cron定时任务中Pytest脚本无法发送邮件的问题

解决Cron定时任务中Pytest脚本无法发送邮件的问题

《解决Cron定时任务中Pytest脚本无法发送邮件的问题》文章探讨解决在Cron定时任务中运行Pytest脚本时邮件发送失败的问题,先优化环境变量,再检查Pytest邮件配置,接着配置文件确保SMT... 目录引言1. 环境变量优化：确保Cron任务可以正确执行解决方案：1.1. 创建一个脚本1.2. 修
阅读更多...
Java实现任务管理器性能网络监控数据的方法详解

Java实现任务管理器性能网络监控数据的方法详解

《Java实现任务管理器性能网络监控数据的方法详解》在现代操作系统中,任务管理器是一个非常重要的工具,用于监控和管理计算机的运行状态,包括CPU使用率、内存占用等,对于开发者和系统管理员来说,了解这些... 目录引言一、背景知识二、准备工作1. Maven依赖2. Gradle依赖三、代码实现四、代码详解五
阅读更多...
如何使用celery进行异步处理和定时任务(django)

如何使用celery进行异步处理和定时任务(django)

《如何使用celery进行异步处理和定时任务(django)》文章介绍了Celery的基本概念、安装方法、如何使用Celery进行异步任务处理以及如何设置定时任务,通过Celery,可以在Web应用中... 目录一、celery的作用二、安装celery三、使用celery 异步执行任务四、使用celery
阅读更多...
使用JavaScript将PDF页面中的标注扁平化的操作指南

使用JavaScript将PDF页面中的标注扁平化的操作指南

《使用JavaScript将PDF页面中的标注扁平化的操作指南》扁平化(flatten)操作可以将标注作为矢量图形包含在PDF页面的内容中,使其不可编辑,DynamsoftDocumentViewer... 目录使用Dynamsoft Document Viewer打开一个PDF文件并启用标注添加功能扁平化
阅读更多...
什么是cron? Linux系统下Cron定时任务使用指南

什么是cron? Linux系统下Cron定时任务使用指南

《什么是cron?Linux系统下Cron定时任务使用指南》在日常的Linux系统管理和维护中，定时执行任务是非常常见的需求，你可能需要每天执行备份任务、清理系统日志或运行特定的脚本，而不想每天... 在管理 linux 服务器的过程中，总有一些任务需要我们定期或重复执行。就比如备份任务，通常会选在服务器资
阅读更多...
SpringBoot如何访问jsp页面

SpringBoot如何访问jsp页面

《SpringBoot如何访问jsp页面》本文介绍了如何在SpringBoot项目中进行Web开发,包括创建项目、配置文件、添加依赖、控制层修改、测试效果以及在IDEA中进行配置的详细步骤... 目录SpringBoot如何访问JSP页python面简介实现步骤1. 首先创建的项目一定要是web项目2. 在
阅读更多...
不懂推荐算法也能设计推荐系统

不懂推荐算法也能设计推荐系统

本文以商业化应用推荐为例，告诉我们不懂推荐算法的产品，也能从产品侧出发， 设计出一款不错的推荐系统。 相信很多新手产品，看到算法二字，多是懵圈的。 什么排序算法、最短路径等都是相对传统的算法（注：传统是指科班出身的产品都会接触过）。但对于推荐算法，多数产品对着网上搜到的资源，都会无从下手。特别当某些推荐算法 和 “AI”扯上关系后，更是加大了理解的难度。 但，不了解推荐算法，就无法做推荐系
阅读更多...
如何在页面调用utility bar并传递参数至lwc组件

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件： 2.调用utility bar api的方式有两种： 方法一，通过lwc调用： import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2