第二次作业

最新推荐文章于 2024-09-14 18:52:56 发布

hour745

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量244

点赞数 1

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/2402_85171273/article/details/139440653

版权

作业1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第二次作业1</title>
    <style>
       .b{
        display: inline-block;
        background-color: black;
        color: white;
        text-align: center;
        border-radius: 50px;
        box-shadow: 10px 10px 10px gray;
       }
       div{
        display: inline-block;
       }
       .a:hover{
        background-color: red;
        /* color: white; */
        text-shadow: 10px 10px 10px white;
       }
    </style>
</head>
<body>
    <div class="b">
        <div><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div>
        <div><span class="a">游戏1</span></div>
        <div><span class="a">游戏2</span></div>
        <div><span class="a">游戏3</span></div>
        <div><span class="a">游戏4</span></div>
        <div><span class="a">游戏5</span></div>
        <div><span class="a">游戏6</span></div>
        <div><span class="a">游戏7</span></div>
        <div><span class="a">游戏8</span></div>
        <div><span class="a">游戏9</span></div>
        <div><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div>
    </div>
</body>
</html>

作业2

（1）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第二次作业2</title>
    <style>
         li{
            list-style-type: none;
            height: 366px;
            width: 234px;
            /* border: 1px solid red; */
            padding: 22px 20px 0;

            
            
            
            
            display: inline-block;
        }
        li:hover{
            border: 1px solid red;
        }
        a{
            text-decoration: none;
        }
        .i1{
            font-size: 14px;
            color: #9b9b9b;
        }
        .p1{
            font-size: 18px;
            color: red;
        }
        .b1{
            font-size: 12px;
            color: #9b9b9b;
        }
        .s1{
            border-top: 1px solid #9b9b9b;
            position: relative;
            
        }
        .f1{
            top: 9px;
            right: 0px;
            position: absolute;
            font-size: 12px;
            color: #9b9b9b;
        }
        .i2{
            font-size: 14px;
            color: #9b9b9b;
        }
        .p2{
            font-size: 18px;
            color: red;
        }
        .b2{
            font-size: 12px;
            color: #9b9b9b;
        }
        .s2{
            position: relative;
            border-top: 1px solid #9b9b9b;
        }
        .f2{
            font-size: 12px;
            color: #9b9b9b;
            position: absolute;
        }
        .i3{
            color: #9b9b9b;
            font-size: 12px;
        }
        .p3{
            font-size: 18px;
            color: red;
        }
        .b3{
            font-size: 12px;
            color: #9b9b9b;
        }
        .s3{
            position: relative;
            border-top: 1px solid #9b9b9b;
        }
        .f3{
            font-size: 12px;
            color: #9b9b9b;
            position: absolute;
        }
        .i4{
            color: #9b9b9b;
            font-size: 12px;
        }
        .p4{
            font-size: 18px;
            color: red;
        }
        .b4{
            font-size: 12px;
            color: #9b9b9b;
        }
        .s4{
            position: relative;
            border-top: 1px solid #9b9b9b;
        }
        .f4{
            font-size: 12px;
            color: #9b9b9b;
            position: absolute;
        }
        .i5{
            color: #9b9b9b;
            font-size: 12px;
        }
        .p5{
            font-size: 18px;
            color: red;
        }
        .b5{
            font-size: 12px;
            color: #9b9b9b;
        }
        .s5{
            position: relative;
            border-top: 1px solid #9b9b9b;
        }
        .f5{
            font-size: 12px;
            color: #9b9b9b;
            position: absolute;
        }
        .i6{
            color: #9b9b9b;
            font-size: 12px;
        }
        .p6{
            font-size: 18px;
            color: red;
        }
        .b6{
            font-size: 12px;
            color: #9b9b9b;
        }
        .s6{
            position: relative;
            border-top: 1px solid #9b9b9b;
        }
        .f6{
            font-size: 12px;
            color: #9b9b9b;
            position: absolute;
        }
        .i7{
            color: #9b9b9b;
            font-size: 12px;
        }
        .p7{
            font-size: 18px;
            color: red;
        }
        .b7{
            font-size: 12px;
            color: #9b9b9b;
        }
        .s7{
            position: relative;
            border-top: 1px solid #9b9b9b;
        }
        .f7{
            font-size: 12px;
            color: #9b9b9b;
            position: absolute;
        }
        .i8{
            color: #9b9b9b;
            font-size: 12px;
        }
        .p8{
            font-size: 18px;
            color: red;
        }
        .b8{
            font-size: 12px;
            color: #9b9b9b;
        }
        .s8{
            position: relative;
            border-top: 1px solid #9b9b9b;
        }
        .f8{
            font-size: 12px;
            color: #9b9b9b;
            position: absolute;
        }
        .i9{
            color: #9b9b9b;
            font-size: 12px;
        }
        .p9{
            font-size: 18px;
            color: red;
        }
        .b9{
            font-size: 12px;
            color: #9b9b9b;
        }
        .s9{
            position: relative;
            border-top: 1px solid #9b9b9b;
        }
        .f9{
            font-size: 12px;
            color: #9b9b9b;
            position: absolute;
        }
        .h1,.h2{
            display: inline-block;

        }
        .h2{
            top: -30px;
            position: relative;
            border: 2px solid red;
        }
        .text{
            width: 600px;
            height: 33px;
            border: 0px;
            margin: 8px 10px 8px 100px;
            margin-left: 0px;
        }
        .submit{
            width: 95px;
            height: 55px;
            border: 0;
            position: absolute;
            top: -3px;
            right: 0;
            background: #f03726;
            color: #f5f5f2;
            font-size: 18px;
        }
    
    .a1,.a2,.a3,.a4,.a5,.a6,.a7,.a8,.a9,.a10,.a11,.a12
    {
        display: inline-block;
        font-size: 12px;
        margin-right: 20px;
        /* float: right; */

    }
    .A2{
        margin-left: 300px;
        /* float: left; */
    }
    .a1{
        color: #f03726;
    }
    .d1,.d2,.d3,.d4,.d5{
        border: 1px solid #9b9b9b;
        width: 50px;
        height: 20px;
        display: inline-block;
        /* margin: 200px; */
        font-size: 12px;

    }
    .D{
        margin-left: 300px;
    }
    </style>
</head>
<body>
<div class="H">
    <div class="h1">
        <img src="https://img.alicdn.com/tfs/TB1R5fsgyDsXe8jSZR0XXXK6FXa-281-80.jpg" height="auto" max-width="100%">
    </div>
    <div class="h2">
        <div class="A1"><form action="https://uland.taobao.com/sem/tbsearch?refpid=mm_26632258_3504122_32538762&keyword=%E8%A3%A4%E5%AD%90%E7%94%B7&clk1=5e3d676de87293fb16eabdd04b3c20c2&upsId=5e3d676de87293fb16eabdd04b3c20c2&spm=a2e0b.20350158.search.1&pid=mm_26632258_3504122_32538762&union_lens=recoveryid%3A201_33.5.95.74_50313912_1717372807767%3Bprepvid%3A201_33.61.31.85_37740224_1717372833430" method="get">
            <span>
                <input type="text" class="text"> 
                <input type="submit" class="submit" value="搜索">
            </span>
        </div>
    </div>
        <div class="A2">  
        <div class="a1"><a href=""><span>一淘限时抢</span></a></div>
        <div class="a2"><a href=""><span>女袜</span></a></div>
        <div class="a3"><a href=""><span>斜挎女包</span></a></div>
        <div class="a4"><a href=""><span>保温杯</span></a></div>
        <div class="a5"><a href=""><span>面膜</span></a></div>
        <div class="a6"><a href=""><span>新款女装</span></a></div>
        <div class="a7"><a href=""><span>双肩包</span></a></div>
        <div class="a8"><a href=""><span>女装</span></a></div>
        <div class="a10"><a href=""><span>茶杯</span></a></div>
        <div class="a11"><a href=""><span>面包</span></a></div>
        <div class="a12"><a href=""><span>书立</span></a></div>

</div>
        </form>
    







    <div>
        <ul>
            <li>
                <a href="https://detail.tmall.com/item.htm?ali_refid=a3_430673_1006:1109935040:H:DQ3jG9EzCSqFlg50XcOmQw==:30f01c9d9c3d37bcc2213f7dee7abc55&ali_trackid=282_30f01c9d9c3d37bcc2213f7dee7abc55&bxsign=tana3BFcJIqVlHnAvGKbtgKgUT5Wq_fTpBFd1Jg7ZsL64eeXblVZKMb3p0bS1bvU4L6QLAwscfxcCsXnfDhp1jAfkvfEWttFeIQwkDjHRMFKIk&id=789797762110">
                    <img src="https://img.alicdn.com/imgextra/i1/96578007/O1CN018maUa4291GG9uaJYP_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" 
                    width="198px" height="198px">
                    <div class="i1"><span>黑色凉感冰丝裤子男夏季薄款2024新款速干宽松垂感直筒阔腿休闲裤</span></div>
                    <div class="p1"><span>￥129</span></div>
                    <div class="b1"><span>哈克汉旗贝舰店</span></div>
                    <div class="s1"><div class="f1"><span>月销4000+</span></div></div>
                </a>
            </li>
            <li>
                <a href="https://item.taobao.com/item.htm?ali_refid=a3_430673_1006:1678382628:N:YHLsHlru3bYthUtoq/eN/Q==:8fe833dec122e9ca414e85504f5a939b&ali_trackid=1_8fe833dec122e9ca414e85504f5a939b&bxsign=tanaJOw68CcwonDQakhqgqy9Ht4FgJo2sN7albkGCNDo-tFd3GapRPfrQ-WtylXpAuaquzupX5bi_Xq-VuSDaj9kQ7bY7vpSbypkZiSH8vuyd8&id=739269346483">
                    <img src="https://img.alicdn.com/imgextra/i4/3060173321/O1CN01ou610x1aP4EcQXP71_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" 
                    width="198px" height="198px">
                    <div class="i2"><span>森马集团裤子男士夏季冰丝薄款垂坠感阔腿宽松直筒休闲长裤西装裤</span></div>
                    <div class="p2"><span>￥239</span></div>
                    <div class="b2"><span>NASA LIKE服饰品牌店</span></div>
                    <div class="s2"><div class="f1"><span>月销100+</span></div></div>
                </a>
            </li>
            <li>
                <a href="https://item.taobao.com/item.htm?ali_refid=a3_430673_1006:1121594957:N:DQ3jG9EzCSqFlg50XcOmQw==:d67509a86fc46400f58f4c5e8809a4c0&ali_trackid=1_d67509a86fc46400f58f4c5e8809a4c0&bxsign=tan3xszZfIT4ktQe_J1WHCQnh0djM6DTaKXppdxkX37kcyhlMDkYMbcl-Vdk4Ud8Wk5Y_AW48x1Jlepd7y6vm6mcLNwl6IRSa5L-mHV-faY0Ts&id=761782856507">
                    <img src="https://img.alicdn.com/imgextra/i4/3060173321/O1CN01ou610x1aP4EcQXP71_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" 
                    width="198px" height="198px">
                    <div class="i3"><span>悟空有货日系复古简约纯色直筒工装裤男潮牌宽松阔腿休闲百搭长裤</span></div>
                    <div class="p3"><span>￥136</span></div>
                    <div class="b3"><span>悟空有货原创设师计品牌</span></div>
                    <div class="s3"><div class="f1"><span>月销1000+</span></div></div>
                </a>
            </li>
            <li>
                <a href="https://click.simba.taobao.com/cc_im?p=%BF%E3%D7%D3%C4%D0&s=127935743&clk1=front_lwy7fz952wlfpdhudp4&k=1485&e=G3XZjWzCSgNyDOEb9kLLWHeVp5%2FOqPjmWQDVyVKop6K6tn8kP9cnqSMHFemXLyZZ7QLLWcVqZPAg3sFB3mRJ6o71C%2FEtgtDz0Mix8Yn2PK6xpEPxn%2BiDMfrBomHPR1Y0SE0XMNI7pQKA1wY5NtnA6DQr91hec0vaGmt9ZMiCd4slqj8QNvIq2StfixM%2B867CFPCIi1X6SYUPpvnRQL3C2iS4uztWzb7sokYAYTGttIJ0n8WiJsA3G6SPGj%2FOVMSgujtvSCiN1jS8SEyXxFELZx%2FKhJIqPifPTmGzcyMkLoV5jCzx5NRfIy2hhEP3LYxF%2FCQqhsDSrEJ%2BZd9nLHm6d7KggzHht%2BWh9zp3PGxkDKKxmyN5ZtXou32khJwZutAM9J%2Fo%2FaXyBoCqJQ0vMbnSSIoaRrmcaPOJd4j0qjj%2F2RSK9LOWzn4yr32khJwZutAMav7Gn%2BAK0g3%2Fe3gJQshMPxKxISjGdQnGzuPCjIdSFPHcpysorrMXhxvMQroHLOJny7BPPptTUSavIueuviCfOCCPzAf9HfixvOk1bVxjbxb78iKYeEPByqhCxTTf%2FjwYTjtTapNnN0LOAV6BQ09U2yvCrPt01rS6ZpuZ64Cpzo3AtTBQsYlxoJFuyRqSiiV5YtaALBXFmni7wD%2BDFIVYM8v9tgfna735Fktn0Rd%2FhdVKcCHG31XaGHTscxBuhm74kHElhcmYFpysSTVIeo%2FQzE7MIxhMZQkrBK3ow62iRXSQ50rtf1WsmuhklGkAzxrhnVwX9aKS%2BrfFEwPco5N7ShFniYEUUQ6pcIV3Xzo99qXySuYTvkZIe7RNkAkKjPdFgpjXzQPEGltLkUiED5roUPR4G1LBA9ZaD3vcdsdRSpsNbxkffREwJovDNruPqmOS%2FWniVf%2BLQGqfpjLpLuAnd7OPZFG2RrTL2a7qvHZrJq67CjkoyHUE4D2qV2fowrb5gKR7z%2FZSTo0WHAAvUIGGkEEbErYu3kHnFTVnYmgdhcmtiXADInzhCrXUF6zuZzxs9jn6yVylClESeuAnrNkq7H69lEaxXb%2ByKcnEpylx8iWLh4xMx0b6DS5ytJcI0%2BEdncpl%2FxAN0jsjRft6c8cU69vHdZNGeLm3yp7Bq6zgqJc1vwG8sd32WHwDc5byaUn%2FsRVRbeXpc4EHf48QuxLF1w9We8486bhGEsuUn9zDT173QIyOJWieFUEZYFIzsyK2c2dVg1hE26v7emW7SK7SYsMPSYESCmN4a0ckdgRUKn7%2FVndwTnc9l%2BwgNNRJdpOg6bFIMEYe0fKX%2BakJQHv%2BOQpZCJr6mMzbp8QEycIaQJS1J8YfjeDxDF2UyAMZI0vSfJKUy9rJm8mitOwBFAUzmTgImYII2r0GIZEBCzu4Tbs0vnmHEPQZw1S6Siymj83OsTvoquLTV%2BK4HqmqDS2q1n2khJwZutAMCVLSepJKaq2iKo%2Bx8NTBiyEhuI2JouwfonJZFImmO3Y%3D&df=1">
                    <img src="https://img.alicdn.com/imgextra/i2/112044131/O1CN016s9ylt1gO35pOwcS9_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" 
                    width="198px" height="198px">
                    <div class="i4"><span>悟空有货日系复古简约纯色直筒工装裤男潮牌宽松阔腿休闲百搭长裤</span></div>
                    <div class="p4"><span>￥176</span></div>
                    <div class="b4"><span>悟空有货原创设师计品牌</span></div>
                    <div class="s4"><div class="f1">月销800+<span></span></div></div>
                </a>
            </li>
            <li>
                <a href="https://detail.tmall.com/item.htm?ali_refid=a3_430673_1006:1560240197:N:mTmTcrmM8h+gmxAKnsVYV/1/4oyycLD4:1b457dd9144bef724857d9cdce0b5d9d&ali_trackid=1_1b457dd9144bef724857d9cdce0b5d9d&bxsign=tanz6zjKiCwjKJR6pjmR8jauiGPeqgrE8TfTnNti8QatSNnF82O39jgKrP6eXkxTjvsMjteKaYQfOlgJXOkJ0yIlci6cGd05EbSTY59j7L4jk0&id=678124746640">
                    <img src="https://img.alicdn.com/imgextra/i2/2145670128/O1CN014AS3Zd1CofSja6opO_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" 
                    width="198px" height="198px">
                    <div class="i5"><span>nasa旗舰店冰丝裤子束脚休闲裤男夏季垂感薄款运动九分裤情侣长裤</span></div>
                    <div class="p5"><span>￥128</span></div>
                    <div class="b5"><span>nasaajplay旗舰店</span></div>
                    <div class="s5"><div class="f1"><span>月销600+</span></div></div>
                </a>
            </li>
            <li>
                <a href="https://detail.tmall.com/item.htm?ali_refid=a3_430673_1006:1682926330:N:QwpdhR5JpiqhSv4A2U+Wpg==:e7e7f89c427ba9af5e0c509d88f22f21&ali_trackid=1_e7e7f89c427ba9af5e0c509d88f22f21&bxsign=tanltQxcfQVn4IfzXGrL_od0YI-oJqOShtFqV_AP-bteFY5bw37fYEUC2jTLUPDhuBZIekm9mqcqAMbBby9Kecn2RplgSgchYE17tdbr_3y27k&id=751259309474">
                    <img src="https://img.alicdn.com/imgextra/i2/4175453482/O1CN01U7KSV01bao1CIYkLH_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" 
                    width="198px" height="198px">
                    <div class="i6"><span>美式vibe裤子男款高街潮牌黑色牛仔裤加长微喇窄版显瘦直筒休闲裤</span></div>
                    <div class="p6"><span>￥129</span></div>
                    <div class="b6"><span>华夏儿女旗舰店</span></div>
                    <div class="s6"><div class="f1"><span>月销1万+</span></div></div>
                </a>
            </li>
            <li>
                <a href="https://detail.tmall.com/item.htm?ali_refid=a3_430673_1006:1152061628:N:QwpdhR5JpiqhSv4A2U+Wpg==:bfb2a8543624033bb1b8ab49f643ded9&ali_trackid=199_bfb2a8543624033bb1b8ab49f643ded9&bxsign=tanNYvc7fMh21HS8_yEk_6a111EVmwRTuiDKpFZ1oPm2e-SrNQ0xCdgW3sCBZVTjQ8b6JiR_JdXu6BTmKBviLw3UE_mtgrBAZ6e7uM0iLvKSho&id=772348072159">
                    <img src="https://img.alicdn.com/imgextra/i2/131767904/O1CN01FYhOQZ28G5RfvQ9ie_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" 
                    width="198px" height="198px">
                    <div class="i7"><span>夏季薄款新款裤子男美式高街男生宽松微喇牛仔裤男款黑色休闲长裤</span></div>
                    <div class="p7"><span>￥69</span></div>
                    <div class="b7"><span>猎璞旗舰店</span></div>
                    <div class="s7"><div class="f1"><span>月销2000+</span></div></div>
                </a>
            </li>
            <li>
                <a href="https://click.simba.taobao.com/cc_im?spm=a2e0b.20350158.31919782.8&p=%BF%E3%D7%D3%C4%D0&s=127935743&clk1=front_lwy7fz952wlfpdhudp4&k=1485&e=dZmZmp6qUvRyDOEb9kLLWHeVp5%2FOqPjmWQDVyVKop6K6tn8kP9cnqSMHFemXLyZZ7QLLWcVqZPAsMDxIABVBF3KcYrowzMTOxEvJMw0WJL3NDBSmP383RPrBomHPR1Y0SE0XMNI7pQKA1wY5NtnA6DQr91hec0vaGmt9ZMiCd4slqj8QNvIq2StfixM%2B867CFPCIi1X6SYUPpvnRQL3C2iS4uztWzb7sokYAYTGttIJ0n8WiJsA3G6SPGj%2FOVMSgujtvSCiN1jQf%2BuwMBi6xXJWslrlsajbAzlwR6F45hMuePt%2FLCZ21%2BiasxZvYJpMvAhxOMrmFAo3bZ%2BWnl19JXG4%2FFu1%2Bfj40c25W%2Fv%2BgMzAb0gO11JgMb%2F30NWZTjT%2FHvcBBW6u0puF0Z3kpgMxbe0mCF2Aw4HcnHJrLfDoJ3cOpeL0%2B62NwxlkCz4TfNxrNN8efuyFq9y1UyAMRmcJCM%2FmVRtUbQRRswWdOgZ47V4ji24uWq%2FksPnHzMqjuc8Zzce%2FEdBtVivQDaFgUBOu470du%2FTJ14cPJZdKQysXNHqXmuM4Zs3J9A8syNS%2BFQ8f%2Fp7nyhKgwfGkpmTdyC%2B6b7XKseUWA02gJ%2FR6uWMpBIxvipefXQTxSZdzaRAqj%2BU0iWUYL3sMFOaB8AuCHBCRIYwPmC3mmpxgxVC1K9gUn0g6SjJNjloWBFm96toLlwnSmdOxzEG6GbvhfFhtcoKDddHctFRs83Py%2Bk7wZhR%2BDKD%2FEinTfwkY3Sqnn8H0f6Oyzyr2XHCQQ5Ct5pKzcKLAkjg74Xx9TESUFZx1UJ0MMCHUDZeTppoNl4b6%2FE%2Bjai4dCJLrgra321aSljJMvq5UqzJLyKdjC%2Bx6Yac12W7kU%2Fflzsg9kktBOzPxvZBAB3AXP98t72rzvUNAwi1CgnfxgRw7mQIRqDWpmNIdnyIfFfc%2F1PW05eGkMhu66A%2BnaQJlJmpyWr%2FDilugTvSB7Ca5nPCQy6ynpUo3HKu7z9oyq9Lq7vvAu8BLgQMotGCid%2BUeHVTS9swNIMZlJLpzFWurev6YzDyB9xAGiy9Nf3GWTHEOLh4xMx0b6DS5ytJcI0%2BEdA6JndxpeaR0RjEA%2FIcFijYrJqxH3e4BN%2BXZxYZmHknW2QOwNKbETWXwDc5byaUn%2FsRVRbeXpc4FwqfdWoKqB2Q9We8486bhGEsuUn9zDT173QIyOJWieFVpCBgPaNYR5WmXNEcRx1nH7emW7SK7SYsMPSYESCmN4a0ckdgRUKn7%2FVndwTnc9l%2BwgNNRJdpOgg1%2BAq3LOwOAhhCRH%2BJ6JZbrwOSfv%2B9za9GWBjRLVhiK1J8YfjeDxDF2UyAMZI0vSfJKUy9rJm8mN%2BFhQsoQ%2BVc1OcGigY9otwY3Q8qCO8mV8L6FV2Z64JdMi0VxIWFB5XXRId%2BPnBgZW%2FIFOV%2FrKrwh0vlc2XvOMTa1j1qixmgYFN6%2FOCi7ugDSGYedo2lpLdgnhx%2FZiRuk%3D&df=1">
                    <img src="https://img.alicdn.com/imgextra/i4/110307460/O1CN01iNVze724yjYKp5KHY_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" 
                    width="198px" height="198px">
                    <div class="i8"><span>烟灰色牛仔裤男生2024新款宽松直筒男裤夏季薄款休闲裤子男士男款</span></div>
                    <div class="p8"><span>￥109</span></div>
                    <div class="b8"><span>wvb旗舰店</span></div>
                    <div class="s8"><div class="f1"><span>月销4000+</span></div></div>
                </a>
            </li>
            <li>
                <a href="https://detail.tmall.com/item.htm?ali_refid=a3_430673_1006:1124211506:N:QwpdhR5JpiqhSv4A2U+Wpg==:c9a4361f03519dcb38fa999a53e350df&ali_trackid=1_c9a4361f03519dcb38fa999a53e350df&bxsign=tan646dlTlTmUEdayYJQeQSAW9kULgOEagv4Ekvrba94q_qQFUVxVynIgNXmfv1K2u7eQWTQw9oNS9aKZk5Lqe0dF_b53JBu8xHOGi0zSQOLuM&id=682101779570">
                    <img src="https://img.alicdn.com/imgextra/i1/119195269/O1CN01HCpQOX1onFep8wKg9_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" 
                    width="198px" height="198px">
                    <div class="i9"><span>工装裤男士夏季款休闲宽松直筒裤男生薄款纯棉运动阔腿长裤子潮牌</span></div>
                    <div class="p9"><span>￥98</span></div>
                    <div class="b9"><span>nosize旗舰店</span></div>
                    <div class="s9"><div class="f1"><span>月销100+</span></div></div>
                </a>
            </li>
        </ul>
    </div>


    <div class="D">
        <ul>
                <div class="d1"><span>首页</span></div>
                <div class="d2"><span><上一页</span></div>
                <div class="d3"><span>搜索</span></div>
                <div class="d4"><span>下一页></span></div>
                <div class="d5"><span>尾页</span></div>
        </ul>
    </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-登录</title>
    <style>
        .t1{
            width: 72px;
    height: 42px;
    background: url(data:image/png;base64,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) no-repeat 0 0/100% 100%;
        }
        .t2{
            width: 808px;
            height: 400px;
            border-radius: 18px;
            background-color: grey;
            position: relative;
            margin: 50px;
        }
        .a1{
            width: 300px;
            height: 400px;
            margin: 0;
            padding-left: 20px;
            padding-right: 80px;
            position: absolute;
            border-top-left-radius: 18px;
            border-bottom-left-radius: 18px;
            background-color: #f2f2f2;
            border-right: 1px solid black;

        }
        .a2{
            margin-left: 50px;
            margin-top: 40px;
        }
        .b1,.b2{
            margin: 0 15px;
            font-size: 20px;
            font-weight: 600;
            line-height: 20px;
            letter-spacing: 0;
            color: #111;
            display: inline-block;

        }
        .a3{
            margin-left: 70px;
            margin-top: 50px;
            
        }
        .b3{
            padding-left: 0px;
            height: 42px;
            width: 230px;
            border-radius: 21px;
            opacity: 1;
            /* border: none; */
            background: #f3f3f3;
            font-family: PingFang SC;
            font-size: 14px;
            font-weight: 500;
            line-height: 18px;
            letter-spacing: 0;
            color: #111;
        }
        .b4{
            padding-left: 0px;
            margin-top: 15px;
            height: 42px;
            width: 230px;
            border-radius: 21px;
            opacity: 1;
            /* border: none; */
            background: #f3f3f3;
            font-family: PingFang SC;
            font-size: 14px;
            font-weight: 500;
            line-height: 18px;
            letter-spacing: 0;
            color: #111;
        }
        .b5{
            margin-top: 20px;
            width: 230px;
            height: 42px;
            border-radius: 21px;
            opacity: 1;
            background: linear-gradient(102deg,#ff9000 7%,#ff5000 59%);
            font-family: PingFang SC;
            font-size: 16px;
            font-weight: 500;
            line-height: 14px;
            text-align: center;
            letter-spacing: 0;
            color: #fff;
        }
        .a4{
            color: #999;
            font-size: 14px;
        }
        .b6,.b7,.b8{
            display: inline-block;
            margin-top: 10px;
        }
        .b9{
            border: 0;
            width: auto;
            margin-bottom: 0;
            margin-left: 60px;
            margin-top: 20px;
            height: 22px;
            color: #999;
        }
        .c1{
            font-family: PingFang SC;
            font-size: 20px;
            padding-left: 400px;
            padding-top: 33px;
            font-weight: 600;
            line-height: 20px;
            text-align: center;
            /* letter-spacing: 0; */
            color: #111;
        }
        .a5{
            width: 800px;
            height: 400px;
            border-top-left-radius: 18px;
            border-bottom-left-radius: 18px;

        }
        .c2{
            width: 175px;
            height: 175px;
            margin-left: 400px;
            padding-top: 30px;
            padding-left: 120px;
        }
        .c3{
            box-sizing: border-box;
            padding: 0;
            margin: 0;
            /* margin-left: 400px; */
            padding-top: 33px;
            padding-left: 550px;
            display: inline-block;

        }
        .c4,.c5{
            color: #ff5000;
            font-size: 14px;
            /* margin-left: 400px; */
            padding-top: 33px;
            
            display: inline-block;

        }
        
        .c6{
            font-size: 14px;
            /* margin-left: 400px; */
            padding-left: 600px;
            padding-top: 33px;
            display: inline-block;

        }
    </style>
</head>
<body>
    <div>
        
        <div class="t1"><a title="淘宝网" class="t1" href="//www.taobao.com"></a></div>
        <div class="t2">
                <div class="a1">
                    <div class="a2">
                        <div class="b1">
                            <span>密码登录</span>
                            <!-- <a href="javascript:void(0);" target="_self" class="password-login-tab-item">密码登录</a> -->
                        </div>
                        <div class="b2">
                            <span>短信登录</span>
                            <!-- <a href="javascript:void(0);" target="_self" class="sms-login-tab-item">短信登录</a> -->
                        </div>
                    </div>
                        <div class="a3">
                            <div><input class="b3" type="text" placeholder="账号名/邮箱/手机号"></div>
                            <div><input class="b4" type="text" placeholder="请输入登入密码"></div>
                            <div><input class="b5" type="submit" value="登录"></div>
                            <div class="a4">
                                <div class="b6"><span>免费注册</span></div>
                                <div class="b7"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;忘记账号名</span></div>
                                <div class="b8"><span>&nbsp;忘记密码</span></div>
                            </div>
                            <div>
                                <i class="thirdpart-login-icon icon-alipay"></i>
                                <div class="b9"><span>支付宝登录</span></div>
                            </div>
                        </div>

                </div>
                <div class="a5">
                    <div class="c1"><span>手机扫码安全登录</span></div>
                    <div class="c2">
                        <img src="./二维码.png" width="175px" height="175px">
                    </div>
                    <div class="a6">
                        <div class="c3"><span>打开</span></div>
                        <div class="c4"><span>&nbsp;&nbsp;&nbsp;&nbsp;淘宝app&nbsp;|</span></div>
                        <div class="c5"><span>天猫app</span></div>
                    </div>
                    <div class="c6"><span>扫一扫登录</span></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>第二次作业23</title>
    <style>
        .top{
            width: 474px;
            aspect-ratio: auto 474 / 61;
            height: 61px;
        }
        .b1{
            background: url(http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/index/bgtp.gif);
            height: 296px;
            position: relative;
            width: 955px;

        }
        .b2{
            font-size: 24px;
            color: #333;
            position: absolute;
            top: 5px;
            padding-left: 550px;
            padding-top: 50px;
            /* margin: 0 auto; */
            font-family: "微软雅黑";
        }
        .b3{
            padding-left: 530px;
            padding-top: 130px;
        }

        .b4{
            padding-left: 530px;
            padding-top: 0px;

        }
        .c1,.c2{
            display: inline-block;

        }
        .c3,.c4{
            display: inline-block;
        }
        .c6{
            border: 0px;
            background: url(http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/index/dlau.gif) no-repeat;
            margin-left: 35px;
            height: 45px;
            width: 45px;
            font-size: 16px;
            margin-left: 700px;
            display: inline-block;

        }
        .c7{
            background: url(http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/index/dlau1.gif) no-repeat;
            /* display: block; */
            width: 45px;
            height: 45px;
            margin-left: 770px;
            margin-top: -200px;
            display: inline-block;
        }
        .d1{
            position: absolute;
            font-size: 15px;
            color: #999;
            margin-top: 130px;
            margin-left: 1px;
            float: left;
            width: 809px;
            left: 85px;
            top: 304px;
        }
        .d2{
            font-size: 15px;
            color: #999;
            margin-top: 130px;
            margin-left: 100px;
        }
        .d3{
            font-size: 15px;
            color: #999;
            margin-top: 130px;
            margin-left: 100px;
        }
    </style>
</head>
<body>
    <div>
        <div class="top">
            <div>
                <img src="	http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/index/index_02.png">
            </div>
        </div>
        
        
        
        <div class="bottom">
            <div class="b1">
                <!-- <img src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/index/bgtp.gif" alt=""> -->
            <div class="b2">用户登录<span></span></div>
            <div class="b3">
                <p class="c1">用户名:</p>
                <input  class="c2" type="text">
            </div>
            <div class="b4">
                <p class="c3">密码:&nbsp;&nbsp;&nbsp;</p>
                <input class="c4" type="text">
            </div>
            <div class="c5"><input class="c6" type="submit" value=" &nbsp;"></div>
            <div class="c7"></div>


            </div>
        </div>



        <div class="d1"><span>湖南强智科技发展有限公司 版权所有</span></div>
        <div class="d2"><span></span></div>
        <div class="d3"><span></span></div>

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