页面设计任务 商品详情页

news2025/1/18 14:55:11

目录

成品:

任务描述

源码：

详细讲解：

1.导航栏讲解

2.主体部分

3.图像部分

4.评分部分

5.按钮部分

6.配置信息部分

7.响应式设计

成品:

任务描述

创建一个产品展示页面，包括以下内容：

  1. 网页结构：使用 HTML 标签构建页面的基本结构，包括导航栏、产品图片、产品描述、价格信息、购物车按钮等部分。
  2. 页面内容：页面中包括一个产品的图片、名称、详细描述、价格和“添加到购物车”按钮。
  3. 样式：使用 CSS 进行页面布局和样式设计，使用 CSS Flexbox 实现响应式设计，使页面在不同设备上看起来都很美观。
  4. 交互效果：为按钮添加悬停效果（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导航栏部分 */

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.主体部分

/* 主体部分 */
.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图像部分 */
.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;

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.评分部分

/* 评分 */
.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.按钮部分

/* 添加到购物车按钮 */
.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.配置信息部分

/* 配置表格 */
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.响应式设计

/* 响应式设计 */
/* 当宽度小于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).当用手机端打开网页时，能够正常观看。

完

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2070193.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

选择适合的电脑监控软件，可以提升员工效率

选择适合的电脑监控软件，可以提升员工效率

在信息化时代&#xff0c;企业对员工的管理不再仅限于传统的考勤制度和绩效评估。随着工作方式的多样化&#xff0c;特别是远程办公的普及&#xff0c;电脑监控软件成为企业管理的重要工具。这些软件不仅能帮助管理者了解员工的工作状态&#xff0c;还能有效提升工作效率&#…
阅读更多...
唯有自救，才能得救

唯有自救，才能得救

回顾这一周的五天&#xff0c;也做成了一些事&#xff0c;想做的事&#xff0c;立即行动&#xff0c;几乎是心到手到&#xff0c;最后也出了一些成绩。 全红婵跳完水&#xff0c;得了个满分&#xff0c;一边走路&#xff0c;一边擦头发&#xff0c;旁边的记者问&#xff1a;你…
阅读更多...
数字孪生网络 (DTN)关键技术分析

数字孪生网络 (DTN)关键技术分析

数字孪生网络 (DTN): 概念、架构及关键技术 摘要 随着5G商用规模部署和下一代互联网IPv6的深化应用&#xff0c;新一代网络技术的发展引发了产业界的广泛关注。智能化被认为是新一代网络发展的趋势&#xff0c;为数字化社会的信息传输提供了基础。面向数字化、智能化的新一代网…
阅读更多...
Leetcode面试经典150题-42.接雨水

Leetcode面试经典150题-42.接雨水

解法都在代码里&#xff0c;不懂就留言或者私信 class Solution {/**本题的解题思路是双指针&#xff1a;一个从头开始一个从尾巴开始&#xff0c;两头的肯定是没有办法接住雨水的,你可以认为0位置左边是0的柱子所以理论上我们是从1遍历到n-2&#xff0c;但是你也可以遍历0到N…
阅读更多...
SpringData基础学习

SpringData基础学习

一、SpringData 概述 二、SpringData JPA HelloWorld 三、Repository 接口
阅读更多...
快速入门：使用Python构建学生成绩管理应用

快速入门：使用Python构建学生成绩管理应用

前言 诸位观众&#xff0c;本学期我有幸学习了Python编程课程。随着课程的结束&#xff0c;授课教师布置了一项任务&#xff0c;要求我们开发一个学生信息管理系统。基于老师的要求&#xff0c;我个人独立完成了这项任务。今天&#xff0c;我希望将这个简易的程序分享给大家&a…
阅读更多...
《黑神话·悟空》是用什么编程语言开发的？

《黑神话·悟空》是用什么编程语言开发的？

最近国内出了一款3A大作的游戏&#xff0c;凭借牛b的画面、文化底蕴、剧情&#xff0c;已经吸引了很多人入局&#xff0c;当然小孟也在第一时间尝鲜。 最直接的感受&#xff1a;效果牛b&#xff0c;画面牛b&#xff0c;游戏好玩。但是时间太忙&#xff0c;准备过年的放假的时候…
阅读更多...
PMP–知识卡片--鱼骨图

PMP–知识卡片--鱼骨图

鱼骨图由日本质量管理大师石川馨发明&#xff0c;也称因果图&#xff0c;原本用于质量管理。现在多用于问题整理。 在使用该工具时&#xff0c;把问题写在鱼骨的头上&#xff0c;然后召集同事&#xff0c;尽可能多的找出问题&#xff0c;大骨写大问题&#xff0c;中小骨写中小…
阅读更多...
Web前端性能优化合集

Web前端性能优化合集

简介 自互联网兴起以来&#xff0c;从最初的静态网页到如今的动态交互、单页应用&#xff08;SPA&#xff09;、PWA&#xff08;Progressive Web Apps&#xff09;等&#xff0c;互联网技术正在飞速发展&#xff0c;随着用户体验成为核心竞争力之一&#xff0c;前端性能直接影…
阅读更多...
哪种电容笔更好用一点？2024开学季实测五款高性价比电容笔！

哪种电容笔更好用一点？2024开学季实测五款高性价比电容笔！

近年来&#xff0c;随着无纸化学习的日益普及&#xff0c;电容笔的重要性越来越凸显&#xff0c;但面对市场上数不清的电容笔种类和品牌&#xff0c;我们到底该选择哪种电容笔更好用一点呢&#xff1f;趁着即将开学&#xff0c;好多小伙伴都在寻找学习用品和数码好物之际&#…
阅读更多...
Python Selenium实现自动化测试及Chrome驱动使用！

Python Selenium实现自动化测试及Chrome驱动使用！

本文将介绍如何使用Python Selenium库实现自动化测试&#xff0c;并详细记录了Chrome驱动的使用方法。 通过本文的指导&#xff0c;读者将能够快速上手使用Python Selenium进行自动化测试。 并了解如何配置和使用Chrome驱动来实现更高效的自动化测试。 一、Python Selenium简…
阅读更多...
2024年甘肃省安全员C证证考试题库及甘肃省安全员C证试题解析

2024年甘肃省安全员C证证考试题库及甘肃省安全员C证试题解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年甘肃省安全员C证证考试题库及甘肃省安全员C证试题解析是安全生产模拟考试一点通结合&#xff08;安监局&#xff09;特种作业人员操作证考试大纲和&#xff08;质检局&#xff09;特种设备作业人员上岗证考试大…
阅读更多...
运动耳机哪个牌子好？五大高品质巅峰机型汇总！

运动耳机哪个牌子好？五大高品质巅峰机型汇总！

​对于运动时享受音乐的朋友来说&#xff0c;耳机的舒适度至关重要&#xff0c;它直接影响到我们能否在运动中发挥最佳状态。无论是高端旗舰耳机还是性价比较高的入门级产品&#xff0c;长时间佩戴的不适感都可能干扰我们的运动节奏。因此&#xff0c;开放式耳机因其不入耳的设…
阅读更多...
数据资产价值评价：开启数据要素市场的关键钥匙

数据资产价值评价：开启数据要素市场的关键钥匙

数据资产价值评价&#xff1a;开启数据要素市场的关键钥匙 前言数据资产价值评价 前言 数据资产作为当今数字化时代的重要生产要素&#xff0c;其价值评价至关重要。数据资产的价值在于与应用场景的紧密结合&#xff0c;不同场景下数据所贡献的经济价值存在显著差异。例如&…
阅读更多...
WIFI 模组8286驱动

WIFI 模组8286驱动

原理图&#xff1a; 注&#xff1a;使用的数串口1的引脚&#xff0c;PA1是发送端引脚&#xff0c;PA3是接收端引脚&#xff0c;PA7串口的使能位。 1.0 WIFI模组驱动 驱动初始化函数&#xff1a; void WifiModuleDrvInit(void) {WifiGpioInit();WifiUartInit(115200);WifiDmaIn…
阅读更多...
window系统如何适用redis

window系统如何适用redis

目录 1、解压缩安装包 2、命令行启动服务 3、客户端连接 4、redis客户端工具 1、解压缩安装包 2、命令行启动服务 3、客户端连接 4、redis客户端工具
阅读更多...
CSS3多行多栏布局

CSS3多行多栏布局

当前布局由6个等宽行组成&#xff0c;其中第四行有三栏&#xff0c;第五行有四栏。 重点第四行设置&#xff1a; 代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><style>img {hei…
阅读更多...
踩坑集之Video Processing Subsystem

踩坑集之Video Processing Subsystem

问题描述 Video Processing Subsystem (VPSS) 功能强大&#xff0c;但我们在应用中只需要其中某个子功能。如果使用完整版本&#xff0c;资源消耗会非常大。VPSS将所有子功能封装在一起&#xff0c;所以我们将IP配置为仅包含CSC的模式&#xff0c;以为不需要的功能就不会影响系…
阅读更多...
致远OA OCR票据识别组件

致远OA OCR票据识别组件

OCR票据识别 技术支持 技术大佬支持本文档 使用范围 任何票种信息&#xff0c;只要需要对接到oa底表中&#xff0c;就能够实现各种票种&#xff0c;各种字段的对接&#xff0c;包括票据识别&#xff0c;发票核验&#xff0c;适配各种票据 使用介绍 1 配置每种发票的ocr设…
阅读更多...
【Nginx】快速入门

【Nginx】快速入门

概述 Nginx(engine x)是一个高性能的HTTP和反向代理web服务器。 特点是占有内存小&#xff0c;并发能力强&#xff0c;简单易配置&#xff0c;支持高达 50000 个并发连接数的响应。 作用 代理 正向代理&#xff1a; 反向代理&#xff1a; 负载均衡 Nginx提供的负载均衡策…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023