第三次作业

～莫子2024-06-21 11:56

1.淘宝商品页

代码

html 复制代码 
<!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: 0px;
        }
        body{
            height: 4000px;
        }
        .main-body{
            background-color: #e3e3e8bf;
        }
        .content{
            background-color: #f5f5f5;
            color: #6C6C6C;
        }
        .content > span{
            width: 80px;
            height: 35px;
            padding-left: 8px;
            font-size: 13px;
        }
        
        .content > :nth-child(1),
        .content > :nth-child(7){
        margin-left:120px ;
        }
        .body{
            margin: auto;
            width: 1158px;
            height: 97px;
        }
        .taobao > img{
            margin-top: 25px;
            padding-left: 50px;
        }
        .search{
            background: #fff;
            height: 42px;
            width:540px ;
            border: 2px solid #ff5000;
            border-radius: 8px;
            position: relative;
            left: 280px;
            bottom: 60px;
        }
        .search > span{
            font-size: 14px;
            position: relative;
            /* top: 5px; */
            left: 10px;
        }
        .input > input{
            text-decoration: none;
            border: 0;
            outline: none;
            position: relative;

        }
        .xiangji{
            position: relative;
            top: 6px;
        }
        .ss >button{
            background: #ff6200;
            border: 0;
            border-radius: 4px;
            color: #fff;
            font-size: 14px;
            font-weight: 40px;
            height: 39px;
            width: 58px;
            position: relative;
            bottom: 1px;
        }
        .main-footer{
            height: 5000px;
            background-color: #e3e3e8bf;
        }
        .footer{
            background-color: #fff;
            border-radius: 16px;
            width: 1200px;
            height: 1100px;
            position: relative;
            left: 180px;
            top: 40px;
        }
        .footer > .f1,
        .footer > .f2,
        .footer > .f3,
        .footer > .f4
        {
            width: 848px;
            height: 70px;
            float: left;
        }
        .f1 > :nth-child(1){
            font-weight: 600;
            font-size: 18px;
            color: #11192d;
            position: relative;
            left: 30px;
            top: 20px;
        }
        .f1 > :nth-child(2){
            font-size: 18px;
            font-weight: 500;
            color: #50607A;
            position: relative;
            left: 60px;
            top: 20px;
        }
        .f2 > :nth-child(1){
            font-weight: 600;
            font-size: 14px;
            color: #11192d;
            position: relative;
            left: 30px;
            top: 20px;
        }
        .f2 > :nth-child(2){
            font-size: 14px;
            color: #11192d;
            position: relative;
            left: 130px;
            top: 20px;
        }
        .f3 > span{
            font-size: 18px;
            font-weight: 500;
            position: relative;
            top: 20px;
            left: 30px;
        }
        .f4{
            position: relative;
            left: 20px;
        }
        .zg{
            color: #000;
            font-size: 20px;
            font-weight: 700; 
            position: relative;
            left: 45px;
            top:20px;
        }
        .gg{
            border: 1px solid #dcdcdc;
            border-radius: 3px;
            color: silver;
            font-size: 12px;
            font-weight: 400;
            height: 20px;
            width: 32px;
            position: relative;
            left:200px;
            top:20px;
        }
        .columns{
            display: grid;
            width: 300px;
            grid-template-columns: repeat(1,1fr);
            height: 900px;
            grid-template-rows: repeat(3,1fr);
            position: relative;
            top:70px;
            left: 30px;
        }
        .columns1 > div,
        .columns2 > div,
        .columns3 > div{
            height: 240px;
            border-radius: 13px;
            
        }
        .c-price{
            color: #f50;
            font: 400 20px Arial;
        }
        .c-sell{
            color: #50607a;
            font-size:14px;
            font-weight:400;
        }
        .columns1 > div{
            background: url(https://img.alicdn.com/imgextra/i2/378790081/O1CN01ohfUsy1CT8wb6VzrH_!!0-saturn_solar.jpg_360x360q90.jpg_.webp) no-repeat center;
        }
        .columns2 > div{
            background: url(https://g-search3.alicdn.com/img/bao/uploaded/i4/i2/2217317131231/O1CN01SFTaX61KxqVzjWQsM_!!0-item_pic.jpg_360x360q90.jpg_.webp) no-repeat center;
            background-size: 300px;
        }
        .columns3 > div{
            background: url(https://g-search1.alicdn.com/img/bao/uploaded/i4/i4/1023745037/O1CN01dqKoqk1n4zqXaCSa7_!!1023745037.jpg_360x360q90.jpg_.webp) no-repeat center;
            background-size: 300px;
        }
        .rows1,
        .rows2{
            display: grid;
            height: 380px;
            width: 815px;
            grid-template-columns: repeat(3,1fr);
            grid-template-rows: repeat(1,1fr);
            position: relative;
            top: -650px;
            left:40px;
        }
        .rows11 > div,
        .rows12 > div,
        .rows13 > div,
        .rows21 > div,
        .rows22 > div,
        .rows23 > div{
            border-radius: 13px;
            height: 260px;
            margin-left: 5px;
        }
        .r-price{
            color: #FF6200;
            font-size: 24px;
            font-weight: 700;
        }
        .r-sell{
            color: #50607a;
            font-size: 14px;
        }
        .discount{
            color: #FF6200;
            font-size: 14px;
        }
        .shop{
            font-size: 14px;
            font-weight: 400;
            color: #50607A;
        }
        .rows11 > div{
            background: url(https://img.alicdn.com/imgextra/i4/378790081/O1CN01Z3V2vb1CT92Vc8jTW_!!0-saturn_solar.jpg_360x360q90.jpg_.webp) no-repeat center;
        }
        .rows12 > div{
            background: url(https://g-search1.alicdn.com/img/bao/uploaded/i4/i1/2209111368792/O1CN01KLFneA2Eon3ozCSj0_!!2209111368792.jpg_360x360q90.jpg_.webp) no-repeat center;
        }
        .rows13 > div{
            background: url(https://picasso.alicdn.com/imgextra/O1CNA1ntvumb2DOOjCF0ErZ_!!1636718599-0-psf.jpg_360x360q90.jpg_.webp) no-repeat center;
        }
        .rows21 > div{
            background: url(https://g-search3.alicdn.com/img/bao/uploaded/i4/i1/2211939971885/O1CN01Um4hZN1PnNWTSwj5d_!!2211939971885.jpg_360x360q90.jpg_.webp) no-repeat center;
        }
        .rows22 > div{
            background: url(https://g-search1.alicdn.com/img/bao/uploaded/i4/i4/2948486380/O1CN012OxbtI1x05mfOCLUG_!!2948486380.jpg_360x360q90.jpg_.webp) no-repeat center;
        }
        .rows23 > div{
            background: url(https://g-search1.alicdn.com/img/bao/uploaded/i4/i4/2984300945/O1CN01N1rpAZ1Iqr8xnZYMA_!!2984300945.jpg_360x360q90.jpg_.webp) no-repeat center;
        }
        .end{
            background-color: #fff;
            border-radius: 16px;
            width: 1200px;
            height: 300px;
            position: relative;
            top: -3800px;
            left: 180px;
        }
        .end > span{
            color: #6c6c6c;
            font-size: 13px;
        }
        .end > p{
            color: #6c6c6c;
            font-size: 13px;
            position: relative;
            left: 5px;
        }
    </style>
    
</head>
<body>
    <div class="content">
        <span>中国大陆</span>
        <img src="./image1.png"  style="height: 15px; width: 20px;">
        <span>tb377753179</span>
        <img src="./image1.png"  style="height: 15px; width: 20px;">
        <span>手机逛淘宝</span>
        <span>网页无障碍</span>
        <span>淘宝网首页</span>
        <span>我的淘宝</span>
        <img src="./image1.png"  style="height: 15px; width: 20px;">
        <img src="./image2.png" style="height: 15px; width: 15px; "> 
        <span>购物车105</span>
        <img src="./image3.png" style="height: 15px; width: 14px; ">
        <span>收藏夹</span>
        <img src="./image1.png"  style="height: 15px; width: 20px;">
        <span>商品分类</span>
        <span>免费开店</span>
        <img src="./image1.png"  style="height: 15px; width: 20px;">
        <span>千牛卖家中心</span>
        <img src="./image1.png"  style="height: 15px; width: 20px;">
        <span>帮助中心</span>
        <img src="./image1.png"  style="height: 15px; width: 20px;">
    </div>
    <div class="main-body">
        <div class="body">
            <div class="taobao">
                <img src="https://gw.alicdn.com/imgextra/i4/O1CN01H11jUw1gVppn3YjsM_!!6000000004148-2-tps-480-144.png" style="width: 240px; height: 72px;">
            </div>
            <div class="search">
                <span>宝贝</span>&nbsp;&nbsp;&nbsp;
                <span>
                    |
                </span>
                <span class="input">
                    <input type="text" style="width: 366px; height: 25px; ">
                </span>&nbsp;
                <span class="xiangji">
                    <img src="https://img.alicdn.com/imgextra/i3/O1CN01ieHgGm1IlMTfQMfV7_!!6000000000933-2-tps-48-48.png" style="height: 28px;  width: 28px; ">
                </span>
                <span class="ss"><button>搜索</button></span>
            </div>
        </div>
    </div>
    <div class="main-footer">
        <div class="footer">
            <div class="f1">
                <span>所有宝贝</span>
                <span>天猫</span>
                <div style="width: 100%; margin: 40px 0px; border-bottom: 1px solid rgb(238, 238, 238);"></div>
            </div>
            <div class="f2">
                <span>产地:</span>
                <span>
                    云南省&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;法国&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;丹麦&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;肯尼亚&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;英国&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;比利时
                </span>
                <div style="width: 100%; margin: 40px 0px; border-bottom: 1px solid rgb(238, 238, 238);"></div>
            </div>
            <div class="f3">
                <span>
                    综合&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销量&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;信用&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价格
                </span>
            </div>
            <div class="f4">
                <input type="checkbox">
                <span style="color: rgb(255,0,54);">618狂欢8.5折起</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="checkbox">包邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="checkbox">天猫&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="checkbox">淘金币抵钱&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="checkbox">全球购&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="checkbox">天猫国际&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
            <span class="zg">掌柜热卖</span>
            <span class="gg">广告</span>
            <div class="columns">
                <div class="columns1">
                    <div></div>
                    <span>99朵玫瑰花束鲜花速递同城配送女友...</span>
                    <span class="c-price">￥46.56</span>
                    <span class="c-sell">1万+人付款</span>
                </div>
                <div class="columns2">
                    <div></div>
                    <span>茉莉花水培植物盆栽办公室内桌面好养...</span>
                    <span class="c-price">￥5.1</span>
                    <span class="c-sell">1000+人付款</span>
                </div>
                <div class="columns3">
                    <div></div>
                    <span>七夕情人节创意向日葵花束满天星花...</span>
                    <span class="c-price">￥28.9</span>
                    <span class="c-sell">1000+人付款</span>
                </div>
            </div>
            <div class="rows1">
                <div class="rows11">
                    <div></div>
                    <span>乌梅子酱曼塔玫瑰花束鲜花速递全国同城配送女友团购生日附近花....</span>
                    <span class="r-price">￥99.76</span>
                    <span class="r-sell">77累计付款 四川</span><br>
                    <span class="discount">店铺满100减5 淘金币已抵3.24元 包邮</span><br>
                    <span class="shop">挚爱此生鲜花总店</span>
                </div>
                <div class="rows12">
                    <div></div>
                    <span>小香风碎冰蓝玫瑰永生花生日礼物情人节香皂花束表白送女朋友闺蜜...</span>
                    <span class="r-price">￥39.70</span>
                    <span class="r-sell">400+人累计付款 北京</span><br>
                    <span class="discount">包邮</span><br>
                    <span class="shop">亨花草</span>
                </div>
                <div class="rows13">
                    <div></div>
                    <span>创意生日礼物向日葵花束天然满天星玫瑰康乃馨干花表白送女友闺蜜...</span>
                    <span class="r-price">￥24.71</span>
                    <span class="r-sell">4000+人累计付款 江西</span><br>
                    <span class="discount">淘金币已抵0.59元 包邮</span><br>
                    <span class="shop">爱达鲜花</span>
                </div>
                
            </div>
            <div class="rows2">
                <div class="rows21">
                    <div></div>
                    <span>永生花礼盒小熊玩偶花束闺蜜生日礼物女生男生中高考毕业季情人节...</span>
                    <span class="r-price">￥35.80</span>
                    <span class="r-sell">400+人累计付款 浙江</span><br>
                    <span class="discount">跨店每300减50 包邮</span><br>
                    <span class="shop">哎呦礼品屋</span>
                </div>
                <div class="rows22">
                    <div></div>
                    <span>草莓柿子花束柿柿如意针织向日葵送女友闺蜜生日毕业季情人节礼物...</span>
                    <span class="r-price">￥36.07</span>
                    <span class="r-sell">7000+人累计付款 广东</span><br>
                    <span class="discount">跨店每300减50 淘金币已抵0.73元 极有家</span><br>
                    <span class="shop">印象时光</span>
                </div>
                <div class="rows23">
                    <div></div>
                    <span>七夕节礼物巧克力糖果花束成品送男女友闺蜜节日生日礼物爱意表达...</span>
                    <span class="r-price">￥30.73</span>
                    <span class="r-sell">300+人累计付款 江西</span><br>
                    <span class="discount">店铺满30减4 淘金币已抵1.07元 包邮</span><br>
                    <span class="shop">花饰间礼品店</span>
                </div>
            </div>
        </div>
    </div>
    <div class="end">
            <p>
                阿里巴巴集团 | 淘宝网 | 天猫 | 聚划算 | 全球速卖通 | 阿里巴巴国际交易市场 | 1688 | 阿里妈妈 | 飞猪 | 阿里云计算 | AliOS | 阿里通信 | 一淘 | 万网 | 高德 | UC | 友盟  |
                
                | 阿里安全 | 大麦网 | 钉钉 | 支付宝 | 优酷 | 土豆 | 阿里健康 | 阿里影业 | 网商银行 | 造点新货（众筹）| 
            </p>
            <hr>
            <span>
                关于淘宝  营销中心  廉正举报  联系客服  开放平台  诚征英才  联系我们  隐私权政策  法律声明  知识产权  不当竞争  举报 |&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;© 2003-现在 Taobao.com 版权所有
            </span>
            <br>
            <span>增值电信业务经营许可:浙B2-20080224|增值电信业务经营许可证（跨地区）： B2-20150210|浙网文【2022】0403-017号|浙江省网络食品销售第三方平台提供者备案:浙网食A33010001|</span>
            <br>
            <span>互联网药品信息服务资格证书（浙）-经营性-2023-0008|短消息类服务接入代码使用证书:号【2016】00154-A01|信息网络传播视听许可证:1109364号|出版物网络交易平台服务经营备案号:新出发浙备字第002号|</span>
            <br>
            <span>浙公网安备 33010002000078号|浙B2-20080224-1|广播电视节目制作经营许可证（浙）字第01012号|市场名称登记证：工商网市字3301004120号|医疗器械网络交易服务第三方平台备案：（浙）网械平台备字</span>
            <br>
            <span>[2018]第00004号|中国扫黄打非网|全国文化和旅游市场网上举报投诉处理系统|全国12315平台|浙江省互联网违法和不良信息举报中心|全网举报|营业性演出许可证：浙演经20213300000069|</span>
            <img src="./image5.png" style="width: 1200px;">
    </div>
</body>
</html>

运行结果

2.淘宝收藏页

代码

html 复制代码 
<!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: 0px;
        }
        .head{
            width: 100%;
            height: 60px;
            background-color: #F40;
            margin-bottom: 10px;
        }
        .head > img{
            margin-top: 16px;
            position: relative;
            left: 175px;
        }
        .head > :nth-child(2){
            font-size: 17px;
            color: #fff;
            font-weight: 500;
            position: relative;
            left: 260px;
            bottom: 6px;
        }
        .head > :nth-child(3){
            font-size: 17px;
            color: #fff;
            font-weight: 500;
            position: relative;
            left: 310px;
            bottom: 6px;
        }
        .head > input{
            width: 200px;
            height: 27px;
            float: right;
            position: relative;
            top: 16px;
            right: 250px;
        }
        .search{
            border: 1px solid #fff;
            color: #666;
            font-size: 12px;
            background: #f5f5f5;
            height: 32px;
            width: 72px;
            float: right;
            position: relative;
            top: 16.5px;
            right: -20px;
        }
        .title{
            height: 40px;
            width: 990px;
            margin: auto;
            border-bottom: #e5e5e5 2px solid;
        }
        .title > .t{
            height: 40px;
            width: 130px;
            text-align: center;
            color:#3c3c3c ;
            font-size: 14px;
            line-height: 40px;
            display: inline-block;
            position: relative;
            /* top: 10px; */
        }
        .title > :nth-child(1){
            color: #f40;
            border-bottom: #ff4200 2px solid;
        }
        .title > .t1{
        width: 68px;
        height: 27px;
        line-height: 27px;
        border: #dcdcdc 1px solid;
        text-align: center;
        display: inline-block;
        color: #6c6c6c;
        position: relative;
        left: 210px;
        }
        .input{
            height: 30px;
            width: 150px;
            display: inline-block;
        }
        .input > input{
            height: 25px;
            width: 130px;
            font-size: 12px;
            border: #dcdcdc 1px solid;
            position: relative;
            left: 215px;
            bottom: 2px;
        }
        .body{
            margin: auto;
            display: grid;
            height: 1280px;
            width: 1100px;
            grid-template-columns: repeat(7,1fr);
            grid-template-rows: repeat(6,1fr);
        }
        .body > div{
            border: 1px solid rgb(228, 222, 223);
            margin-left: 15px;
        }
        .img{
            border: 1px solid red;
            height: 148px;
        }
        .name{
            color: #3c3c3c;
            font-size: 12px;
        }
        .price{
            color: #FF4400;
            font-size: 12px;
            font-weight: 600;
            position: relative;
            left: 20px;
        }
        .discount{
            color: #9c9c9c;
            font: 12px arial;
            position: relative;
            left: 20px;
        }
        .shop{
            margin: 6px;
            color: #000000;
            font-size: 12px;
        }
        .body > div > img{
            width: 30px;
            height: 16px;
            padding: 5px;
        }
        .footer{
            margin: auto;
            height: 1080px;
            width: 1100px;
        }
        .footer > span,
        .footer > p{
            color: #6c6c6c;
            font-size: 13px;
        }
        .good{
            margin: auto;
            height: 250px;
            width: 1100px;
        }
    </style>
</head>
<body>
    <div class="head">
        <img src="https://img.alicdn.com/tps/i1/T1gbUrFeVaXXXO7MrX-136-28.png">
        <span>宝贝收藏</span>
        <span class="dp">店铺收藏</span>
        <input type="text">
        <button class="search" type="submit">搜索</button>
    </div>
    <div class="title">
        <div class="t">全部宝贝51</div>
        <div class="t">降价11</div>
        <div class="t">失效13</div>
        <div class="t">同店宝贝</div>
        <div class="t1">批量管理</div>
        <div class="input">
            <input type="text" placeholder="宝贝搜索">
        </div>
    </div>
    <div class="body">
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded/i2/1610897703/O1CN01OQkd7326m1q0l6BmD_!!1610897703.jpg_160x160xz.jpg);"></div>
            <span class="name">镂空针织衫女夏季2024...</span>
            <span class="price">￥19.90</span>
            <span class="discount"><s>￥100.00</s></span><br>
            <span class="shop">比收藏时降价80.10元</span>
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded/i4/2881336375/O1CN01OazcEF1wxnoIx1N8L_!!2881336375.jpg_160x160xz.jpg);"></div>
            <span class="name">网红老爹鞋女2024新款...</span>
            <span class="price">￥129.90</span>
            <span class="discount"><s>￥188.80</s></span><br>
            <img src="https://img.alicdn.com/imgextra/i3/O1CN01k69N9L1eVG6aZmusg_!!6000000003876-2-tps-30-16.png">
            <span class="shop" style="position: relative; bottom: 9px;">降价58.90元</span>
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded/i1/1820320410/O1CN016jmm1H1EtpLd6jwyq_!!0-item_pic.jpg_160x160xz.jpg);"></div>
            <span class="name">羽素祛痘大灯泡精华液...</span>
            <span class="price">￥169.00</span>
            <span class="discount"><s>￥469.00</s></span><br>
            <img src="https://img.alicdn.com/imgextra/i3/O1CN01k69N9L1eVG6aZmusg_!!6000000003876-2-tps-30-16.png">
            <span class="shop" style="position: relative; bottom: 9px;">降价10.00元</span>
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded/i1/2754622571/O1CN01Q0yJRn1UrZFO7fI5P_!!2-item_pic.png_160x160xz.jpg);"></div>
            <span class="name">【618立抢】馥绿德雅...</span>
            <span class="price" style="position: relative; left: 40px;">￥598.00</span><br>
            <img src="https://img.alicdn.com/imgextra/i3/O1CN01k69N9L1eVG6aZmusg_!!6000000003876-2-tps-30-16.png" style="position: relative; left: 45px;">
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded/i3/730237255/O1CN012RkDEZ23SqIgq2q5g_!!0-item_pic.jpg_160x160xz.jpg);"></div>
            <span class="name">皮筋女扎头头绳女生20...</span>
            <span class="price">￥2.80</span>
            <span class="discount"><s>￥6.90</s></span><br>
            <img src="https://img.alicdn.com/imgextra/i3/O1CN01k69N9L1eVG6aZmusg_!!6000000003876-2-tps-30-16.png" style="position: relative; left: 45px;">
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded/i4/2615936512/O1CN01Ti09Bx1xyY5o534Pk_!!2615936512.jpg_160x160xz.jpg);"></div>
            <span class="name">专业型修眉刀女士专用...</span>
            <span class="price" style="position: relative; left: 40px;">￥5.80</span><br>
            <img src="https://img.alicdn.com/imgextra/i3/O1CN01k69N9L1eVG6aZmusg_!!6000000003876-2-tps-30-16.png" style="position: relative; left: 45px;">
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded/i1/2213923851871/O1CN01LRCdLw1PgxqIxJZtB_!!0-item_pic.jpg_160x160xz.jpg);"></div>
            <span class="name">纯欲裸色调镜面唇冻秋...</span>
            <span class="price">￥15.80</span>
            <span class="discount"><s>￥35.20</s></span><br>
            <img src="https://img.alicdn.com/imgextra/i3/O1CN01k69N9L1eVG6aZmusg_!!6000000003876-2-tps-30-16.png" style="position: relative; left: 45px;">
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded/i3/2187834683/O1CN018crM1M1kSrgDyHh5Z_!!2187834683.jpg_160x160xz.jpg);"></div>
            <span class="name">秋装搭配一整套2023新...</span>
            <span class="price"  style="position: relative; left: 40px;">￥69.90</span>
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded///img.alicdn.com/bao/upload/O1CN01Psys5T1uIvD2MrPwt_!!6000000006015-0-yinhe.jpg_160x160xz.jpg);"></div>
            <span class="name">爆款炸街老爹鞋女款夏...</span>
            <span class="price">￥89.00</span>
            <span class="discount"><s>￥108.00</s></span><br>
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded///img.alicdn.com/bao/upload/O1CN015Rm0W51T1yvcgpZIk_!!6000000002323-0-yinhe.jpg_160x160xz.jpg);"></div>
            <span class="name">厚底增高老爹鞋chic百...</span>
            <span class="price">￥88.00</span>
            <span class="discount"><s>￥128.00</s></span><br>
            <img src="https://img.alicdn.com/imgextra/i3/O1CN01k69N9L1eVG6aZmusg_!!6000000003876-2-tps-30-16.png" style="position: relative; left: 45px;">
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded///img.alicdn.com/bao/upload/O1CN01R9FsKb209epeFiZrq_!!6000000006807-0-yinhe.jpg_160x160xz.jpg);"></div>
            <span class="name">夏季薄款透气老爹鞋女...</span>
            <span class="price">￥69.00</span>
            <span class="discount"><s>118.00</s></span><br>
            <span class="shop">比收藏时降价28.10元</span>
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded///img.alicdn.com/bao/upload/O1CN01zQoLnf1juyKgcDOAG_!!6000000004609-0-yinhe.jpg_160x160xz.jpg);"></div>
            <span class="name">静音键盘机械手感有线...</span>
            <span class="price">￥50.90</span>
            <span class="discount"><s>￥238.00</s></span><br>
            <img src="https://img.alicdn.com/imgextra/i3/O1CN01k69N9L1eVG6aZmusg_!!6000000003876-2-tps-30-16.png" style="position: relative; left: 45px;">
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded///img.alicdn.com/bao/upload/O1CN01kxTuiJ1YWH4hYcKIN_!!6000000003066-0-yinhe.jpg_160x160xz.jpg);"></div>
            <span class="name">unurse尤娜丝医护级卫...</span>
            <span class="price">￥23.90</span>
            <span class="discount"><s>￥45.80</s></span><br>
            <span class="shop">比收藏时降价8.10元</span>
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded/i1/1765244876/O1CN01t3MrrU1ltG69Nsvzl_!!1765244876.jpg_160x160xz.jpg);"></div>
            <span class="name">[商场同款]森马2024春...</span>
            <span class="price">￥109.00</span>
            <span class="discount"><s>￥270.00</s></span><br>
            <span class="shop">比收藏时降价72.42元</span>
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded/i3/3021407266/O1CN01yYZA1q23XsZ2SZAkY_!!3021407266.jpg_160x160xz.jpg);"></div>
            <span class="name">克莱因蓝玫瑰卡包女小...</span>
            <span class="price"  style="position: relative; left: 40px;">￥5.90</span><br>
            <img src="https://img.alicdn.com/imgextra/i3/O1CN01k69N9L1eVG6aZmusg_!!6000000003876-2-tps-30-16.png">
            <span class="shop" style="position: relative; bottom: 9px;">降价4.00元</span>
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded/i1/1929103995/O1CN01feJcEm1fNl31ovHs4_!!1929103995.jpg_160x160xz.jpg);"></div>
            <span class="name">无线鼠标荣耀Magic...</span>
            <span class="price" style="position: relative; left: 40px;">￥49.90</span><br>
            <img src="https://img.alicdn.com/imgextra/i3/O1CN01k69N9L1eVG6aZmusg_!!6000000003876-2-tps-30-16.png" style="position: relative; left: 45px;">
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded///img.alicdn.com/bao/upload/O1CN01SlUE3C22LE7Bcfh55_!!6000000007103-0-yinhe.jpg_160x160xz.jpg);"></div>
            <span class="name">娇梦强遮光蚊帐大学生...</span>
            <span class="price">￥114.80</span>
            <span class="discount"><s>599.00</s></span><br>
            <img src="https://img.alicdn.com/imgextra/i3/O1CN01k69N9L1eVG6aZmusg_!!6000000003876-2-tps-30-16.png" style="position: relative; left: 45px;">
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded///img.alicdn.com/bao/upload/O1CN01gdgaR61XLSBOHW6fc_!!6000000002907-0-yinhe.jpg_160x160xz.jpg);"></div>
            <span class="name">星球杯桶装巧克力杯饼...</span>
            <span class="price">￥8.20</span>
            <span class="discount"><s>13.20</s></span><br>
            <span class="shop">比收藏时降价0.70元</span>
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded///img.alicdn.com/bao/upload/O1CN01pqaaSB1c5wlUn0FcC_!!6000000003550-0-yinhe.jpg_160x160xz.jpg);"></div>
            <span class="name">倍思蓝牙耳机wm01无...</span>
            <span class="price">￥75.40</span>
            <span class="discount"><s>130.00</s></span><br>
            <img src="https://img.alicdn.com/imgextra/i3/O1CN01k69N9L1eVG6aZmusg_!!6000000003876-2-tps-30-16.png" style="position: relative; left: 45px;">
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded/i4/2639837995/O1CN01Rd6hxL28vlNP7VMoA_!!2639837995.jpg_160x160xz.jpg);"></div>
            <span class="name">美式短袖白色内搭t恤女...</span>
            <span class="price">￥16.98</span>
            <span class="discount"><s>20.08</s></span><br>
            <img src="https://img.alicdn.com/imgextra/i3/O1CN01k69N9L1eVG6aZmusg_!!6000000003876-2-tps-30-16.png" style="position: relative; left: 45px;">
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded/i1/2206361677447/O1CN01Bjto1G24smBHc4xkM_!!0-item_pic.jpg_160x160xz.jpg);"></div>
            <span class="name">牛仔连衣裙女春装2024...</span>
            <span class="price">￥69.80</span>
            <span class="discount"><s>98.00</s></span><br>
            <span class="shop">比收藏时降价18.20元</span>
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded/i3/2353551554/O1CN01fhD5uP1NLmKPXeMfO_!!2353551554.jpg_160x160xz.jpg);"></div>
            <span class="name">女装胖妹妹夏季新款小...</span>
            <span class="price">￥76.00</span>
            <span class="discount"><s>228.00</s></span><br>
            <img src="https://img.alicdn.com/imgextra/i3/O1CN01k69N9L1eVG6aZmusg_!!6000000003876-2-tps-30-16.png" style="position: relative; left: 45px;">
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded/i3/3052685582/O1CN0103w6ZX1r6bbByUpFl_!!3052685582.jpg_160x160xz.jpg);"></div>
            <span class="name">轻熟风高级感两件套法...</span>
            <span class="price">￥564.09</span>
            <span class="discount"><s>998.09</s></span><br>
            <img src="https://img.alicdn.com/imgextra/i3/O1CN01k69N9L1eVG6aZmusg_!!6000000003876-2-tps-30-16.png" style="position: relative; left: 45px;">
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded///img.alicdn.com/bao/upload/i4/6000000005982/O1CN01E2Z8WW1u3nyY7dELM_!!6000000005982-0-yinhe.jpg_160x160xz.jpg);"></div>
            <span class="name">界扣a52原装适用充电...</span>
            <span class="price">￥9.55</span>
            <span class="discount"><s>￥19.11</s></span><br>
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded///img.alicdn.com/bao/upload/O1CN01D3Zjub1my7q8BUhFg_!!6000000005022-0-yinhe.jpg_160x160xz.jpg);"></div>
            <span class="name">沿寿降眼压调节护眼保...</span>
            <span class="price" style="position: relative; left: 40px;">￥399.90</span><br>
            <img src="https://img.alicdn.com/imgextra/i3/O1CN01k69N9L1eVG6aZmusg_!!6000000003876-2-tps-30-16.png" style="position: relative; left: 45px;">
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded/i1/2213685484307/O1CN01a0aTwg1hgegYKxQN0_!!2213685484307.jpg_160x160xz.jpg);"></div>
            <span class="name">高考专用裤子无磁无铁...</span>
            <span class="price">￥49.80</span>
            <span class="discount"><s>￥62.26</s></span><br>
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded/i3/1736375098/O1CN0121IiB11nWvxR31XFY_!!1736375098.jpg_160x160xz.jpg);"></div>
            <span class="name">森系小香风牛仔外套女...</span>
            <span class="price">￥69.90</span>
            <span class="discount"><s>￥79.90</s></span><br>
            <img src="https://img.alicdn.com/imgextra/i3/O1CN01k69N9L1eVG6aZmusg_!!6000000003876-2-tps-30-16.png" style="position: relative; left: 45px;">
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded///img.alicdn.com/bao/upload/O1CN01WyHP6E1K5LDih07Kk_!!6000000001112-0-yinhe.jpg_160x160xz.jpg);"></div>
            <span class="name">轻漫家乐福鞋2024新款...</span>
            <span class="price">￥148.00</span>
            <span class="discount"><s>699.00</s></span><br>
            <img src="https://img.alicdn.com/imgextra/i3/O1CN01k69N9L1eVG6aZmusg_!!6000000003876-2-tps-30-16.png" style="position: relative; left: 45px;">
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded///img.alicdn.com/bao/upload/O1CN01JIBvcw25Hy42OLXBR_!!6000000007502-0-yinhe.jpg_160x160xz.jpg);"></div>
            <span class="name">英伦风小皮鞋女秋冬新...</span>
            <span class="price">￥59.90</span>
            <span class="discount"><s>89.90</s></span><br>
            <img src="https://img.alicdn.com/imgextra/i3/O1CN01k69N9L1eVG6aZmusg_!!6000000003876-2-tps-30-16.png" style="position: relative; left: 45px;">
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded///img.alicdn.com/bao/upload/O1CN0164ACgk1gAlQ5DLrx4_!!6000000004102-0-yinhe.jpg_160x160xz.jpg);"></div>
            <span class="name">英国Laishemum莱氏姆...</span>
            <span class="price">￥48.00</span>
            <span class="discount"><s>￥68.00</s></span><br>
            <img src="https://img.alicdn.com/imgextra/i3/O1CN01k69N9L1eVG6aZmusg_!!6000000003876-2-tps-30-16.png" style="position: relative; left: 45px;">
            </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded///img.alicdn.com/bao/upload/O1CN01shyNwh1qin3JEWUH0_!!6000000005530-0-yinhe.jpg_160x160xz.jpg);"></div>
            <span class="name">时尚部落软妹小皮鞋子...</span>
            <span class="price">￥58.80</span>
            <span class="discount"><s>￥108.00</s></span><br>
            <img src="https://img.alicdn.com/imgextra/i3/O1CN01k69N9L1eVG6aZmusg_!!6000000003876-2-tps-30-16.png" style="position: relative; left: 45px;">
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded/i4/3686467019/O1CN01aLT7oa21ikjLHdpWG_!!3686467019.jpg_160x160xz.jpg);"></div>
            <span class="name">深蓝色直筒牛仔裤女春...</span>
            <span class="price">￥68.00</span>
            <span class="discount"><s>￥108.00</s></span><br>
            <img src="https://img.alicdn.com/imgextra/i3/O1CN01k69N9L1eVG6aZmusg_!!6000000003876-2-tps-30-16.png" style="position: relative; left: 45px;">
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded/i2/3169614242/O1CN01tM8i2u1hCst0Tx662_!!0-item_pic.jpg_160x160xz.jpg);"></div>
            <span class="name">oversize夹克棒球服女...</span>
            <span class="price">￥98.09</span>
            <span class="discount"><s>￥103.99</s></span><br>
            <img src="https://img.alicdn.com/imgextra/i3/O1CN01k69N9L1eVG6aZmusg_!!6000000003876-2-tps-30-16.png" style="position: relative; left: 45px;">
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded/i1/2145089349/O1CN01VvarNj2IvtdYZShU2_!!0-item_pic.jpg_160x160xz.jpg);"></div>
            <span class="name">吊带背心女夏季薄内搭...</span>
            <span class="price">￥39.90</span>
            <span class="discount"><s>￥66.60</s></span><br>
            <img src="https://img.alicdn.com/imgextra/i3/O1CN01k69N9L1eVG6aZmusg_!!6000000003876-2-tps-30-16.png">
            <span class="shop" style="position: relative; bottom: 9px;">降价10.00元</span>
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded/i1/2247277415/O1CN01af3FkJ24e7cHYgxG4_!!2247277415.jpg_160x160xz.jpg);"></div>
            <span class="name">品牌外贸出口剪标尾单~...</span>
            <span class="price">￥87.88</span>
            <span class="discount"><s>￥98.98</s></span><br>
            <span class="shop">比收藏时下降20.09元</span>
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded/i3/3544240460/O1CN01Zs3S8R1FGiwzlBGAW_!!0-item_pic.jpg_160x160xz.jpg);"></div>
            <span class="name">欧美潮牌麂皮字母短袖...</span>
            <span class="price">$26.80</span>
            <span class="discount"><s>￥36.00</s></span><br>
            <img src="https://img.alicdn.com/imgextra/i3/O1CN01k69N9L1eVG6aZmusg_!!6000000003876-2-tps-30-16.png" style="position: relative; left: 45px;">
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded/i3/688017899/O1CN01blVROK28DnB0NJobW_!!688017899.jpg_160x160xz.jpg);"></div>
            <span class="name">灯芯绒衬衫外套女春...</span>
            <span class="price">￥47.95</span>
            <span class="discount"><s>￥48.00</s></span><br>
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded/i3/2206419124132/O1CN018WUf0T1gOVLGVhQ06_!!0-item_pic.jpg_160x160xz.jpg);"></div>
            <span class="name">胖mm牛角扣风衣外套...</span>
            <span class="price">￥217.00</span>
            <span class="discount"><s>￥309.00</s></span><br>
            <img src="https://img.alicdn.com/imgextra/i3/O1CN01k69N9L1eVG6aZmusg_!!6000000003876-2-tps-30-16.png" style="position: relative; left: 45px;">
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded/i4/3502707830/O1CN01TGqHCV27iByBfRVQw_!!0-item_pic.jpg_160x160xz.jpg);"></div>
            <span class="name">vintage美式机能冲锋...</span>
            <span class="price">￥118.88</span>
            <span class="discount"><s>￥168.00</s></span><br>
            <span class="shop"></span>
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded///img.alicdn.com/bao/upload/i4/6000000004085/O1CN01X9IpIb1g2yiEezxHD_!!6000000004085-0-yinhe.jpg_160x160xz.jpg);"></div>
            <span class="name">橙色奶系秋季卫衣国潮...</span>
            <span class="price">￥78.88</span>
            <span class="discount"><s>￥129.00</s></span><br>
            <span class="shop"></span>
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded/i1/665030879/O1CN017JDfCd1IMcvMbuiGQ_!!665030879.jpg_160x160xz.jpg);"></div>
            <span class="name">Konggeins日系复古秋...</span>
            <span class="price">￥98.90</span>
            <span class="discount"><s>#100.89</s></span><br>
            <span class="shop">比收藏时降价1.00元</span>
        </div>
        <div>
            <div class="img" style="background: url(https://img.alicdn.com/bao/uploaded/i1/2212752892692/O1CN017DuKsW1VkyzfIoSxX_!!0-item_pic.jpg_160x160xz.jpg);"></div>
            <span class="name">美式复古军绿色情侣...</span>
            <span class="price">￥100.89</span>
            <span class="discount"><s>￥190.90</s></span><br>
            <img src="https://img.alicdn.com/imgextra/i3/O1CN01k69N9L1eVG6aZmusg_!!6000000003876-2-tps-30-16.png" style="position: relative; left: 45px;">
        </div>
    </div>
    <div class="good">
        <pre>
            <hr>

            <hr>
</pre>
    </div>
    <div class="footer">
        <p>
            阿里巴巴集团 | 淘宝网 | 天猫 | 聚划算 | 全球速卖通 | 阿里巴巴国际交易市场 | 1688 | 阿里妈妈 | 飞猪 | 阿里云计算 | AliOS | 阿里通信 | 一淘 | 万网 | 高德 | UC | 友盟  |
            
            | 阿里安全 | 大麦网 | 钉钉 | 支付宝 | 优酷 | 土豆 | 阿里健康 | 阿里影业 | 网商银行 | 造点新货（众筹）| 
        </p>
        <hr>
        <span>
            关于淘宝  营销中心  廉正举报  联系客服  开放平台  诚征英才  联系我们  隐私权政策  法律声明  知识产权  不当竞争  举报 |&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;© 2003-现在 Taobao.com 版权所有
        </span>
        <br>
        <span>增值电信业务经营许可:浙B2-20080224|增值电信业务经营许可证（跨地区）： B2-20150210|浙网文【2022】0403-017号|浙江省网络食品销售第三方平台提供者备案:浙网食A33010001|</span>
        <br>
        <span>互联网药品信息服务资格证书（浙）-经营性-2023-0008|短消息类服务接入代码使用证书:号【2016】00154-A01|信息网络传播视听许可证:1109364号|出版物网络交易平台服务经营备案号:新出发浙备字第002号|</span>
        <br>
        <span>浙公网安备 33010002000078号|浙B2-20080224-1|广播电视节目制作经营许可证（浙）字第01012号|市场名称登记证：工商网市字3301004120号|医疗器械网络交易服务第三方平台备案：（浙）网械平台备字</span>
        <br>
        <span>[2018]第00004号|中国扫黄打非网|全国文化和旅游市场网上举报投诉处理系统|全国12315平台|浙江省互联网违法和不良信息举报中心|全网举报|营业性演出许可证：浙演经20213300000069|</span>
        <img src="./image5.png" style="width: 1200px;">
    </div>
</body>
</html>

运行结果

淘宝登入页

代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Taobao login | 淘宝登入页</title>
    <style>
        *{
            margin: 0px;
        }
        .head{
            width: 1200px;
            height: 130px;
        }
        .head > img{
            width: 72px;
            height: 45px;
            position: relative;
            left: 120px;
            top: 55px;
        }
        .body{
            background-image: url(	https://gtms01.alicdn.com/tps/i1/TB1GTCYLXXXXXcHXpXXcoeQ2VXX-2500-600.jpg);
            width: 1540px;
            height: 650px;
            background-size: cover;
            background-position: 50%;
            position: relative;
        }
        .login{
            width: 350px;
            height: 300px;
            border-top: 2px solid #f40;
            padding: 25px 25px 23px;
            background-color: #fafafa;
            background: #fff;
            float: right;
            position: relative;
            top: 100px;
            right: 150px;
        }
        .t1 , .t2{
            font-size: 17px;
            color: #3c3c3c;
            font-weight: 800;
        }
        .t1{
            border-bottom: 2px solid #3c3c3c;
        }
        .input > .text{
            height: 36px;
            width: 300px;
            border: 2px solid #f1eeee;
            position: relative;
            left: 41px;
            top: -15px;
        }
        .input > .password{
            height: 36px;
            width: 300px;
            border: 2px solid #f1eeee;
            position: relative;
            left: 41px;
            top: -41px;
        }
        .ewm > img{
            width: 200px;
            height: 56px;
            float: right;
            position: relative;
            top: -25px;
            left: 25px;
        }
        .submit > button{
            width: 340px;
            height: 42px;
            border-radius: 3px;
            color: #fff;
            text-align: center;
            background: #f40;
            border-color: #f40;
            font-size: 14px;
        }
        .eg > span{
            color: #6c6c6c;
            font-size: 12px;
            margin-left: 10px;
            float: right;
            position: relative;
            top: 20px;
        }
    </style>
</head>
<body>
    <div class="head">
        <img src="data:image/png;base64,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" alt="">
    </div>
    <div class="body">
        <div class="login">
            <div class="ewm">
                <img src="./image.png" style="width: 100px; height: 56px; float: right;">
            </div>
            <div class="title">
                <span class="t1">密码登录</span>
                <span class="t2">短信登录</span>
            </div>
            <div class="input">
                <img src="./image6.png" style="width: 42px; height:42px; position: relative; top: 30px;">
                <input class="text" type="text" name="text" id="text" placeholder="账号名/邮箱/手机号">
                <img src="./image7.png" style="width: 42px; height:42px; position: relative; top: 5px;">
                <input class="password" type="password" name="password" id="password" placeholder="请输入登录密码">
            </div>
            <div class="submit">
                <button>登录</button>
            </div>
            <div class="eg">
                <span>忘记密码</span>
                <span>忘记账户名</span>
                <span>免费注册</span>
            </div>
        </div>
    </div>
    <div class="foot"></div>
</body>
</html>

运行结果

相关推荐
四喜花露水28 分钟前
Vue 自定义icon组件封装SVG图标
前端·javascript·vue.js
前端Hardy37 分钟前
HTML&CSS： 实现可爱的冰墩墩
前端·javascript·css·html·css3
web Rookie1 小时前
JS类型检测大全：从零基础到高级应用
开发语言·前端·javascript
Au_ust1 小时前
css:基础
前端·css
帅帅哥的兜兜1 小时前
css基础：底部固定，导航栏浮动在顶部
前端·css·css3
yi碗汤园1 小时前
【一文了解】C#基础-集合
开发语言·前端·unity·c#
就是个名称1 小时前
购物车-多元素组合动画css
前端·css
编程一生2 小时前
回调数据丢了？
运维·服务器·前端
丶21362 小时前
【鉴权】深入了解 Cookie：Web 开发中的客户端存储小数据
前端·安全·web
Missmiaomiao3 小时前
npm install慢
前端·npm·node.js
热门推荐
01如何才能让手机厂商主动拥抱华为，接入鸿蒙系统？02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测05RAG 实践- Ollama+RagFlow 部署本地知识库06【经验分享】Ubuntu22.04安装微信(linux官方版)07Macbook pro M1 安装Ubuntu教程08【Java】Ruoyi-Vue-Plus 整合 文件分片上传至 minio、阿里云、七牛云等OSS-【后端篇】09Windows10安装PCL1.14.0及点云配准10文件或文件夹名称中有空格如何批量去除