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

效果图：

任务描述

源码：

详细讲解：

1.产品信息部分

2.用户评论区域

效果图：

任务描述

页面结构:
- 页面应包括一个标题部分、一个产品展示区和一个客户评价区。
- 使用图片展示产品，并添加描述。
- 客户评价区展示一些用户的评价。
页面内容:
- 标题部分：显示一个大标题和副标题。
- 产品展示区：展示一张产品图片，并包含产品名称、价格和描述。
- 客户评价区：显示几条用户评论，每条评论包含用户名和评论内容。
样式:
- 使用 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>

完