flex实战——购物商品详情页面实现

已于 2023-11-27 17:10:22 修改
阅读量107 收藏 3
点赞数 3
文章标签： html
于 2023-11-27 16:58:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43675314/article/details/134406291
版权

本文中复现了类似购物界面的页面，基本上包含了所有的Flex知识点。通过网页版模拟手机版实现前端购物界面，内容大致包括以下几部分：

  • 内容展现部分
    该部分中所有显示出来的文字信息都是通过Flex布局方式设计，好处是没有给文字或图片设置具体位置，会根据不同的手机或屏幕大小，伸展成合适的大小(浏览器打开时一定要选择手机模拟，拉伸浏览器大小可以看到效果)
  • 底部固定区域部分
    底部区域设置position：fixed，设置成fixed会被移除正常文档流，即元素的位置在屏幕滚动时不会发生变化。

FlexBox理论部分链接: https://blog.csdn.net/weixin_43675314/article/details/134402257
源码链接：https://gitee.com/pan-fahui/flexbox

内容

具体的index.html部分为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">
    <title>商品详情页</title>
</head>
<body>
    <img class="book_cover" src="./images/book-cover.jpg" alt="">
    <div class="head">
        <div class="price">
            <div class="price_now">￥54</div>
            <div class="price_origin">￥99
                <div class="line"></div>
            </div>
        </div>
        <div class="look">25人看过</div>
    </div>
    <div class="title-area">
        <div class="title">代码整洁之道</div>
        <div class="product">推广商品</div>
    </div>
    <div class="goods-area">
        <div class="goods">发货</div>
        <div class="express-area">
            <div class="express-title">快递包邮发货</div>
            <div class="express-content">付款后48小时发货</div>
        </div>
    </div>
    <div class="grey"></div>
    <div class="recommdand-area">
        <div class="recommand">
            <div class="shop">本店推荐</div>
            <div class="all-product">全部商品</div>
        </div>
        <div class="book-display">
            <div  class="displa">
                <img class="image" src="./images/book-cover.jpg" alt="">
                <div class="display-title">
                    <div class="title">代码整洁之道</div>
                    <div class="price">￥54</div>
                </div>
            </div>
            <div class="displa">
                <img class="image" src="./images/book-cover.jpg" alt="">
                <div class="display-title">
                    <div class="title">代码整洁之道</div>
                    <div class="price">￥54</div>
                </div>
            </div>
            <div class="displa">
                <img class="image" src="./images/book-cover.jpg" alt="">
                <div class="display-title">
                    <div class="title">代码整洁之道</div>
                    <div class="price">￥54</div>
                </div>
            </div>
        </div>
    </div>
    <div class="grey"></div>
    <div class="product-detail">
        <div class="detail">商品详情</div>
        <div class="detail-content">ISBN: 978-7-115-52413-3</div>
        <div class="detail-content">ISBN: 978-7-115-52413-3</div>
        <div class="detail-content">ISBN: 978-7-115-52413-3</div>
        <div class="detail-content">ISBN: 978-7-115-52413-3</div>
        <div class="detail-content">ISBN: 978-7-115-52413-3</div>
        <div class="detail-content">ISBN: 978-7-115-52413-3</div>
        <div class="detail-content">ISBN: 978-7-115-52413-3</div>
        <div class="title">【商品详情】</div>
        <p>软件质量，不但依赖架构及项目管理，而且与代码质量
            紧密相关。这一点，无论是敏捷开发流派还是传统开发
            流派．都不得不承认
            本书提出一种观点：代码质量与其整洁度成正比。干净
            的代码，既在质量上较为可靠，也为后期维护、升级奠
            定了良好基础。作为编程领域的佼佼者，本书作者给出
            了
            一 系列行之有效的整洁代码操作实践。</p>
    </div>
    <div class="buttom-area">
        <div class="shop-area">
            <img class="image" src="./images/home.png" alt="">
            <p class="name">店铺</p>
        </div>
        <div class="shop-area">
            <img class="image" src="./images/chat.png" alt="">
            <p class="name">客服</p>
        </div>
        <div class="shop-area">
            <img class="image" src="./images/shopping.png" alt="">
            <p class="name">购物袋</p>
        </div>
        <div class="add">加入购物车</div>
        <div class="buy"><div class="inner">买</div></div>
    </div>

    
</body>
</html>

index.css部分为：

body{
    margin: 0;
    padding: 0;
}
.book_cover{
    display: flex;
    justify-content: center;
    width: 100%;
    height: 420rpx;
}
.head{
    display: flex;
    justify-content: space-between;
    margin: 5px 23px;
    .price{
        display: flex;
        .price_now{
            font-size: 26px;
            color: #ed7955;
        }
        .price_origin{
            font-size: 13px;
            color: #ccccce;
            .line{
                border: 1px solid #ccccce;
                margin-top: -9px;
                width: 110%;

            }
        }
    }
    .look{
        font-size: 17px;
        color: #e3d6cc;
    }
}
.title-area{
    display: flex;
    justify-content: space-between;
    margin: 22px 23px;
    padding-bottom: 23px;
    border-bottom: 1px solid #e2e2e2;
    .title{
        font-size: 20px;
    }
    .product{
        font-size: 16px;
    }
}
.goods-area{
    display: flex;
    margin-left: 22px;
    margin-bottom: 24px;
    .goods{
        color: #999999;
        font-size: 17px;
        margin-right: 15px;
    }
    .express-area{
        .express-title{
            font-size: 17px;
            margin-bottom: 8px;
        }
        .express-content{
            color: #cfdbeb;
            font-size: 14px;
        }
    }
}
.grey{
    height: 5px;
    width: 100vw;
    background-color: #cccccc;
}
.recommdand-area{
    display: flex;
    flex-direction: column;
    margin: 20px 20px;
    .recommand{
        margin-bottom: 28px;
        display: flex;
        justify-content: space-between;
        .shop{
            font-size: 17px;
            font-weight: bold;
        }
        .all-product{
            font-size: 17px;
            color: #a69999;
        }
    }
    .book-display{
        display: flex;
        justify-content: space-evenly;
        .displa{
            display: flex;
            flex-direction: column;

            .image{
                width: 100px;
                height: 120px;
            }
            .display-title{
                .title{
                    font-size: 15px;
                }
                .price{
                    font-size: 13px;
                    color: #f4a655;
                }
            }
        }
    }
}
.product-detail{
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 40px;
    margin-bottom: 40px;    
    .detail{
        font-size: 17px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .detail-content{
        font-size: 13px;
        margin-bottom: 23px;
    }
    .title{
        font-size: 17px;
        font-weight: bold;
    }

}
.buttom-area{
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    width: 100%;
    background-color: white;
    align-items: center;
    padding-left: 20px;
    .shop-area{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-right: 29px;
        .image{
            width: 18px;
            height: 18px;
        }
        .name{
            font-size: 14px;
        }
    }
    .add{
        width: 100px;
        height: 48px;
        font-size: 17px;
        text-align: center;
        line-height: 48px;
        margin-left: -10px;
        border-radius: 10px;
        background-color: #cccccc;
    }
    .buy{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100px;
        height: 100px;
        border-radius: 50px;
        background-color: white;
        line-height: 100px;
        position: absolute;
        right: 47px;
        .inner{
            color: white;
            height: 70px;
            width: 70px;
            font-size: 30px;
            background-color: #ed7955;
            font-size: 30px;
            border-radius: 35px;
            line-height: 70px;
            text-align: center;
        }
    }
}

具体实现的界面图如下：
在这里插入图片描述

在这里插入图片描述

总结

以上实现的功能，主要是对Flex理论部分的加深与实践，更加熟练的掌握Flex布局。
Flex理论部分可以参考该博客链接: https://blog.csdn.net/weixin_43675314/article/details/134402257

埋头苦干的程序猿
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
“网格商品” 列表的样式（使用 float 和 grid 布局）
黄彪博客
11-28 656
由于每个项目之间的间距是一致的，如果使用margin-right设置间距，那么就要求父容器的宽度 为 n * (width + margin), 但是父容器实际上少了一个 margin的宽度，就必须要换行，导致一行显示的内容少一个。如果使用flex布局，然后justify-content: space-between, 如果在一行数量没有占满，就会导致 项目之间的间距不一致。
Flex布局-实现网上商城-个人中心页面
分享前端技术心得
03-06 3813
Flex布局-网上商城-个人中心页面 运用flex知识，可以快速实现弹性功能的页面。无论是排列方式还是横竖居中，flex都能轻松搞定，并具备弹性功能，可随屏幕变化而伸缩。下面这个网上商城-个人中心页面，综合运用了flex知识来实现，效果如图： 具体代码如下： .main { display: flex; width: 1240px; margin: 0 auto; } .left { width: 232px; margin-right: 20px; } .ri
flex弹性布局（详解）
最新发布
wshwsh_的博客
08-09 1万+
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
CSS分享flex布局，实现商品列表展示容器。（可自行扩展）
weixin_56522476的博客
12-01 737
还在为布局烦恼？一个flex就行了。
响应式网格商品展示及加入购物车布局
06-05
响应式网格商品展示及加入购物车界面布局。该网格布局界面使用flexbox来制作商品的网格布局。通过每个商品面板右上角的“+”号可以将该商品添加到比较列表中，最多可以添加3个比较商品。在比较界面会以三列展示出商品的详细信息，用户可以对商品进行性价比较
flex布局实战搭建网页页面
01-03
html+css，使用flex布局搭建页面，纯前端，初学党可借鉴学习如何使用flex布局页面
使用flex布局轻松实现页面布局的示例代码
01-18
废话不多说，直接上代码： 1、上中下布局： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8>...meta name=viewport content=width=device-width, initial-scale=1.0>...
精通Flex 3.0——基于ActionScript 3.0实现_源代码
01-26
《精通Flex 3.0——基于ActionScript 3.0实现》一书源代码。 Flex 3.0 ActionScript 3.0源代码 Flex 3.0源代码。 --------------------------- 第1篇　Flex技术概述 第1章　Flex概述　3 1.1　Flex简介　3 1.2　Flex...
Flex3 实战
02-07
Flex3实战Flex3实战Flex3实战Flex3实战Flex3实战Flex3实战Flex3实战Flex3实战
Flex3实战
07-22
资源名称：Flex 3实战内容简介：Flex 3实战《Flex3实战》首先简要概述Flex 3和Actionｓｃｒｉｐｔ，然后以十分友好、务实的方式介绍Flex的每个主要组件。其中穿插的示例编排合理，注解清晰，引导你重点关注与每个...
Web:flex模拟移动商城首页页面布局/grid布局的相关属性
ZzzWClock的博客
06-18 377
flex模拟移动商城首页页面布局 1.布局页面导航 大家可以看到图片上的红色边框，用了flex布局，布局了一个多行容器，采用的是无序列表ul。 css代码块 /* 设置导航样式，定义flex容器 */ .main { background: rgba(223, 223, 223, 0.524); } .main .dh { display: flex; flex-flow: row wrap; padding: 1rem; text-align: center; backgro
使用Flex布局，实现移动端商品支付页面
分享前端技术心得
03-05 1026
Flex布局关键知识点 1.display：flex要加在父元素上。 2.justify-content设置主轴内容的对齐方式。 3.flex-direction可更改主轴的方向。 4.align-items设置侧轴内容的对齐方式。 5.主轴的方向默认是水平方向，可以通过设置flex-direction:column为垂直方向。需要注意，如果主轴方向变了，那么justify-content属性的值就是相对于更改后的主轴方向而言的。 使用Flex布局，实现移动端商品支付页面 效果图如下： 具体代码： 先引入在
CSS3中弹性盒(Flex)布局
金木编程
11-20 412
定义Flex 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 Flex布局允许容器有能力让其子项目改变其宽度、高度、顺序等，以最佳方式填充可用空间，适应所有类型的显示设备和屏幕大小。 Flex容器会使子项目（伸缩项目）扩展来填满可用空间，或缩小
移动端美团案例分享（flex布局初体验）
m0_74336493的博客
10-31 398
flex布局初体验
Flex布局
qq_43955202的博客
08-01 864
CSS3 flex 布局 一点感想: 暑假和伙伴们一起做了一个简单的项目，完成一个图书商城的项目，我们主要负责页面的构架，结果用的各种position+float+display布局，把一个好端端的项目做完了，结果伴随而来的是一大堆的适配问题，后来再学长的建议下接触flex布局，才发现以前学css3错过了这么好的东西，追悔莫及，自己的demo图做的太大了，直接盗用w3c的图：。 废话不多说了，直...
flex布局列表页（一行内容比较多，长度比较长）
徐同保的专栏
12-03 1042
flex布局列表页（一行内容比较多，长度比较长）
基于flex-flow:column, 实现"商城分类页"充满屏幕高度
weixin_30270889的博客
08-19 873
起因 早上看群里有人问如何让"商城分类页"在数据不多的情况下充满屏幕高度. 第一次回答(calc) 相信大家的第一反应就是calc(100vh - 头高度), 我也是, 然后写了个demo: 第二次回答(flex-flow:column) 但是人家说头高度是padding撑起的没有具体高度, 好吧看来只能用flex-flow:column了. 简单说下flex-flow:column, 默认f...
Flex布局做出自适应页面--语法和案例
热门推荐
某年某月某条街
01-20 4万+
本文发布在： github项目地址：https://github.com/tenadolanter/flex-layout-demo SegmentFault地址：https://segmentfault.com/a/1190000012916949/ CSDN地址：http://blog.csdn.net/qq_34648000/article/details/79115294 博客
web前端入门到实战：基于flex-flow:column, 实现"商城分类页"充满屏幕高度
web前端开发教程htmlcssjs
12-03 1136
如何让"商城分类页"在数据不多的情况下充满屏幕高度. 第一次回答(calc) 相信大家的第一反应就是calc(100vh - 头高度), 我也是, 然后写了个demo 第二次回答(flex-flow:column) 但是人家说头高度是padding撑起的没有具体高度, 好吧看来只能用flex-flow:column了. 简单说下flex-flow:column, 默认flex都是x轴布局, 声...
flex布局——最后一行左对齐的实现方式
05-12
要实现最后一行左对齐的效果，可以使用 Flex 布局中的 `justify-content` 和 `flex-wrap` 属性。 首先，将容器设置为 Flex 布局： ```css .container { display: flex; flex-wrap: wrap; } ``` 接着，设置 `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值