第三次作业

最新推荐文章于 2025-04-24 20:26:19 发布

2301_81882420

最新推荐文章于 2025-04-24 20:26:19 发布

阅读量188

点赞数 1

文章标签：前端 css html

本文链接：https://blog.csdn.net/2301_81882420/article/details/139797313

版权

1. 商品展示页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业2.1(商品展示页)</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .O{
            width: 281px;
            height: 80px;
            border: 1px;
            float: left;
            margin-top: 10px;
            margin-left: 10px;
        }
        .A{
            width: 1500px;
            height: 50px;
            text-align: center;
        }
        ul{
            list-style: none;
        }
        .A2{
            width: 100px;
            text-align: center;
            display: inline-block;
        }
        .A21{
            padding: 13px 10px;
            height: 30px;
            line-height: 30px;
            color: #9b9b9b;
            text-decoration: none;
            display: block;
        }
        .A21:hover{
            background-color: rgb(214, 196, 196);
        }
        .B{
            float: left;

        }
        .B2{
            list-style-type: none;
            width: 234px;
            height: 366px;
            border: 1px solid #f2f2f2;
            margin-top: 50px;
            margin: 0px;
            display:  inline-block;
            line-height: 1;
            padding: 22px 20px 0;
            position: relative;
            box-sizing: border-box;
        }
        .B2:hover{
            border-color: red;
        }
        .B3{
            text-decoration: none;
        }
        .B31{
            font-size: 14px;
            color: #9b9b9b;
            line-height: 20px;
            padding-top: 10px;
        }
        .B32{
            font-size: 18px;
            color: #fd3f31;
            line-height: 25px;
        }
        .B33{
            font-size: 12px;
            color: #9b9b9b;
            line-height: 17px;
        }
        .B34{
            border-top: 1px solid #f2f2f2;
            position: relative;
        }
        .B341{
            position: absolute;
            top:9px;
            right: 0;
            color: #9b9b9b;
            font-size: 12px;
        }
        .C{
            width: 1190px;
            height: 42.333px;
        }
        .C1{
            height: 41px;
            line-height: 41px;
            background: #f5f5f5;
            border: 1px solid #e9e9e9;
            overflow: hidden;
            padding: 0 0 0 19px;
        }
        dt{
            font-size: 12px;
            color: #747474;
            margin: 0 -2px 0 0;
            float: left;
        }
        dd{
            float: left;
            font-size: 12px;
        }
        .C5{
            border-right: 1px solid #666;
            color: #333;
            padding: 0 13px 0 12px;
        }
    </style>
</head>
<body>
    <div class="A">
        <img class="O" src="https://img.alicdn.com/tfs/TB1R5fsgyDsXe8jSZR0XXXK6FXa-281-80.jpg">
        <ul class="A1">
            <li class="A2"><a class="A21" href="https://www.etao.com/cjfl/flash.htm?spm=a2e0b.20350158.1998559106.1.67ed468auLmudt&pid=mm_0_0_0">一淘限时抢</a></li>
            <li class="A2"><a class="A21" href="https://uland.taobao.com/sem/tbsearch?refpid=mm_26632258_3504122_32538762&keyword=%E7%AC%94%E8%A2%8B&clk1=0a026a0daa0de7d0dccd3e2a4a91bf8d&upsId=0a026a0daa0de7d0dccd3e2a4a91bf8d">笔袋</a></li>
            <li class="A2"><a class="A21" href="https://uland.taobao.com/sem/tbsearch?refpid=mm_26632258_3504122_32538762&keyword=%E6%89%8B%E6%9C%BA&clk1=0a026a0daa0de7d0dccd3e2a4a91bf8d&upsId=0a026a0daa0de7d0dccd3e2a4a91bf8d">手机</a></li>
            <li class="A2"><a class="A21" href="https://uland.taobao.com/sem/tbsearch?refpid=mm_26632258_3504122_32538762&keyword=%E6%B4%97%E8%A1%A3%E6%9C%BA&clk1=0a026a0daa0de7d0dccd3e2a4a91bf8d&upsId=0a026a0daa0de7d0dccd3e2a4a91bf8d">洗衣机</a></li>
            <li class="A2"><a class="A21" href="https://uland.taobao.com/sem/tbsearch?refpid=mm_26632258_3504122_32538762&keyword=%E7%89%99%E8%86%8F&clk1=0a026a0daa0de7d0dccd3e2a4a91bf8d&upsId=0a026a0daa0de7d0dccd3e2a4a91bf8d">牙膏</a></li>
            <li class="A2"><a class="A21" href="https://uland.taobao.com/sem/tbsearch?refpid=mm_26632258_3504122_32538762&keyword=%E8%BF%90%E5%8A%A8%E9%9E%8B&clk1=0a026a0daa0de7d0dccd3e2a4a91bf8d&upsId=0a026a0daa0de7d0dccd3e2a4a91bf8d">运动鞋</a></li>
            <li class="A2"><a class="A21" href="https://uland.taobao.com/sem/tbsearch?refpid=mm_26632258_3504122_32538762&keyword=%E7%94%B5%E5%8A%A8%E8%BD%A6&clk1=0a026a0daa0de7d0dccd3e2a4a91bf8d&upsId=0a026a0daa0de7d0dccd3e2a4a91bf8d">电动车</a></li>
            <li class="A2"><a class="A21" href="https://uland.taobao.com/sem/tbsearch?refpid=mm_26632258_3504122_32538762&keyword=%E5%8D%AB%E8%A1%A3&clk1=0a026a0daa0de7d0dccd3e2a4a91bf8d&upsId=0a026a0daa0de7d0dccd3e2a4a91bf8d">卫衣</a></li>
            <li class="A2"><a class="A21" href="https://uland.taobao.com/sem/tbsearch?refpid=mm_26632258_3504122_32538762&keyword=%E5%A5%B3%E5%A4%96%E5%A5%97&clk1=0a026a0daa0de7d0dccd3e2a4a91bf8d&upsId=0a026a0daa0de7d0dccd3e2a4a91bf8d">女外套</a></li>
            <li class="A2"><a class="A21" href="https://uland.taobao.com/sem/tbsearch?refpid=mm_26632258_3504122_32538762&keyword=%E8%BF%9E%E8%A1%A3%E8%A3%99&clk1=0a026a0daa0de7d0dccd3e2a4a91bf8d&upsId=0a026a0daa0de7d0dccd3e2a4a91bf8d">连衣裙</a></li>
            <li class="A2"><a class="A21" href="https://uland.taobao.com/sem/tbsearch?spm=a2e0b.20350158.1998559106.11.67ed468auLmudt&refpid=mm_26632258_3504122_32538762&keyword=%E9%9B%B6%E9%A3%9F&clk1=0a026a0daa0de7d0dccd3e2a4a91bf8d&upsId=0a026a0daa0de7d0dccd3e2a4a91bf8d&pid=mm_26632258_3504122_32538762&union_lens=recoveryid%3A201_33.44.185.121_3522030_1717308852577%3Bprepvid%3A201_33.44.185.121_3522030_1717308852577">零食</a></li>
        </ul>
    </div>

    <div class="B">
        <ul class="B1">
            <li class="B2">
                <a class="B3" href="https://item.taobao.com/item.htm?id=653379957867&ali_refid=a3_430673_1006:1121267516:N:emtiAWsF8%2Bzhhxaiwzc0Aw%3D%3D:c24a714d2caa46b0223e777fe267fe7f&ali_trackid=199_c24a714d2caa46b0223e777fe267fe7f&spm=a2e0b.20350158.31919782.4&bxsign=tanEL5DNXSLP_ugqaXc4j1Hc6meBg9p1esEUpZAHz8T0Ns6EnIRMPn44AC2Uqo6u3d_XCwTLG0SbyIGoT2hx2RClQ4WULRYvDjYjPzetsAyTOA">
                    <img src="https://gw.alicdn.com/imgextra/i2/1752264181/O1CN014cmMD41gkweQkbUNI_!!1752264181.jpg_Q75.jpg_.webp" width="194px" height="198px">
                    <div class="B31"><span>高级感西装套装女阔腿裤2024春季新款韩版高端英伦风休闲格子西服</span></div>
                    <div class="B32"><span>￥768</span></div>
                    <div class="B33"><span>冷子璇原创女装</span></div>
                    <div class="B34"><div class="B341"><span>月销 99w+</span></div></div>
                </a>
            </li>
            <li class="B2">
                <a class="B3" href="https://item.taobao.com/item.htm?id=783454172985&ali_refid=a3_430673_1006:1150684138:N:emtiAWsF8%2Bzhhxaiwzc0Aw%3D%3D:3c7a96699d895b198f036458aafe58f9&ali_trackid=100_3c7a96699d895b198f036458aafe58f9&spm=a21n57.sem.item.1#detail">
                    <img src="https://gw.alicdn.com/imgextra/i2/2099986234/O1CN01C3Yge41vvE1mPTHvD_!!2099986234.jpg_Q75.jpg_.webp" width="194px" height="198px">
                    <div class="B31"><span>小香风气质女神范高端套装夏季搭配一整套时尚半身裙子舒适两件套</span></div>
                    <div class="B32"><span>￥209</span></div>
                    <div class="B33"><span>希语颜时尚女装</span></div>
                    <div class="B34"><div class="B341"><span>月销 99w+</span></div></div>
                </a>
            </li>
            <li class="B2">
                <a class="B3" href="https://item.taobao.com/item.htm?id=670794654965&ali_refid=a3_430673_1006:1108003615:N:emtiAWsF8%2Bzhhxaiwzc0Aw%3D%3D:c01b24b833f1a72270eb58efe7560241&ali_trackid=199_c01b24b833f1a72270eb58efe7560241&spm=a21n57.sem.item.3#detail">
                    <img src="https://gw.alicdn.com/bao/uploaded/i4/1048422080/O1CN01jdocNt1REgmI7oWdb_!!1048422080.jpg_Q75.jpg_.webp" width="194px" height="198px">
                    <div class="B31"><span>杨二大梦原创雾里看花迷幻油画设计感花朵拼纱衬衫短袖衬衫女</span></div>
                    <div class="B32"><span>￥198</span></div>
                    <div class="B33"><span>杨二大梦</span></div>
                    <div class="B34"><div class="B341"><span>月销 99w+</span></div></div>
                </a>
            </li>
            <li class="B2">
                <a class="B3" href="https://item.taobao.com/item.htm?id=799304979228&ali_refid=a3_430673_1006:1104810474:N:emtiAWsF8%2Bzhhxaiwzc0Aw%3D%3D:ae7a6aebd956a8fe8a2d5aba01f09038&ali_trackid=199_ae7a6aebd956a8fe8a2d5aba01f09038&spm=a21n57.sem.item.5#detail">
                    <img src="https://gw.alicdn.com/imgextra/i1/702990799/O1CN01A5YEoR1HlzPvQ6kab_!!702990799.jpg_Q75.jpg_.webp" width="194px" height="198px">
                    <div class="B31"><span>欧洲站2024夏季新款小众设计气质极简风无袖马夹阔腿裤亚麻套装女</span></div>
                    <div class="B32"><span>￥599</span></div>
                    <div class="B33"><span>XIYANENE 原创轻奢店企业店</span></div>
                    <div class="B34"><div class="B341"><span>月销 99w+</span></div></div>
                </a>
            </li>
            <li class="B2">
                <a class="B3" href="https://item.taobao.com/item.htm?id=722097312452&ali_refid=a3_430673_1006:1680840548:N:emtiAWsF8%2Bzhhxaiwzc0Aw%3D%3D:cd4204a3f9efc055a7b4a1b57fe05113&ali_trackid=100_cd4204a3f9efc055a7b4a1b57fe05113&spm=a21n57.sem.item.4#detail">
                    <img src="https://gw.alicdn.com/imgextra/i2/2208545040716/O1CN016lTne41H9yWVUhBRg_!!2208545040716.jpg_Q75.jpg_.webp" width="194px" height="198px">
                    <div class="B31"><span>诗梵黑鑫气质女装夏季2023新款圆领真丝桑蚕丝蝴蝶印花减龄连衣裙</span></div>
                    <div class="B32"><span>￥249</span></div>
                    <div class="B33"><span>气质女装代购</span></div>
                    <div class="B34"><div class="B341"><span>月销 99w+</span></div></div>
                </a>
            </li>
            <li class="B2">
                <a class="B3" href="https://item.taobao.com/item.htm?id=798535080225&ali_refid=a3_430673_1006:1104810474:N:emtiAWsF8%2Bzhhxaiwzc0Aw%3D%3D:769b2846511182bdd6f8bb683abd9130&ali_trackid=199_769b2846511182bdd6f8bb683abd9130&spm=a21n57.sem.item.6#detail">
                    <img src="https://gw.alicdn.com/imgextra/i4/702990799/O1CN01mXUoFK1HlzPp8pmhf_!!702990799.jpg_Q75.jpg_.webp" width="194px" height="198px">
                    <div class="B31"><span>欧洲站2024夏季新款小众设计钉珠花朵网纱拼接无袖t恤马甲上衣女</span></div>
                    <div class="B32"><span>￥399</span></div>
                    <div class="B33"><span>XIYANENE 原创轻奢店企业店</span></div>
                    <div class="B34"><div class="B341"><span>月销 99w+</span></div></div>
                </a>
            </li>
            <li class="B2">
                <a class="B3" href="https://item.taobao.com/item.htm?id=802485631332&ali_refid=a3_430673_1006:1104431970:N:emtiAWsF8%2Bzhhxaiwzc0Aw%3D%3D:65df113803c90c207dd7e7d96e6631dd&ali_trackid=199_65df113803c90c207dd7e7d96e6631dd&spm=a21n57.sem.item.7#detail">
                    <img src="https://gw.alicdn.com/imgextra/i3/236842879/O1CN01w2GFpa1X8dEqJ3mHa_!!236842879.jpg_Q75.jpg_.webp" width="194px" height="198px">
                    <div class="B31"><span>[06.16新品限时9折]五季家大码女装连衣裙胖mm别致设计感露肩裙子</span></div>
                    <div class="B32"><span>￥320</span></div>
                    <div class="B33"><span>五季家大码女装 胖MM百分百实拍</span></div>
                    <div class="B34"><div class="B341"><span>月销 99w+</span></div></div>
                </a>
            </li>
            <li class="B2">
                <a class="B3" href="https://item.taobao.com/item.htm?id=797673891620&ali_refid=a3_430673_1006:1124152520:N:emtiAWsF8%2Bzhhxaiwzc0Aw%3D%3D:d3df3cdc851d022c1424f6d98255c85d&ali_trackid=199_d3df3cdc851d022c1424f6d98255c85d&spm=a21n57.sem.item.10#detail">
                    <img src="https://gw.alicdn.com/bao/uploaded/i3/2960929541/O1CN01lvNDGX2KLppOC5Mqx_!!2960929541.jpg_Q75.jpg_.webp" width="194px" height="198px">
                    <div class="B31"><span>芝士定制芙罗拉设计感堆堆领修身显瘦针织衫女夏季短袖上衣薄款</span></div>
                    <div class="B32"><span>￥69.9</span></div>
                    <div class="B33"><span>芝士定制</span></div>
                    <div class="B34"><div class="B341"><span>月销 99w+</span></div></div>
                </a>
            </li>
            <li class="B2">
                <a class="B3" href="https://detail.tmall.com/item.htm?id=800727731654&ali_refid=a3_430673_1006:1279400141:H:emtiAWsF8%2Bzhhxaiwzc0Aw%3D%3D:14136624e6fcb3ac8178a9c3bb88fec9&ali_trackid=282_14136624e6fcb3ac8178a9c3bb88fec9&spm=a21n57.sem.item.11">
                    <img src="https://gw.alicdn.com/imgextra/i3/2207312794127/O1CN01LHqZ9T1gMDWXjf4YQ_!!0-item_pic.jpg_Q75.jpg_.webp" width="194px" height="198px">
                    <div class="B31"><span>休闲运动防晒衣套装女夏季2024新款轻薄防紫外线冰丝阔腿裤两件套</span></div>
                    <div class="B32"><span>￥279</span></div>
                    <div class="B33"><span>auyee旗舰店</span></div>
                    <div class="B34"><div class="B341"><span>月销 99w+</span></div></div>
                </a>
            </li>
            <li class="B2">
                <a class="B3" href="https://item.taobao.com/item.htm?id=798441876646&ali_refid=a3_430673_1006:1104431970:N:emtiAWsF8%2Bzhhxaiwzc0Aw%3D%3D:84a33b9dc7cf2a66f60da5ae740efee1&ali_trackid=199_84a33b9dc7cf2a66f60da5ae740efee1&spm=a21n57.sem.item.15#detail">
                    <img src="https://gw.alicdn.com/bao/uploaded/i2/236842879/O1CN01sOhedX1X8dEoHT36N_!!236842879.jpg_Q75.jpg_.webp" width="194px" height="198px">
                    <div class="B31"><span>五季家法式大码连衣裙胖mm2024年新款拼接假两件收腰显瘦吊带裙子</span></div>
                    <div class="B32"><span>￥340</span></div>
                    <div class="B33"><span>五季家大码女装 胖MM百分百实拍</span></div>
                    <div class="B34"><div class="B341"><span>月销 99w+</span></div></div>
                </a>
            </li>
            <li class="B2">
                <a class="B3" href="https://detail.tmall.com/item.htm?id=719789546722&ali_refid=a3_430673_1006:1309090145:N:emtiAWsF8%2Bzhhxaiwzc0Aw%3D%3D:8161add5608d1932c5f63bca065398e3&ali_trackid=1_8161add5608d1932c5f63bca065398e3&spm=a21n57.sem.item.26">
                    <img src="https://gw.alicdn.com/imgextra/i2/2207428872235/O1CN018ql1iq1SNg3CKn1kJ_!!0-item_pic.jpg_Q75.jpg_.webp" width="194px" height="198px">
                    <div class="B31"><span>2023夏季新款欧货时尚气质轻奢高级感职业套装女装雪纺衬衫连衣裙</span></div>
                    <div class="B32"><span>￥398</span></div>
                    <div class="B33"><span>欧莎影旗舰店</span></div>
                    <div class="B34"><div class="B341"><span>月销 99w+</span></div></div>
                </a>
            </li>
            <li class="B2">
                <a class="B3" href="https://item.taobao.com/item.htm?id=776985810144&ali_refid=a3_430673_1006:1334250078:H:emtiAWsF8%2Bzhhxaiwzc0Aw%3D%3D:a29bb30a30cde8d197f4954e715d88fb&ali_trackid=282_a29bb30a30cde8d197f4954e715d88fb&spm=a21n57.sem.item.30#detail">
                    <img src="https://img.alicdn.com/imgextra/i3/1374400029/O1CN01yz1bEX1C5KRdK1JNZ_!!0-saturn_solar.jpg_580x580q90.jpg_.webp" width="194px" height="198px">
                    <div class="B31"><span>魏妮妮新中式刺绣小个子2024新款轻国风改良裙子套装春装女</span></div>
                    <div class="B32"><span>￥106</span></div>
                    <div class="B33"><span>魏妮妮 NICOLE YU</span></div>
                    <div class="B34"><div class="B341"><span>月销 99w+</span></div></div>
                </a>
            </li>
            <li class="B2">
                <a class="B3" href="https://item.taobao.com/item.htm?id=801496801800&ali_refid=a3_430673_1006:1124825019:H:emtiAWsF8%2Bzhhxaiwzc0Aw%3D%3D:679300005fb12e3a3520949822b09d3e&ali_trackid=282_679300005fb12e3a3520949822b09d3e&spm=a21n57.sem.item.42#detail">
                    <img src="https://gw.alicdn.com/imgextra/i4/2602370342/O1CN01pfF40E1EOgPp5htSK_!!2602370342.jpg_Q75.jpg_.webp" width="194px" height="198px">
                    <div class="B31"><span>薄款微透v领长袖韩系T恤女装夏季宽松防晒罩衫休闲慵懒风罩衣上衣</span></div>
                    <div class="B32"><span>￥363</span></div>
                    <div class="B33"><span>金牌代购女装专柜店</span></div>
                    <div class="B34"><div class="B341"><span>月销 99w+</span></div></div>
                </a>
            </li>
            <li class="B2">
                <a class="B3" href="https://detail.tmall.com/item.htm?id=800704140115&ali_refid=a3_430673_1006:1687747411:H:5AWiOP%2Bckwa4uqHBCbnYNg%3D%3D:b426d655347ee653097f5f2e78861b95&ali_trackid=282_b426d655347ee653097f5f2e78861b95&spm=a21n57.sem.item.32">
                    <img src="https://gw.alicdn.com/imgextra/i4/2217546263322/O1CN01SeFmD91aPWgttZsYz_!!0-item_pic.jpg_Q75.jpg_.webp" width="194px" height="198px">
                    <div class="B31"><span>生活在左100%桑蚕丝连衣裙手绣牡丹复古2024春夏新品花仙子长裙女</span></div>
                    <div class="B32"><span>￥1599</span></div>
                    <div class="B33"><span>生活在左时尚旗舰店</span></div>
                    <div class="B34"><div class="B341"><span>月销 99w+</span></div></div>
                </a>
            </li>
        </ul>
    </div>

    <div class="C">
        <dl class="C1">
            <dt>您是不是要找:</dt>
            <dd>
                <span class="C5">vivo</span>
                <span class="C5">睡衣</span>
                <span class="C5">连衣裙</span>
                <span class="C5">女装</span>
                <span class="C5">新款外套</span>
                <span class="C5">粉底</span>
                <span class="C5">电动车</span>
                <span class="C5">双肩包</span>
                <span class="C5">新款包包</span>
                <span class="C5">水杯</span>
            </dd>
        </dl>
    </div>
</body>
</html>

2.登录页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业2.1(登录页)</title>
    <style>
        .O{
            width: 100%;
            height: 10000px;
            background: #f0eff2;
        }
        .A{
            width: 1200px;
            height: 42px;
        }
        .A1{
            width: 72px;
            height: 42px;
            margin-left: 60px;
            margin-top: 10px;
        }
        .B{
            width: 885px;
            height: 514px;
            border-radius: 18px;
            min-height: 322px;
            padding: 80px 0 0;
            color: #6c6c6c;
            background: #fff;
            position: relative;
            margin: 0 auto;
            margin-top: 80px;
        }
        .B1{
            display: flex;
            background-color: #fff;
            width: 724px;
            height: 297px;
            margin: 0 80px;
            flex-direction: row;
        }
        .C{
            width: 350px;
            height: 358px;
        }
        .D{
            width: 336px;
            height: 297px;
            margin-left: 30px;
        }
        .C1{
            width: 356px;
            height: 20px; 
            padding: 0 20px;
            height: 16px;
            margin: 0;
            font-size: 22px;
            font-weight: 600;
            line-height: 16px;
            letter-spacing: 0;
            color: #11192d;
        }
        .C2{
            width: 350px;
            height: 292px;
            margin-top: 48px;
        }
        .C21{
            width: 350px;
            height: 48px;
            padding-left: 20px;
            height: 48px;
            border-radius: 8px;
            border: none;
            background: #f3f6f8;
            font-size: 16px;
            font-weight: 500;
            line-height: 18px;
        }
        .C22{
            width: 350px;
            height: 48px;
            padding-left: 20px;
            height: 48px;
            border-radius: 8px;
            border: none;
            background: #f3f6f8;
            font-size: 16px;
            font-weight: 500;
            line-height: 18px;
            margin-top: 20px;
        }
        .C23{
            margin-top: 50px;
            width: 350px;
            height: 48px;
            border-radius: 8px;
            border-width: 0;
            background: #ff6200;
            font-size: 16px;
            font-weight: 500;
            line-height: 14px;
            text-align: center;
            letter-spacing: 0;
            color: #fff;
        }
        .D1{
            height: 30px;
            font-size: 22px;
            color: #11192d;
            text-align: center;
        }
        .D2{
           width: 190px;
           height: 190px;
           margin-top: 30px;
           margin-left: 38px;
        }
    </style>
</head>
<body>
    <div class="O">
        <div class="A">
            <img class="A1" src="data:image/png;base64,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">
        </div>
        <div class="B">
            <div class="B1">
                <div class="C">
                    <div class="C1">
                        <span class="C1">密码登录</span>
                        <span class="C1">短信登录</span>
                    </div>
                    <div class="C2">
                        <input class="C21" type="text" placeholder="账号名/邮箱/手机号">
                        <input class="C22" type="password" placeholder="请输入登录密码">
                        <button class="C23" type="submit">登录</button>
                    </div>
                </div>
                <div class="D">
                    <div class="D1">
                        <span class="D1">手机扫码安全登录</span>
                    </div>
                    <div class="D2">
                            <img class="D2" src="./屏幕截图 2024-06-18 142004.png">
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</body>
</html>

3.购物车

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业2.3(购物车)</title>
    <style>
        .O{
            width: 100%;
            height: 10000px;
            background-color: #F3F6F8;
        }
        .A{
            width: 100%;
            height: 72px;
        }
        .A1{
            width: 172px;
            height: 62px;
            margin: 0px 0px 0px 16px;
        }
        .A2{
            width: 364px;
            height: 36px;
            border: 2px solid #ff5000;
            float: right;
            margin-top: 15px;
            margin-right: 50px;
            border-radius: 8px;
            position: relative;
        }
        .A3{
            width: 272px;
            height: 36px;
            color: #7c889c;    
            margin-left: 11px;
            position: absolute;
            font-size: 14px;
            margin-top: 8px;
        }
        .A4{
            width: 66px;
            height: 32px;
            float: right;
            background-color: #ff5000;
            border-radius: 4px;
            margin-top: 2px;
            margin-right: 2px;
        }
        .A5{
            color: #fff;
            margin-top: 4px;
            margin-left: 17px;
        }
        .B{
            width: 872px;
            height: 426px;
            background-color: #fff;
            border-radius: 16px;
            margin-top: 30px;
            margin-left: 380px;
        }
        .B1{
            width: 90px;
            height: 90px;
            margin: 96px auto 0;
        }
        .B2{
            width: 872px;
            height: 36px;
            font-size: 12px;
            color: #7c889c;
            text-align: center;
            line-height: 36px;
            margin-top: 100px;
        }
        .B3{
            display: block;
            width: 180px;
            height: 48px;
            margin: 20px auto 0;
            font-size: 16px;
            color: #fff;
            font-weight: 700;
            line-height: 48px;
            text-align: center;
            background-color: #ff5000;
            border-radius: 8px;
        }
        .C{
            width: 1136px;
            height: 54px;
            margin-top: 20px;
            margin-left: 220px;
        }
        .p{
            font-size: 12px;
            color: #6c6c6c;
        }
        span,b{
            margin: 0 4px;
            font-weight: 400;
            color: #9a8a8a;
        }
    </style>
</head>
<body>
    <div class="O">
        <div class="A">
            <img class="A1" src="https://gw.alicdn.com/imgextra/i3/O1CN01gLsgvX1p4esTtdV7g_!!6000000005307-2-tps-688-160.png">
            <div class="A2">
                <div class="A3">双肩包</div>
                <div class="A4">
                    <div class="A5">
                        搜索
                    </div>
                </div>
            </div>
        </div>
        <div class="B">
            <div class="B1">
                <img class="B1" src="https://gw.alicdn.com/imgextra/i2/O1CN012wdVsS1rz6vY8HeoO_!!6000000005701-2-tps-360-360.png">
            </div>
            <div class="B2">
                您的购物车空空如也, 去首页逛逛吧
            </div>
            <div class="B3">
                去逛逛
            </div>
        </div>
        <div class="C">
                <p>
                    <span>阿里巴巴集团</span><b>|</b>
                    <span>淘宝网</span><b>|</b>
                    <span>天猫</span><b>|</b>
                    <span>聚划算</span><b>|</b>
                    <span>全球速卖通</span><b>|</b>
                    <span>阿里巴巴国际交易市场</span><b>|</b>
                    <span>阿里妈妈</span><b>|</b>
                    <span>飞猪</span><b>|</b>
                    <span>阿里云计算</span><b>|</b>
                    <span>阿里通信</span><b>|</b>
                    <span>一淘</span><b>|</b>
                    <span>万网</span><b>|</b>
                    <span>高德</span>
                </p>
        </div>
    </div>
</body>
</html>