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

Mike!

于 2024-08-26 14:47:43 发布

阅读量720

点赞数 20

分类专栏： html初阶文章标签： html5 javascript css chrome css3

本文链接：https://blog.csdn.net/2301_80122797/article/details/141562494

版权

效果图：

任务描述

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

        /* 用户评论区域样式设置 */
        .m