第三次作业

红中️

于 2024-07-18 12:41:07 发布

阅读量65

点赞数 1

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/2301_81590938/article/details/140519947

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业1</title>
    <style>
        body {
            background-image: url("./屏幕截图 2024-07-14 093343.jpg");
            background-size: cover;
            background-repeat: no-repeat;
        }
        .b {
            color: #ff5100e2;
            font-size: 25px;
            font-weight: 550;
            position: absolute;
    left:35px
        }
        .c {
            font-size: 25px;
            font-weight: 550;
            position: absolute;
    left:165px
        }
        .f{
            color: gainsboro;
            font-size: 25px;
            position: absolute;
    left:145px
        }
        input[type="text"] {
            width: 65%;
            height: 50px;
            border-radius: 4px;
            border: none;
            background-color:rgb(250, 246, 246);
            position: absolute;
            top: 80px;
        }
        input[type="password"] {
            width: 65%;
            height: 50px;
            border-radius: 4px;
            border: none;
            background-color:rgb(250, 246, 246);
            position: absolute;
            top: 150px;
        }
        input[type="submit"], button[type="submit"] {
  background-color: #ff5100e2; 
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px; 
  width: 300px; 
  height: 40px;
  position: absolute;
            top: 250px;
        }
.e{
    color:#f1f0f0;
}
.a1{
    position: absolute;
top: 200px;
left: 350px;
width: 450px;
height: 500px;
border: 1px solid #ccc; 
border: 1px solid #ccc; 
  border-left: 0;
  border-top: 0;
  border-bottom: 0;
}
.a{
   
    
}
.a3{
    position: absolute;
    top: 350px; 
    font-size: 13px;
    position: absolute;
    left:45px;
    text-align: center;
}
.a4{
    position: absolute;
top: 200px;
left: 850px;
}
.a5{
    text-align: center;
}
    </style>
</head>
<body>
    <div class="a1">
    <div class="a">
        <a class="b">密码登录</a>
        <a class="f">|</a>
        <a class="c">短信登录</a>
    </div>
    <form>
    <p><input type="text" name="username" id="username" placeholder="账号名/邮箱/手机号"></p>
    <p><input type="password" name="password" id="password" placeholder="请先输入登陆密码"></p>
    <p></p><button type="submit">登录</button></p>
    </form>
    <div class="a3">
    <a class="d">支付宝登陆</a>
    <a class="e">|</a>
    <a class="d">钉钉登陆</a><br>
    <a class="d">免费注册</a>
    <a class="e">|</a>
    <a class="d">忘记账号名</a>
    <a class="e">|</a>
    <a class="d">忘记密码</a>
    </div>
    </div>
    <div class="a4">
    <p style="text-align: center;">手机扫码安全登录</p>
    <img src="C:\Users\eren\Pictures\Camera Roll\Screenshots\屏幕截图 2024-07-14 114018.png"><br>
    <div class="a5">
    <a>打开</a>
    <a>淘宝</a>
    <a>|</a>
    <a>天猫</a>
    <a>app扫码</a>
    </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业2</title>
    <!-- 
        理解整个页面的结构
            1.div -box
            2.ul - prods
            3.li - pord
                a - prod-href
                    img - prod-img
                    div - prod-introduce
                    div - prod-price
                    div - prod-boss
                    div - prod-sale
    -->
    <style>
        .box{
            width: 85%;
            /* margin: auto; */
        }
        .prod{
            width: 234px;
            height: 366px;
            list-style: none;
            border: 1px solid #f2f2f2;
            display: inline-block;
            line-height: 1.6;
            margin-left: -5px;
            
        }
        .prod-href{
            text-decoration: none;
        }
        .prod:hover{
            border-color: red;
        }
     
        .prod-intoduce-span{
            color: black;
            font-size: 14px;
        }
        .prod-price{
            font-size: 19px;
            color: red;
        }
        .prod-boss{
            color:red;
            font-size: 15px;
        }

        .prod-test-box{
            width: 210px;
            height: 340px;
            margin: auto;
            margin-top: 15px;
        }

    </style>
</head>
<body>
    <div class="box">
        <ul class="prods">
            <!-- 编写一个商品链接 -->
             <li class="prod">
                <a class="prod-href" href="https://detail.tmall.com/item.htm?id=39430694251&spm=a21bo.jianhua/a.201876.d5.5af92a89QzdPTR&scm=1007.40986.369799.0&pvid=313a261c-f5d7-4e52-92bc-31b08ef6ec9e">
                    <div class="prod-test-box">
                        <img class="prod-img" width="200px" height="200px" src="https://gw.alicdn.com/imgextra/i1/2086494918/O1CN01HkKS9R1mCUTR4cjna_!!2086494918-0-lubanu-s.jpg_Q75.jpg_.webp" alt="">
                        
                        <div class="prod-introduce">
                            <span class="prod-intoduce-span">意大利CT施达地面推水刮硅胶橡胶条 阳台地板刮皮除水器刮条配件</span>
                        </div>
                        <div class="prod-boss">送运费险</div>
                        <div class="prod-price">￥14.1</div>
                    </div>
                </a>
             </li>
             <li class="prod">
                <a class="prod-href" href="https://item.taobao.com/item.htm?spm=a21bo.jianhua/a.201876.d2.5af92a89QzdPTR&id=14387786338&scm=1007.40986.369799.0&pvid=313a261c-f5d7-4e52-92bc-31b08ef6ec9e">
                    <div class="prod-test-box">
                        <img class="prod-img" width="200px" height="200px" src="https://gw.alicdn.com/imgextra/i1/816239067/O1CN018Gg5fr2Gqjw2OghJl_!!816239067.jpg_Q75.jpg_.webp" alt="">
                        <div class="prod-introduce">
                            <span class="prod-intoduce-span">【官方企业店】硕方tp70/76i色带TP-R1002B黑色60/66碳带tp-r100b</span>
                        </div>
                        <div class="prod-boss">送运费险</div>
                        <div class="prod-price">￥39</div>
                    </div>
                </a>
             </li>
             <li class="prod">
                <a class="prod-href" href="https://detail.tmall.com/item.htm?id=18651424647&spm=a21bo.jianhua/a.201876.d3.5af92a89QzdPTR&scm=1007.40986.369799.0&pvid=313a261c-f5d7-4e52-92bc-31b08ef6ec9e">
                    <div class="prod-test-box">
                        <img class="prod-img" width="200px" height="200px" src="https://gw.alicdn.com/imgextra/i1/760800949/O1CN01300lMM1IsgXmf5pHW_!!0-item_pic.jpg_Q75.jpg_.webp" alt="">
                        <div class="prod-introduce">
                            <span class="prod-intoduce-span">力胜 KB-2202 有线键鼠套装送鼠标垫USB/PS2台式机专用办公单键盘</span>
                        </div>
                        <div class="prod-boss">送运费险</div>
                        <div class="prod-price">￥40</div>
                    </div>
                </a>
             </li>
             <li class="prod">
                <a class="prod-href" href="https://item.taobao.com/item.htm?spm=a21bo.jianhua/a.201876.d4.5af92a89QzdPTR&id=38761089930&scm=1007.40986.369799.0&pvid=313a261c-f5d7-4e52-92bc-31b08ef6ec9e">
                    <div class="prod-test-box">
                        <img class="prod-img" width="200px" height="200px" src="https://gw.alicdn.com/imgextra/i4/95596829/O1CN01ECdeoT20JjgW9ZBK2_!!95596829.jpg_Q75.jpg_.webp" alt="">
                        <div class="prod-introduce">
                            <span class="prod-intoduce-span">闽南特产 高塔高仔甜辣酱1.4升 蒜蓉 辣椒酱灌汤包海蛎煎肉粽蘸酱</span>
                        </div>
                        <div class="prod-boss">送运费险</div>
                        <div class="prod-price">￥18.8</div>
                    </div>
                </a>
             </li>
             <li class="prod">
                <a class="prod-href" href="https://detail.tmall.com/item.htm?id=39430694251&spm=a21bo.jianhua/a.201876.d5.5af92a89QzdPTR&scm=1007.40986.369799.0&pvid=313a261c-f5d7-4e52-92bc-31b08ef6ec9e">
                    <div class="prod-test-box">
                        <img class="prod-img" width="200px" height="200px" src="https://gw.alicdn.com/imgextra/i1/2086494918/O1CN01HkKS9R1mCUTR4cjna_!!2086494918-0-lubanu-s.jpg_Q75.jpg_.webp" alt="">
                        <div class="prod-introduce">
                            <span class="prod-intoduce-span">意大利CT施达地面推水刮硅胶橡胶条 阳台地板刮皮除水器刮条配件</span>
                        </div>
                        <div class="prod-boss">送运费险</div>
                        <div class="prod-price">￥14.1</div>
                    </div>
                </a>
             </li>
             <li class="prod">
                <a class="prod-href" href="https://detail.tmall.com/item.htm?id=40142131073&spm=a21bo.jianhua/a.201876.d6.5af92a89QzdPTR&scm=1007.40986.369799.0&pvid=313a261c-f5d7-4e52-92bc-31b08ef6ec9e">
                    <div class="prod-test-box">
                        <img class="prod-img" width="200px" height="200px" src="https://gw.alicdn.com/imgextra/i3/1132474133/O1CN01JiN6mD1gOxu6iNbB1_!!0-item_pic.jpg_Q75.jpg_.webp" alt="">
                        <div class="prod-introduce">
                            <span class="prod-intoduce-span">陶煲王砂锅炖锅家用燃气陶瓷汤锅耐高温干烧不裂煤气灶煲汤锅沙锅</span>
                        </div>
                        <div class="prod-boss">送运费险</div>
                        <div class="prod-price">￥148</div>
                    </div>
                </a>
             </li>
             <li class="prod">
                <a class="prod-href" href="https://detail.tmall.com/item.htm?id=40735545910&spm=a21bo.jianhua/a.201876.d7.5af92a89QzdPTR&scm=1007.40986.369799.0&pvid=313a261c-f5d7-4e52-92bc-31b08ef6ec9e">
                    <div class="prod-test-box">
                        <img class="prod-img" width="200px" height="200px" src="https://gw.alicdn.com/imgextra/i4/2200445718/O1CN01bVATOB1s6tfoIkCWm_!!0-item_pic.jpg_Q75.jpg_.webp" alt="">
                        <div class="prod-introduce">
                            <span class="prod-intoduce-span">Kinder健达缤纷乐18包牛奶榛果威化巧克力制品 进口零食129gx6组</span>
                        </div>
                        <div class="prod-boss">送运费险</div>
                        <div class="prod-price">￥158.5</div>
                    </div>
                </a>
             </li>
             <li class="prod">
                <a class="prod-href" href="https://item.taobao.com/item.htm?spm=a21bo.jianhua/a.201876.d8.5af92a89QzdPTR&id=41074019832&scm=1007.40986.369799.0&pvid=313a261c-f5d7-4e52-92bc-31b08ef6ec9e">
                    <div class="prod-test-box">
                        <img class="prod-img" width="200px" height="200px" src="https://gw.alicdn.com/imgextra/i1/1023958/O1CN01joyk011f6oLoSQVps_!!1023958.jpg_Q75.jpg_.webp" alt="">
                        <div class="prod-introduce">
                            <span class="prod-intoduce-span">金钟山结婚喜饼散装整箱双喜囍庆嫁女婚礼宝宝百日宴喜字饼干专用</span>
                        </div>
                        <div class="prod-boss">送运费险</div>
                        <div class="prod-price">￥42.9</div>
                    </div>
                </a>
             </li>
             <li class="prod">
                <a class="prod-href" href="https://item.taobao.com/item.htm?spm=a21bo.jianhua/a.201876.d9.5af92a89QzdPTR&id=41562664920&scm=1007.40986.369799.0&pvid=313a261c-f5d7-4e52-92bc-31b08ef6ec9e">
                    <div class="prod-test-box">
                        <img class="prod-img" width="200px" height="200px" src="https://gw.alicdn.com/imgextra/i1/1035596657/O1CN015HgErD1z2xTOZZo7M_!!1035596657.jpg_Q75.jpg_.webp" alt="">
                        <div class="prod-introduce">
                            <span class="prod-intoduce-span">圆形蒸笼草垫 加密加厚不粘包子屉垫篦子 10个一捆小笼包香草垫子</span>
                        </div>
                        <div class="prod-boss">送运费险</div>
                        <div class="prod-price">￥12</div>
                    </div>
                </a>
             </li>
             <li class="prod">
                <a class="prod-href" href="https://detail.tmall.com/item.htm?id=43401248049&spm=a21bo.jianhua/a.201876.d10.5af92a89QzdPTR&scm=1007.40986.369799.0&pvid=313a261c-f5d7-4e52-92bc-31b08ef6ec9e">
                    <div class="prod-test-box">
                        <img class="prod-img" width="200px" height="200px" src="https://gw.alicdn.com/imgextra/i4/2370851350/O1CN0147gfv01LqLVyLu7u9_!!2370851350.jpg_Q75.jpg_.webp" alt="">
                        <div class="prod-introduce">
                            <span class="prod-intoduce-span">BYXAS/百赛施德国TUV认证热水袋注水暖水袋毛绒暖手宝保暖</span>
                        </div>
                        <div class="prod-boss">送运费险</div>
                        <div class="prod-price">￥69</div>
                    </div>
                </a>
             </li>
             

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业3</title>
    <style>
        img{
            width: 500px;
            height:400px;
        }
        .b{
            position: absolute;
            bottom: 460px;
            left: 550px;
            width: 600px;
            height:400px;
        }
        .b1{
            font-size:20px;
            font-weight:650;
        }
        .b21{
            color:#ff5100e2;
            font-size:25px;
            font-weight:650;
        }
        .b22{
            color:#f2763ce2;
            font-size:15px;
            font-weight:450;
        }
        .b31{
            font-size:18px;
            color:rgb(162, 159, 159)
        }
        .b51{color: white;
            font-size: 15px;
           width: 170px;
           height: 50px;
            background-color: #ff5100e2;
            border-radius: 4px;
            display: flex;
            display: inline-block;
            text-align: center;
            align-items: center;
        }
        .b52{
            color: white;
            font-size: 15px;
           width: 170px;
           height: 50px;
            background-color: #e2a542e2;
            border-radius: 4px;
            display: flex;
            display: inline-block;
            text-align: center;
        }
        .b53{
            font-size: 15px;
           width: 100px;
           height: 50px;
           border-radius: 4px;
           border: 0px;
            display: flex;
            text-align: center;
            border: 1px solid gray;
            display: inline-block;
        }
        .b62{
            color: white;
            font-size: 15px;
           width: 100px;
           height: 50px;
            background-color: #f85205e2;
            border-radius: 4px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: auto;
            margin-right: auto;
        }
        .b61{
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: auto;
            margin-right: auto;
        }
        .b6{
            width: 200px;
            height: 100px;
            position: absolute;
            top: 450px;
            right: 400px;
        }
        .b5{
            position: absolute;
            top: 150px;
        }
        .b4{
            position: absolute;
            top: 100px;
            right: 220px;
        }
    </style>
    </head>
    <body>
    <div>
        <div class="a">
            <img src="C:\Users\eren\Pictures\Camera Roll\Screenshots\屏幕截图 2024-07-15 172234.png"alt="">
        </div>
        <div class="b">
            <div class="b1">意大利CT施达地面推水刮硅胶橡胶条 阳台地板刮皮除水器刮条配件</div>
            <div class="b2">
                <a class="b21">￥14.1</a>
                <a class="b22">登录查看更多优惠 ></a>
            </div>
            <div class="b3">
                <a class="b31">配&nbsp;&nbsp;&nbsp;送:</a>
                <a>多仓发货至&nbsp;&nbsp;&nbsp;内江市&nbsp;&nbsp;威远县</a>
            </div>
            <div class="b4"style="text-align: center;">快递: 8.00预计17小时内发货|承诺48小时内...</div>
            <div class="b5">
                <div class="b51">立即购买</div>
                <div class="b52">加入购物车</div>
                <div class="b53">☆收藏</div>
            </div>
            <div class="b6">
                <div class="b61">登录后查看更多商品信息</div>
                <div class="b62">一键登陆</div>
            </div>
        </div>
    </div>
    </body>
    </html>