页面设计任务商品详情页

最新推荐文章于 2024-12-11 16:04:55 发布

Mike!

最新推荐文章于 2024-12-11 16:04:55 发布

阅读量1.2k

点赞数 27

分类专栏： html初阶文章标签： css css3 前端 html5 chrome 前端框架

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

版权

成品:

任务描述

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

网页结构：使用 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{