【无标题】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第三次作业</title>
    <style>
        .box{
            display: grid;
            grid-template-columns: repeat(5,1fr);
            height: 700px;
            grid-template-rows: repeat(2,1fr);
            grid-gap: 0px;
            /* border: 1px solid red; */
            margin-top: 50px;
            margin-left: 100px;
            margin-right: 100px;
        }
        .prod{
            /* border: 1px solid red;  */
        }
        .prod-href{
            text-decoration: none;
        }
        .prod-intoduce-span{
            color: #9b9b9b;
            font-size: 14px;
        }
        .prod-price{
            font-size: 19px;
            color: red;
        }
        .prod-boss{
            color: #9b9b9b;
            font-size: 12px;
        }
        .prod-sale{
            color: #9b9b9b;
            font-size: 12px;
            border-top: 1px solid #f2f2f2;
            text-align: right;
            padding-top: 10px;
        }

        .prod-test-box{
            width: 300px;
            height: 340px;
            margin: auto;
            margin-top: 15px;
            /* border: 1px solid red; */
        }

    </style>

</head>
<body>
    <div class="box">
        <div class="prod">
            <a class="prod-href" href="https://detail.tmall.com/item.htm?id=527664223290&ali_refid=a3_430673_1006:1122426937:N:LO74Bc2EWLnfvdjOI7AADg%3D%3D:4af09fff41dd226f485fdf19fd532d67&ali_trackid=1_4af09fff41dd226f485fdf19fd532d67&spm=a2e0b.20350158.31919782.1&bxsign=tanNpXoCSxPp0pEVTtMvaONMjITdPRCVEYd1iHe0x6C1v7L_FTvW3C6uRF4YSpIPtTQyLvY2trqlePKmXxx5ADdPmsyjaPX4FRgIQjy9DyRq0M">
                <div class="prod-test-box">
                    <img class="prod-img" width="260px" height="200px" src="https://img.alicdn.com/imgextra/i1/2764571734/O1CN01hMffrJ1OgDke8IzXE_!!2764571734-0-alimamacc.jpg_360x360xzq75.jpg_.webp " alt="">
                    <div class="prod-introduce">
                        <span class="prod-intoduce-span">脆升升香脆薯条20g25袋鲜切薯片蜂蜜黄油脆生生休闲零食大礼包</span>
                    </div>
                    <div class="prod-price">¥79.8</div>
                    <div class="prod-boss">脆升升食品旗舰店</div>
                    <div class="prod-sale">月销4万+</div>
                </div>
            </a>
        </div>
        <div class="prod">
            <a class="prod-href" href="https://detail.tmall.com/item.htm?id=569438081109&ali_refid=a3_430673_1006:1121522349:N:LO74Bc2EWLnfvdjOI7AADg%3D%3D:d81b1ba9edc31709761b1ea49c179754&ali_trackid=1_d81b1ba9edc31709761b1ea49c179754&spm=a2e0b.20350158.31919782.2&bxsign=tan1x7RTP00bHfO9RY_DYy2supzYDM80XNy8SH8VXDLPDGvVqwSIeUUueH3hMGIlj11ClNGUMkF1Ilwq7sln3KxeSKcEYQU7O0eL3OHqfT8N-M">
                <div class="prod-test-box">
                    <img class="prod-img" width="260px" height="200px" src="https://img.alicdn.com/imgextra/i1/111634048/O1CN01dRftY21fm2B5HgTSp_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
                    <div class="prod-introduce">
                        <span class="prod-intoduce-span">好利来冰山熔岩巧克力纯可可脂礼盒甜品糕点</span>
                    </div>
                    <div class="prod-price">¥59</div>
                    <div class="prod-boss">好利来官方旗舰店</div>
                    <div class="prod-sale">月销7000</div>
                </div>
            </a>
        </div>
        <div class="prod">
            <a class="prod-href" href="https://item.taobao.com/item.htm?id=666084491679&ali_refid=a3_430673_1006:1122276003:N:LO74Bc2EWLnfvdjOI7AADg%3D%3D:2d23748fac0bcf4a489b8cad51972146&ali_trackid=1_2d23748fac0bcf4a489b8cad51972146&spm=a2e0b.20350158.31919782.3&bxsign=tanH4ekCS-WHd8XyLU40qwsW7s41EMUC_MD7Z-45tp6ISga7d2Hy9X8SrzwBRb9nUb2qFFd4EHZIQGwVKLKggl_UtJMSOAN73WZjebt01LMXT0">
                <div class="prod-test-box">
                    <img class="prod-img" width="260px" height="200px" src="https://img.alicdn.com/imgextra/i2/113712902/O1CN01QUhZFP1XJALm3Vxkb_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
                    <div class="prod-introduce">
                        <span class="prod-intoduce-span">麻辣王子辣条30小包官方正品</span>
                    </div>
                    <div class="prod-price">¥6.9</div>
                    <div class="prod-boss">惠祥食品</div>
                    <div class="prod-sale">月销5000+</div>
                </div>
            </a>
        </div>
        <div class="prod">
            <a class="prod-href" href="https://detail.tmall.com/item.htm?id=785156955317&ali_refid=a3_430673_1006:1700148730:H:LO74Bc2EWLnfvdjOI7AADg%3D%3D:1f40ee902165c1e9c4ba8330de4bfdad&ali_trackid=282_1f40ee902165c1e9c4ba8330de4bfdad&spm=a2e0b.20350158.31919782.4&bxsign=tan-eWb0RtUR4Ytakj8ZSKZmvWnUFbnWK1342RyqvSJQ4NK_zt47EY0CGsqQ7jVgoNUfehg4JOoUHeO3V3dSrp2J6sO1Du5fs9ZONRe_aYGHRM">
                <div class="prod-test-box">
                    <img class="prod-img" width="260px" height="200px" src="https://img.alicdn.com/imgextra/i3/6385622422/O1CN01Ew0qud1TlKFDeKsat_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp">
                    <div class="prod-introduce">
                        <span class="prod-intoduce-span">酸辣柠檬无骨鸡爪脱骨凤爪网红小吃即食休闲食品解馋零食好吃卤味</span>
                    </div>
                    <div class="prod-price">¥26.7</div>
                    <div class="prod-boss">天天特卖工厂店</div>
                    <div class="prod-sale">月销4万+</div>
                </div>
            </a>
        </div>
        <div class="prod">
            <a class="prod-href" href="https://detail.tmall.com/item.htm?id=684008302002&ali_refid=a3_430673_1006:1501060037:N:LO74Bc2EWLnfvdjOI7AADg%3D%3D:a03755d41b94d38257d05b22fa7b2196&ali_trackid=162_a03755d41b94d38257d05b22fa7b2196&spm=a2e0b.20350158.31919782.5&bxsign=tanX5-WVeHwgGxKTaIP8CC9_4T0VmLoRDQoV1gFO5AFgQgTxi9t8Ghhn47mqRlARwRVnQvY20HSqCv6h_4iViQ5PqCvRXbTIiMYagtXUH3aow0">
                <div class="prod-test-box">
                    <img class="prod-img" width="260px" height="200px" src="https://img.alicdn.com/imgextra/i3/1910280086/O1CN01PAAaJL1CVQqOSxAi5_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
                    <div class="prod-introduce">
                        <span class="prod-intoduce-span">靖江猪肉脯小包零食品蜜汁干吃的肉铺休闲边角料网红年货嘴牛肉味</span>
                    </div>
                    <div class="prod-price">¥69.9</div>
                    <div class="prod-boss">满满无限旗舰店</div>
                    <div class="prod-sale">月销64</div>
                </div>
            </a>
        </div>
        <div class="prod">
            <a class="prod-href" href="https://detail.tmall.com/item.htm?id=810514131335&ali_refid=a3_430673_1006:1182120038:N:LO74Bc2EWLnfvdjOI7AADg%3D%3D:4675d224fdd414fb8a809107721394ff&ali_trackid=162_4675d224fdd414fb8a809107721394ff&spm=a2e0b.20350158.31919782.6&bxsign=tanEguekwO3rm2vegN0Jnjv5IW1BM30zI7AOySWgW8mv1NGI5WAC6wDK89RHlIks9FGPOdTGTRQr5JV59JokLB04U_Imj3_D12uW-XtJhXE9t4">
                <div class="prod-test-box">
                    <img class="prod-img" width="260px" height="200px" src="https://img.alicdn.com/imgextra/i4/200530058/O1CN01nSW7e91CIbwafSSP7_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
                    <div class="prod-introduce">
                        <span class="prod-intoduce-span">百草味巨型休闲零食大礼包送女朋友生日礼物食品小吃礼盒大学生</span>
                    </div>
                    <div class="prod-price">¥199</div>
                    <div class="prod-boss">世超食品专营店</div>
                    <div class="prod-sale">月销4</div>
                </div>
            </a>
        </div>
        <div class="prod">
            <a class="prod-href" href="https://detail.tmall.com/item.htm?id=693028162782&ali_refid=a3_430673_1006:1107769739:N:LO74Bc2EWLnfvdjOI7AADg%3D%3D:7e5cf3df933544e3235bc524c81e6570&ali_trackid=1_7e5cf3df933544e3235bc524c81e6570&spm=a2e0b.20350158.31919782.7&bxsign=tanoXsji-CsBBRSinI-WRPZSi46kJ0mF_088FuDnu_GBpPeLTwk5W4de6ujSgf5JmmL_0p6KRuNmHOqkO4N2cSjx_MH5jajrPI2F-3lInTp5wY">
                <div class="prod-test-box">
                    <img class="prod-img" width="260px" height="200px" src="https://img.alicdn.com/imgextra/i2/1985745737/O1CN01DFtAgj1sFbAwIEpT1_!!1985745737-0-alimamacc.jpg_360x360xzq75.jpg_.webp" alt="">
                    <div class="prod-introduce">
                        <span class="prod-intoduce-span">盐津铺子零食大礼包整箱休闲食品小吃辣卤味肉类礼盒解馋送男女友</span>
                    </div>
                    <div class="prod-price">¥79</div>
                    <div class="prod-boss">盐津铺子食品旗舰店</div>
                    <div class="prod-sale">月销2万+</div>
                </div>
            </a>
        </div>
        <div class="prod">
            <a class="prod-href" href="https://detail.tmall.com/item.htm?id=809432747179&ali_refid=a3_430673_1006:1121224139:H:LO74Bc2EWLnfvdjOI7AADg%3D%3D:84ad5cadf91a313374fa10f1531c182b&ali_trackid=282_84ad5cadf91a313374fa10f1531c182b&spm=a2e0b.20350158.31919782.8&bxsign=tanYmSmnP5jWnz8NuSPeCuSFYBNNN2kUUUzT1Sf7DC_goxuV8pne0ricRXWjNzhTy-vrafaYQWk8uOQrW9TQ4i9rPkhxnlm08hKSzBp3rB-Ydc">
                <div class="prod-test-box">
                    <img class="prod-img" width="260px" height="200px" src="https://img.alicdn.com/imgextra/i2/111683677/O1CN018e2h2s1d27Ing0yw0_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
                    <div class="prod-introduce">
                        <span class="prod-intoduce-span">蜡瓶糖可食用儿童正品官方旗舰店爆浆辣皮糖零食大号一口秒土蜂蜡</span>
                    </div>
                    <div class="prod-price">¥55.5</div>
                    <div class="prod-boss">苏宁易购官方旗舰店</div>
                    <div class="prod-sale">月销600+</div>
                </div>
            </a>
        </div>
        <div class="prod">
            <a class="prod-href" href="https://detail.tmall.com/item.htm?id=38232257688&ali_refid=a3_430673_1006:1104407126:N:LO74Bc2EWLnfvdjOI7AADg%3D%3D:3811592a4761044db05fb86639174c23&ali_trackid=1_3811592a4761044db05fb86639174c23&spm=a2e0b.20350158.31919782.9&bxsign=tanSsy4pzOvtZVltg-BDtu2UG8XzlH-_nolgX805dQWNB5OeOjz2BKltSM9YsvP5Q6WKs5IqXVwFrxPukXpyT4vjYAMdpgxnDCYB2Axayej2dg">
                <div class="prod-test-box">
                    <img class="prod-img" width="260px" height="200px" src="https://img.alicdn.com/imgextra/i3/31536383/O1CN01of0giM1x1T3rHHvHe_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
                    <div class="prod-introduce">
                        <span class="prod-intoduce-span">三只松鼠罐装每日坚果500g孕妇健康休闲零食混合干果果仁早餐</span>
                    </div>
                    <div class="prod-price">¥310</div>
                    <div class="prod-boss">三只松鼠旗舰店</div>
                    <div class="prod-sale">月销4万+</div>
                </div>
            </a>
        </div>
        <div class="prod">
            <a class="prod-href" href="https://detail.tmall.com/item.htm?id=693561219175&ali_refid=a3_430673_1006:1746591413:N:LO74Bc2EWLnfvdjOI7AADg%3D%3D:8c7da859fd751cadcc6ad24664129227&ali_trackid=162_8c7da859fd751cadcc6ad24664129227&spm=a2e0b.20350158.31919782.10&bxsign=tanvPH4-oGaL2vmrg7Hv6N39GwdWe65rwg5iPeknBqaYK1Jzi9JHW9N74PEvs27yAAj1sxNI3S-Gdgb8pf4NZ_Y8NOUor8cm3zfGnZOFhx70A8">
                <div class="prod-test-box">
                    <img class="prod-img" width="260px" height="200px" src="https://img.alicdn.com/imgextra/i1/6615549496/O1CN01ylczAr2K1E0KlMmnO_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
                    <div class="prod-introduce">
                        <span class="prod-intoduce-span">超大桶进口国产零食大礼包组合巨型桶混装生日礼包礼物定制旗舰店</span>
                    </div>
                    <div class="prod-price">¥360</div>
                    <div class="prod-boss">巨型零食品旗舰店</div>
                    <div class="prod-sale">月销100+</div>
                </div>
            </a>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .login{
            width: 400px;
            height: 300px;
            border: 1px solid red;
            margin: auto;
            line-height: 2;
            text-align: center;
            background-color: aqua;
        }
        #aaa{
            margin-top: 0px;
        }
    </style>
</head>
<body>
    <div class="login">
        <span>百度登陆页面</span>
        <form action="https://www.baidu.com/" method="post">
            <input type="text" placeholder="用户名"><br>
            <p><input type="password" placeholder="请输入密码" autofocus></p>
            <input type="checkbox" name="aaa" value="aaa">记住我<br>
            <button type="submit">登录</button>
            <button type="reset">重置</button>
        </form>
        <a href="https://passport.baidu.com/?getpassindex&tt=1721220442286&gid=24D717B-C003-4F15-A402-1FAA4306EDE9&tpl=mn&u=https%3A%2F%2Fwww.baidu.com%2F" target="_self" >忘记密码</a>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .topBox{
    font-size: 16px;
    padding: 0;
    margin: 0;
    outline: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100px;
    background: #ba2a17;
    min-width: 1280px;
    }
    .topContainer{
    font-size: 16px;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
    width: 1280px;
    margin: auto;
    padding-top: 15px;
    position: relative;
    height: 100px;
    }
    .head_left{
    font-size: 16px;
    padding: 0;
    margin: 0;
    outline: 0;
    box-sizing: border-box;
    float: left;
    }
    .head_right{
    font-size: 16px;
    padding: 0;
    margin: 0;
    outline: 0;
    box-sizing: border-box;
    float: right;
    }
    .hr_left{
    font-size: 16px;
    outline: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0px;
    list-style: none;
    float: left;
    width: 270px;
    height: 36px;
    margin-top: 10px;
    }
    .li1{
    outline: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0px;
    list-style: none;
    display: inline-block;
    margin-left: 16px;
    font-size: 14px;
    line-height: 24px;
    color: white;
    }
    .navBox{
    font-size: 16px;
    padding: 0;
    margin: 0;
    outline: 0;
    box-sizing: border-box;
    width: 100%;
    height: 45px;
    line-height: 45px;
    min-width: 1280px;
    }
    .nav-menu{
    font-size: 16px;
    line-height: 45px;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
    width: 1280px;
    margin: 0 auto;
    height: 45px;
    }
    .nav{
    font-size: 16px;
    outline: 0;
    box-sizing: border-box;
    padding: 0;
    border: 0px;
    list-style: none;
    margin: auto;
    height: 45px;
    line-height: 45px;
    display: inline-block;
    width: 1200px;
    position: relative;
    left: 47px;
    }
    .li2{
    font-size: 16px;
    outline: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0px;
    list-style: none;
    float: left;
    width: 133px;
    min-height: 45px;
    line-height: 45px;
    text-align: center;
    cursor: pointer;
    position: relative;
    }
    .banner{
    font-size: 16px;
    padding: 0;
    margin: 0;
    outline: 0;
    box-sizing: border-box;
    height: 400px;
    position: relative;
    width: 100%;
    }
    .js-silder{
    font-size: 16px;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
    position: relative;
    min-width: 320px;
    height: 400px;
    margin: 0 auto;
    width: 1280px;
    }
    .silder-scroll{
    font-size: 16px;
    padding: 0;
    margin: 0;
    outline: 0;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    }
    .silder-main{
    font-size: 16px;
    padding: 0;
    margin: 0;
    outline: 0;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 400px;
    }
    .silder_main-img{
    font-size: 16px;
    padding: 0;
    margin: 0;
    outline: 0;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    width: 100%;
    left: -1380px;
    background-color: aqua;
    }
</style>
<body>
    <div class="topBox">
        <div class="topContainer">
            <div class="head_left">
                <a href="https://www.scu.edu.cn/index.htm" title="川大主题" class="logo">
                    <img src="https://www.scu.edu.cn/images/logo.png">
                </a>
            </div>
            <div class="head_right">
                <ul class="hr_left">
                    <li class="li1">
                        <a href="https://xxgk.scu.edu.cn/" target="_blank">信息公开</a>
                    </li>
                    <li style="margin-left: 46px;" class="li1">
                        <a href="https://www.scu.edu.cn/index/fw/bgfw.htm" target="_blank">办公服务</a>
                    </li>
                    <li class="li1">
                        <a href="https://en.scu.edu.cn/" target="_blank">ENGLISH</a>
                    </li>
                    <li class="li1">
                        <a href="https://id.scu.edu.cn/frontend/login#/login?sp_code=bDBhREE1WDMzK3llSzZyVFZNeE81czRDd1hESTI4NWxGaFdsTnlvcGt3eVdTb2cxSjN5a1FJTDVMWTBEQkFFd2k1bWZRMy82OXN6V21ZYzFLd2NlSDl1ekZ4bSt4Q0kzSWJYRG5UZkRzQ002ek10cUlNVGE4V2JmQXJqdnF0NFJFUHdWSmlHWDJ0NEp3Q3gyNzltcEdOUTNHUU5NUzhaYnpJV2N3Q0puNFN6Y29JMmRWS1BNMjBiV25TTzJPRUI0ek9BalRzOWp6UFZjYUpKMDhvbFJCRWtxWlJMRlRCcklBMWpidVIxbURnWHhRbXFORk40N2o3Z2prV1ErbTNXUEFldUxQOXJNUEFjVElnVDE1L0hsWnhNcjNFelk4anlodmJiTjdralNvTnc9&application_key=scdxplugin_jwt26&application_disabled=false&redirect_uri=aHR0cHM6Ly9pZC5zY3UuZWR1LmNuL2VuZHVzZXIvc3Avc3NvL3NjZHhwbHVnaW5fand0MjY%2FZW50ZXJwcmlzZUlkPXNjZHg%3D" target="_blank">网上办事大厅</a>
                    </li>
                    <li class="li1">
                        <a href="https://webvpn.scu.edu.cn/users/sign_in" target="_blank">WebVPN</a>
                    </li>
                    <li class="li1">
                        <a href="https://mail.scu.edu.cn/" target="_blank">邮件系统</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="navBox">
        <div class="nav-menu">
            <a href="https://www.scu.edu.cn/index.htm">
                <img src="https://www.scu.edu.cn/images/nav-home.png">
            </a>
            <ul class="nav">
                <li style="display: none;" class="li2">
                    <a href="https://www.scu.edu.cn/index.htm">首页</a>
                </li>
                <li class="li2">
                    <a href="https://www.scu.edu.cn/xxgknew/xxjj.htm">学校概况</a>
                </li>
                <li class="li2">
                    <a href="https://www.scu.edu.cn/xwzx.htm">新闻资讯</a>
                </li>
                <li class="li2">
                    <a href="https://www.scu.edu.cn/jyjx.htm">教育教学</a>
                </li>
                <li class="li2">
                    <a href="https://www.scu.edu.cn/kxyj.htm">科学研究</a>
                </li>
                <li class="li2">
                    <a href="https://www.scu.edu.cn/szdw.htm">师资队伍</a>
                </li>
                <li class="li2">
                    <a href="https://www.scu.edu.cn/jlhz.htm">交流合作</a>
                </li>
                <li class="li2">
                    <a href="https://www.scu.edu.cn/zsjy.htm">招生就业</a>
                </li>
                <li class="li2">
                    <a href="https://www.scu.edu.cn/zzjg/jgbc.htm">组织机构</a>
                </li>
                <li class="li2">
                    <a href="https://www.scu.edu.cn/whzy.htm">文化资源</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="banner">
        <div class="js-silder">
            <div class="silder-scroll">
                <div class="silder-main" style="height: 400px;">
                    <div class="silder-main_img" style="left: -1380px;">
                        <a href="https://news.scu.edu.cn/rdzl/srkzylbz_ylzzhyldwcjhd.htm" title=".">
                            <img src="https://www.scu.edu.cn/__local/A/9A/84/2C2CBE3111400A05AAFFD7F2745_05D5882E_11C7C9.jpg" width="1380px" height="400px" alt="">
                            <p class="title" style="left: 52px; font-size: 20px; padding: 2px 8px; line-height: 33px; display: none;">.</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值