第三次作业淘宝电商（三个页面）

于 2025-03-02 17:01:40 发布
阅读量153 收藏
点赞数 3
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_87920962/article/details/145966080
版权

淘宝登录页面


​​​代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝登陆页面</title>
    <style>
        *{
            margin: 0%;
            padding: 0%;
        }
        .A{
            background-color:#F0EFF2;
            /* display: flex;
            flex-wrap: nowrap; */
        }
        .q{
            height: 50px;
            /* background-color: antiquewhite; */
        }
        .q11{
            width: 65px;
            height: 38px;
            margin-top: 19px;
            margin-left: 96px;
            float: left;

        }
        .q2{
            width: 130px;
            height: 38px;
            /* background-color: aqua; */
            float: left;
            position: relative;
            left: 903px;
            top: 22px;
        }
        .q21{
            color: #666666;
 
        }
        .q21>img{
            width: 18px;
            height: 15px;
            position: relative;
            top: 4px;
            float: left;
            
           
        }
        .q21{
            font-size: 11px;
        }
        .q22{
            float: left;
            position: relative;
            top: 3px;
            right: 2.5px;
        }
        .w{
            width: 780px;
            height: 470px;
            background-color:white;
            border-radius: 18px;
            position: relative;
            left: 247px;
            top: 106px;

        }
        .w1{
            width: 324px;
            height: 465px;
            /* background-color: red; */
            float: left;
        }
        .w11{
            font-size: 20.5px;
            position: relative;
            top: 69px;
            right: 61px;
        }
        .w12{
            width: 177px;
            height: 177px;
            position: relative;
            top: 103px;
            right: 90px;
        }
        .w13{
            width: 164px;
            height: 13px;
            position: relative;
            top: 113px;
            right: 84px;
        }
        .w14{
            font-size: 13px;
            position: relative;
            top: 149px;
            right: 43px;
            color: #6C6C6C;

        }
        .w2{
            width: 1px;
            height: 354px;
            background:#F2F2F2;
            float: left;
            position: relative;
            right: 166px;
            top: 72px;
        }
        .w3{
            float: left;
            width: 100px;
            height: 100px;
            /* background-color: aquamarine; */
        }
        .w3>div{
            float: left;
        }
        .w31{
            width: 80px;
            height: 21px;
            position: relative;
            top: 72px;
            right: 34px;
        }
        .w32{
            width: 81px;
            height: 22px;
            position: relative;
            left: 82px;
            top: 47px;

        }
        .w4{

            width: 350px;
            height: 360px;
            /* background-color: antiquewhite; */
            position: relative;
            left: 370px;
            top: 100px;;
        }
        .w41{
            width: 315px;
            height: 43px;
            background-color:#F3F6F8;
            border-radius: 8px;
            border: 0px;
            position: relative;
            bottom: 440px;
            left: 22px;
            margin-bottom: 20px;
            padding-left: 18px;

        }
        .w42{
            width: 315px;
            height: 43px;
            background: #FF6200;
            color: white;
            font-size: 15px;
            border-radius: 8px;
            border: 0px;
            position: relative;
            bottom: 397px;
            left: 22px;
        }
        .w431{
            width: 82px;
            height: 15px;
            float: left;
            position: relative;
            bottom: 360px;
            left: 20px;
        }
        .w432{
            width: 69px;
            height: 15px;
            float: left;
            position: relative;
            bottom: 360px;
            left: 40px;
            
        }
        .w433{
            float: left;
            font-size: 13px;
            color: #50607A;
            position: relative;
            bottom: 362px;
            left: 62px;
        }
        .w444{
            margin-left: 21px;
        }

    </style>
</head>
<body class="A">
    <div class="q">
        <div class="q1"><img class="q11" src="data:image/png;base64,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" alt=""></div>
        <div class="q2">
            <div class="q21">网站无障碍</div>
            <div class="q21"> <img src="./QQ_1740317349870.png" alt=""> <div class="q22">"登录页面"改进建议</div> </div>
        </div>
    </div>
    <div class="w">
        <div class="w1">
            <div class="w11">手机扫码登录</div>
            <div><img class="w12" src="./f38c2ba6-24b2-4f61-977c-b8b76c1665f1.png" alt=""></div>
            <div><img class="w13" src="./二维码下方字.png" alt=""></div>
            <div class="w14">怎么扫码登录？</div>
        </div>
        <div class="w2"></div>
        <div class="w3">
            <img class="w31" src="./密码登录.png" alt="">
            <img class="w32" src="./短信登录.png" alt="">
        </div>
        <div class="w4">
            <input class="w41" type="text" placeholder="账号名/邮箱/手机号" required >
            <input class="w41" type="password" placeholder="请输入登录密码                                  忘记密码" required >
            
            <button class="w42">登录</button>
            <div class="w43">
                <img class="w431" src="./支付宝登录.png" alt="">
                <img class="w432" src="./钉钉登录.png" alt="">
                <div class="w433">忘记账号</div>
                <div class="w433 w444">免费注册</div>
            </div> 
        </div>
    </div>
</body>
</html>

运行结果：

淘宝官方客服

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- https://ai.alimebot.taobao.com/intl/index.htm?from=WgevAY26kl -->
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .q{
            display: flex;
            flex-wrap: wrap;
            height: 674px;
            background: url("https://img.alicdn.com/tfs/TB1C.3nefb2gK0jSZK9XXaEgFXa-2880-2000.jpg") no-repeat scroll;
            background-size: cover;
        }
        .w{
            height: 526px;
            width: 721px;
            background-color: white;
            margin: auto;
        }
        .w1{
            width: 721px;
            height: 95px;
            background-image:url("https://gw.alicdn.com/imgextra/i4/O1CN01qquhJJ1EeiHiQo3Qg_!!6000000000377-0-tps-750-650.jpg");
        }
        .w2{
            height: 430px;
            width: 721px;
            background-image:url("https://gw.alicdn.com/imgextra/i2/O1CN01hDFYyl1Wgh5FnOlvc_!!6000000002818-55-tps-750-700.svg");

        }
        .w12{
            margin: 14px;
        }
        .w13{
            
            height: 20px;
            width: 721px;
            margin-top: 38.2px;
        }
        .w11{
            width: 721px;
            height: 30px;
            /* background-color: aqua; */
        }
        .w111{
            width: 11px;
            height: 15px;
            margin-left: 13px;
            margin-top: 13px;
            float: left;
            
        }
        .w112{
            font-size: 13px;
            float: left;
            position: relative;
            left: 10px;
            top: 11px;
        }
        .w113{
            width: 17px;
            height: 18px;
            position: relative;
            left: 605px;
            top: 12px;
          
        }
        .w114{
            width: 19px;
            height: 17px;
            position: relative;
            left: 668.3px;
            bottom: 10px;

        }
        .w121,.w122,.w123,.w124,.w125{
            width: 23px;
            height: 23px;
            float: left;
            margin-right: 96px;
    
        }
        .w121{
            margin-left: 39px;
        }
        .w131{
            float: left;
            margin-right: 81px;
            font-size:9px;
        }
        .w0121{
            margin-left: 47px;
        }
        .w21{
            width: 721px;
            height: 20px;
            font-size: 10.3px;
            text-align: center;
            position: relative;
            right: 7.4px;
            top: 10px;
            color: #3399FF;
        }
        .w22{
            width: 710;
            height: 40px;
            margin: auto;
            /* background-color: aqua; */
            margin-bottom: 5px;
            margin-top: 14px;
        }
        .w221{
            width: 25px;
            height: 25px;
            border-radius: 5px;
            margin-left: 10px;
            float: left;
        }
        .w222{
            width:208px;
            height: 25px;
            border-radius: 12px;
            background-color: white;
            float: left;
            font-size: 11.2px;
            text-align: center;
            padding-top: 10.5px;
            margin-left: 5px;
        }
        .w022{
            margin-top: 5px;
            
        }
        .w23{
            width: 15px;
            height: 390px;
            position: relative;
            left: 706px;
                   
   
        }
        .w023{
            height: 0px;
        }
        .w24{
            width: 721px;
            height: 30px;
            /* background-color: antiquewhite; */
            position: relative;
            top: 238px;
        }
        .w25{
            width: 327px;
            height: 35px;
        }
        .w251{
            width: 324px;
            height: 28px;
            border: 0.5px solid #FF5000;
            border-radius: 6px;
            color: #FF5000;
            font-size: 10px;
            background-color: white;
            position: relative;
            /* bottom: 191px; */
            left: 39px;
            margin-bottom: 6px;
            
        }
        .w252{
            color: #666666;
            border: 0px;
            background-color: white;
            width: 66px;
            height: 19px;
            position: relative;
            left: 20px;
            bottom: 3px;
            left: 168px;
        }
        .w241{
            width: 27px;
            height: 27px;
            border-radius: 12px;
            float: left;
            margin-left: 8px;
        }
        .w242{
            float: left;
            border-radius: 12px;
            border: 0px;
            background-color:white;
            width: 505px;
            height: 27px;
            margin-left: 5px;
            padding-left: 9px;
            
            font-size: 11px;
        }
        input::placeholder{
            color:rgb(207, 199, 199)
        }
        .w243{
            float: left;
            border: 0px;
            border-radius: 5px;
            background-color: #ff9000;
            color: white;
            width: 46px;
            height: 25px;
            margin-left: 7px;
            margin-top: 1px;
            font-size: 11px;

        }

        

    </style>
</head>
<body>
    <div class="q">
        <div class="w">
            <div class="w1">
                <div class="w11">
                    <div><img class="w111" src="./符号.png" alt=""></div>
                    <div class="w112">淘小蜜</div>
                    <div><img class="w113" src="./图标1.png" alt=""></div>
                    <div><img class="w114" src="./图标2.png" alt=""></div>
                </div>
                <div class="w12">
                    <img class="w121" src="https://alime-base.oss-cn-beijing.aliyuncs.com/self-help-tool/default/jiabaozhongxin.png" alt="">
                    <img class="w122" src="https://alime-base.oss-cn-beijing.aliyuncs.com/self-help-tool/default/huiyuanquanyi.png" alt="">
                    <img class="w123" src="https://alime-base.oss-cn-beijing.aliyuncs.com/self-help-tool/default/huodonghuizong.png" alt="">
                    <img class="w124" src="https://alime-base.oss-cn-beijing.aliyuncs.com/self-help-tool/default/pingjiaguanli.png" alt="">
                    <img class="w125" src="https://alime-base.oss-cn-beijing.aliyuncs.com/self-help-tool/default/chataoqizhi.png" alt="">
                </div>
                <div class="w13">
                    <div class="w131 w0121">价保中心</div>
                    <div class="w131">88VIP权益</div>
                    <div class="w131">活动问题</div>
                    <div class="w131">商品评价</div>
                    <div class="w131">查淘气值</div>
                </div>
            </div>
            <div class="w2">
                <div class="w023"><img class="w23" src="c:\Users\29439\AppData\Local\Temp\QQ_1740496435770.png" alt=""></div>
                <div class="w21">点击查看历史咨询记录</div>
                <div class="w22">
                    <img class="w221" src="https://gw.alicdn.com/imgextra/i4/O1CN01R2pfjW1utZ245oWkO_!!6000000006095-0-tps-132-132.jpg" alt="">
                    <div class="w222">上午好，我是小蜜，很高兴为您服务！</div>
                </div>
                <div class="w22 w022">
                    <img class="w221" src="https://gw.alicdn.com/imgextra/i4/O1CN01R2pfjW1utZ245oWkO_!!6000000006095-0-tps-132-132.jpg" alt="">
                    <div class="w222">亲，您有任何疑问都可以向小蜜咨询哦</div>
                </div>
                
                
                <div class="w25">
                    <div><button class="w251"><strong>点击领取消费券</strong></button></div>
                    <div><button class="w251"><strong>点击进入领券中心</strong></button></div>
                    <div><button class="w251"><strong>我要申请退款/催促退款</strong></button></div>
                    <div><button class="w251"><strong>我要催发货/催物流</strong></button></div>
                    <div><button class=" w251 w252">查看更多</div>

                </div>
                <div class="w24">
                    <img class="w241" src="./11.png" alt="">
                    <img class="w241" src="./22.png" alt="">
                    <img class="w241" src="./33.png" alt="">
                    <img class="w241" src="./44.png" alt="">
                    <input class="w242" type="text" placeholder="请输入想咨询的问题">
                    <button class="w243">发送</button>
                </div>


            </div>
            <div></div>
            <div></div>
        </div>


    </div>

</body>
</html>

运行结果：

淘宝个人中心

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .A{
            display: flex;
            flex-wrap: wrap;
          
        }
        .q{
            height: 33px;
            width: 100%;
            /* background-color: #a1ead8; */
        }
        .q1{
            width: 1090px;
            height: 33px;
            margin: auto;
            /* background-color: antiquewhite; */
            position: relative;
        }
        .q11{
            font-size: 8px;
            position: relative;
            top: 6px;
            left: 5px;
            float: left;
        }
        .q12{
            margin-left: 23px;
        }
        .q13{
            margin-left: 516px;
            margin-right: 19px;
        }
        .q13~.q11{
            margin-right: 19px;
        }
        .w{
            background-color:rgba(243, 246, 248);
            width: 100%;
            height: 640px;
        }
        .w1{
            width: 100%;
            height: 30px;
            /* background-color: rgba(255, 140, 140, 0.414); */
            margin-top: 15px;
        }
        .w11{
            width: 49px;
            height: 20px;
            margin-left: 120px;
            float: left;
        }
        .w12{
            color: #FF5000;
            width: 80px;
            height: 30px;
            float: left;
            font-size: 16px;
            /* background-color: aqua; */
            margin-left: 12px;
            position: relative;
            bottom: 1px;
            
            

        }
        .w13{
            width: 232px;
            height: 27px;
            padding-left: 10px;
            border-radius: 9px;
            border: 1px solid #FF5000;
            font-size: 10px;
            float: left;
            /* margin-left: 450px; */
            position: relative;
            left: 629px;
            bottom: 6px;

        }
        input::placeholder{
            color:rgb(137, 137, 137);
        }
        .w14{
            width: 18px;
            height: 18px;
            float: left;
            position: relative;
            left: 558px;

            
        }
        .w15{
            width: 48px;
            height: 25px;
            background: #FF5000;
            color: white;
            font-size: 12px;
            border: 1px solid #FF5000;
            border-radius: 6px;
            float: left;
            position: relative;
            left: 561px;
            bottom: 4px;
        }
        .w2{
            width: 162px;
            height: 501px;
            background-color:white;
            border-radius: 16px;
            position: relative;
            top: 5px;
            left: 110px;
            bottom: 8px;
            float: left;
            
        }
        .w3{
            width: 864px;
            height: 167px;
            background-color: white;
            position: relative;
            left: 282px;
            top: 6px;
            border-radius: 16px;
           
        }
        .w4{
            width: 865px;
            height: 111px;
            background-color: white;
            border-radius: 16px;
            position: relative;
            left: 282px;
            top: 14px;
        }
        .w5{
            width: 865px;
            height: 289px;
            /* background-color: #a1ead8; */
            position: relative;
            left: 282px;
            top: 24px;
            border-radius: 16px;


        }
        .w2>div{
            width: 129px;
            height: 19px;
            background-color:white;
            font-size: 10px;
            margin: auto;
            margin-top: 1px;
            padding-top: 4px;
            padding-left: 10px;
            position: relative;
            top: 10px;
            border-radius: 3px;
            
        }
        #w21{
            color: rgb(255, 80, 0);
            background-color: antiquewhite;
        }
        #w22{
            padding-left: 25px;
            width: 114px;
        }
        .w31{
            width: 85px;
            height: 85px;
            border-radius: 90px;
            position: relative;
            right: 153px;
            top: 10px;
            float: left;
        }
        .w32{
            position: relative;
            right: 145px;
            top: 20px;
        }
        .w33{
            font-size: 10px;
            position: relative;
            top: 29px;
            right: 144px;
            color: rgb(124, 136, 156);
        }
        .w34{
            color: rgb(124, 136, 156);
            font-size: 10px;
            position: relative;
            top: 16px;
            right: 76px;
        }
        .w35{
            width: 32px;
            height: 15px;
            position: relative;
            right: 146px;
            top: 18px;
        }
        .w36{
            font-size: 9.3px;
            position: relative;
            bottom: 0.5px;
            right: 110px;
            color: #FF5000;
        }
        .w37{
            width: 249px;
            height: 80px;
            border-radius: 8px;
            background-color: #FFEEE6;
            position: absolute;
            left: 604px;
            bottom: 75px;
        }
        .w38{
            margin-top: 32px;

        }
        .w38>div{
            font-size: 14px;
            float: left;
            /* margin-right: 162px; */
            position: relative;
            right: 72px;
            
           
        }
        .w381{
            margin-right: 161px;
        }
        .w39{
            position: relative;
            bottom: 1px;
            width: 900px;
            height: 20px;
            /* background-color: #a1ead8; */

        }
        .w39>div{
            float: left;
            font-size: 10px;
            position: relative;
            right: 84px;
            
        }
        .w391{
            margin-right: 139px;
        }
        .w41{
            font-size: 13.6px;
            position: absolute;
            left: 11px;
            top: 10px;
        }
        .w42{
            width: 505px;
            height: 68px;
            position: absolute;
            left: 10px;
            bottom: 6px;
        }
        .w43{
            width: 53px;
            height: 18px;
            /* background-color: antiquewhite; */
            border: 1px solid rgba(232, 224, 224, 0.527);
            font-size: 10px;
            text-align: center;
            padding-top: 3px;
            position: absolute;
            right: 33px;
            bottom: 32px;
            border-radius: 4px;
        }
        .w51{
            font-size: 14px;
            position: relative;
            top: 12px;
            right: 153px;
        }
        /* .w52{
            width: 1100px;
            height: 161px;
        } */
        .w521{
            width: 161px;
            height: 161px;
            /* float: left;
            position: relative;
            top: 10px;
            right: 152px;
            margin-right: 10px; */
            
        }
         .box{
            height: 161px;
            width: 855px;
            display: grid;
            grid-template-rows: repeat(3,1fr);
            grid-template-columns: repeat(5,1fr);
            /* border: 1px solid #FF5000; */
            position: relative;
            bottom: 187px;
            left: 9px;
         }
         /* .box>div{
            border: 1px solid red;
         } */
         .w522{
            font-size: 10.5px;
         }
         .w5231{
            color: #FF5000;
            float: left;
            font-size: 13.5px;
            margin-right: 5px;
         }
         .w5232{
            float: left;
            color: #FF5000;
            font-size: 9.5px;
            position: relative;
            top: 3.5px;
         }
         .w53{
            width: 66px;
            height: 12px;
            position: absolute;
            bottom: 13px;
            left: 406px;
         }

    </style>
</head>
<body>
    <div class="A">
    <div class="q">
        <div class="q1">
            <div class="q11">tb340343...</div>
            <div class="q11 q12">网页无障碍</div>
            <div class="q11 q13">淘宝网首页</div>
            <div class="q11">已买到的宝贝</div>
            <div class="q11">我的淘宝</div>
            <div class="q11">购物车87</div>
            <div class="q11">收藏夹</div>
            <div class="q11">免费开店</div>
            <div class="q11">千牛卖家中心</div>
            <div class="q11">帮助中心</div>
        </div>
    </div>
    <div class="w">
        <div class="w1">
            <img class="w11" src="https://img.alicdn.com/imgextra/i2/O1CN01bw6IxW1J9dTQPa01x_!!6000000000986-2-tps-148-56.png" alt="">
            <div class="w12">我的淘宝</div>
            <div><input class="w13" type="text" placeholder="红超比赛羽毛球"></div>
             <img class="w14" src="data:image/png;base64,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" alt="">
             <button class="w15">搜索</button>
        </div>
        <div class="w2">
            <div id="w21"><strong>我的淘宝</strong></div>
            <div>我的购物车</div>
            <div>我的订单</div>
            <div id="w22">已买到的宝贝</div>
            <div id="w22">我的拍卖</div>
            <div id="w22">官方集运</div>
            <div>我的卡券包</div>
            <div>宝贝收藏</div>
            <div>关注店铺</div>
            <div>我的足迹</div>
            <div>购买过的店铺</div>
            <div>我的发票</div>
            <div>评价管理</div>
            <div>退款维权</div>
            <div>账户设置</div>
            <div>企业工具</div>
            <div id="w22">我的报价单</div>
            <div id="w22">先采后付</div>
            <div id="w22">我的合同</div>

        </div>
        <div class="w3">
            <img class="w31" src="./头像.png" alt="">
            <div class="w32">name6666</div>
            <div class="w33">tb340343866</div>
            <div class="w34">收货地址</div>
            <img class="w35" src="https://img.alicdn.com/imgextra/i4/O1CN01zVb8qF1ZAaB9AlUqV_!!6000000003154-2-tps-90-42.png" alt="">
            <div class="w36">开88VIP可享全年退货包运费，每单最高省25元</div>
            <img class="w37" src="./右上角.png" alt="">
            <div class="w38">
                <div class="w381"><strong>0</strong></div>
                <div class="w381"><strong>1</strong></div>
                <div class="w381"><strong>2</strong></div>
                <div class="w381"><strong>3</strong></div>
                <div><strong>0</strong></div>
  
            </div>
            <div class="w39">
                <div class="w391">待付款</div>
                <div class="w391">待发货</div>
                <div class="w391">待收货</div>
                <div class="w391">待评价</div>
                <div>退款/售后</div>
            </div>
        </div>
        <div class="w4">
            <div class="w41"><strong>我的物流</strong></div>
            <img class="w42" src="./物流信息.png" alt="">
            <div class="w43">确认收货</div>
        </div>
        <div class="w5">
            <div class="w51"><strong>常买常逛</strong></div>
            <!-- <div class="w52">
                <div><img class="w521" src="./商品1.png" alt=""></div>
                <div><img class="w521" src="./商品2.png" alt=""></div>
                <div><img class="w521" src="./商品3.png" alt=""></div>
                <div><img class="w521" src="./商品4.png" alt=""></div>
                <div><img class="w521" src="./商品5.png" alt=""></div>
            </div> -->
            <div class="box">
                <div><img class="w521" src="./商品1.png" alt=""></div>
                <div><img class="w521" src="./商品2.png" alt=""></div>
                <div><img class="w521" src="./商品3.png" alt=""></div>
                <div><img class="w521" src="./商品4.png" alt=""></div>
                <div><img class="w521" src="./商品5.png" alt=""></div>
                <div class="w522">正品亚狮龙RSL羽毛球钻石D5鹅毛...</div>
                <div class="w522">真亚狮龙RSL钻石D5羽毛球鹅毛耐...</div>
                <div class="w522">小萝卜原创设计个性键帽猛兽派...</div>
                <div class="w522">日本资生堂头皮生机洗发水护理道...</div>
                <div class="w522">燕云十六声礼包10w长鸣珠长鸣玉...</div>
                <div class="w523">
                   <div class="w5231"><strong>￥158.1</strong></div> 
                   <div class="w5232">近期浏览</div> 
                </div>
                <div class="w523">
                    <div class="w5231"><strong>￥158</strong></div> 
                    <div class="w5232">近期浏览</div> 
                </div>
                <div class="w523">
                    <div class="w5231"><strong>￥45.02</strong></div> 
                    <div class="w5232">近期浏览</div> 
                </div>
                <div class="w523">
                    <div class="w5231"><strong>￥100</strong></div> 
                    <div class="w5232">近期浏览</div> 
                </div>
                <div class="w523">
                    <div class="w5231"><strong>￥2.8</strong></div> 
                    <div class="w5232">近期浏览</div> 
                </div>
            </div>
            <img class="w53" src="./展开.png" alt="">
        </div>

    </div>
</div>
</body>
</html>

运行结果：

愚蠢羊
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值