第三次作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘宝购物车</title>
    <style>
        .c{
            /* border: 1px solid red; */
            height: 250px;
            width: 1000px;
            margin: auto;
        }
        .ccc > span{
            color: rgb(145, 145, 145);
        }
        span:hover{
            color: orange;
        }
        .a{
            /* border: 1px solid red; */

            display: grid;
            margin: auto;

            height :30px;

            grid-template-columns: repeat(19,1fr);
        }
        .b{
            /* border: 1px solid red; */

            height: 70px;
            /* background-color: rgb(206, 210, 214); */
        }
        .b2{
            float: left;
        }
        .b1{
            color: orangered;

            float: left;
        }
        .b3{
            float: right;

            /* border: 1px solid red ; */

            margin-right: 100px;
        }
        .b31{
            color: orangered;
            width: 300px;
            height: 30px;
        }
        .b32{
            height: 30px;
        }

        .d1{
            /* border: 1px solid red; */
            /* background-color: rgb(214, 221, 228); */

            margin: auto;
            width: 1000px;
            height: 600px;
        }
        .d12{
            /* border: 1px solid red; */
            margin: auto;
            margin-top: 100px;
            width: 200px;
            /* height: 200px; */
        }
        .d13{
            margin-left: 380px;
            width: 300px ;
        }
        .d14{
            margin-left: 450px;
        }
        .d141{
            width: 100px;
            height: 60px;
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="a1">
            <span></span>
        </div>
        <div class="a2">
            <span></span>
        </div>
        <div class="a3">
            <span>用户名</span>
        </div>
        <div class="a4">
            <span>手机逛淘宝</span>
        </div>
        <div class="a5">
            <span>网页无障碍</span>
        </div>
        <div class="a6">
            <span></span>
        </div>
        <div></div>
        <div></div>
        <div></div>
        <div class="a7">
            <span></span>
        </div>
        <div class="a8">
            <span>淘宝网首页</span>
        </div>
        <div class="a9">
            <span>我的淘宝</span>
        </div>
        <div class="a10">
            <span>购物车</span>
        </div>
        <div class="a11">
            <span>收藏夹</span>
        </div>
        <div class="a12">
            <span>商品分类</span>
        </div>
        <div>
            <span>免费开店</span>
        </div>
        <div>
            <span>千牛卖家中心</span>
        </div>
        <div4>
            <span>帮助中心</span>
        </div>
        <div>
            <span></span>
        </div>
    </div>
    <div class="b">
        <div class="b2">
            <img src="../homework_3/image/屏幕截图 2024-06-29 110316.png" alt="" height="40px" width="">
        </div>
        <div class="b1">
            <big><big><big><span>购物车</span></big></big></big>
        </div>
        <div class="b3" >
            <input type="text" class="b31">
            <button class="b32">搜索</button>
        </div>
    </div>
    <div class="d">
        <div class="d1">
            <div class="d12">
                <img src="./image/gwc.png" alt="" width="200px" height="150px">
            </div>
            <div class="d13">
                <span>您的购物车空空如也,去首页看看吧</span>
            </div>
            <div class="d14">
                <button class="d141"><big><big>去逛逛</big></big></button>
            </div>
        </div>
    </div>
    <div class="c">
        <div class="c1">
            <p class="ccc">
                <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>1688</span>
                <b>|</b>
                <span>阿里妈妈</span>
                <b>|</b>
                <span>飞猪</span>
                <b>|</b>
                <span>阿里云计算</span>
                <b>|</b>
                <span>AliOS</span>
                <b>|</b>
                <span>阿里通信</span>
                <b>|</b>
                <span>一淘</span>
                <b>|</b>
                <span>万网</span>
                <b>|</b>
                <span>高德</span>
                <b>|</b>
                <span>UC</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>
            </p>
        </div>
        <div class="c2">

        </div>
        <div class="c3">

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿淘宝页面---登陆页面</title>
    <style>
        body{
            background-color: rgb(250, 247, 243);
        }
        .a{
            /* border: 1px solid red; */
            height: 100px;
            margin:  0px;
        }
        .a1{
            /* border: 1px solid red; */
            width: 150px;
            height: 100px;
            margin-left: 300px;float: left;
        }
        .a2{
            width: 200px;
            height: 100px;
            margin-left: 900px;
            float: left;
        }
        .b{
            border: 1px solid rgb(252, 252, 252);
            width: 800px;
            height: 400px;
            background-color: rgb(255, 255, 255);
            box-shadow: 4px 4px 4px rgb(226, 220, 220);
            border-radius: 50px;
            margin-left: 500px;
        }
        .b1{
            /* border: 1px solid red; */
            width: 350px;
            height: 300px;
            margin-top: 50px;
            margin-left: 100px;
            border-right: 1px solid rgb(197, 195, 195);
            float: left;
        }
        .b11{
            /* border: 1px solid red; */
            width: 300px;
            height: 50px;
            margin-top: 20px;
            text-align: center;
        }
        .b121{
            width: 250px;
            height: 50px;
            background-color: rgb(238, 236, 236);
            border-radius: 50px;
            border: white;
        }
        .b12{
            /* border: 1px solid red; */
            margin-left: 30px;
        }
        .b122{
            width: 250px;
            height: 50px;
            background-color: rgb(238, 236, 236);
            border-radius: 50px;
            border: white;
            margin-top: 20px;
        }
        .b123{
            width: 250px;
            height: 50px;
            background-image: linear-gradient(to right,rgb(253, 124, 37),rgb(255, 104, 4));
            border-radius: 50px;
            border: white;
            margin-top: 20px;
        }
        .b13{
            color: rgb(187, 185, 185);
        }
        .b14{
            color: rgb(187, 185, 185);
            margin-top: 10px;
            margin-left: 100px;
        }
        .b2{
            /* border: 1px solid red; */
            width: 300px;
            height: 300px;
            margin-top: 50px;
            float: left;
        }
        .b21{
            /* border: 1px solid red; */
            width: 300px;
            height: 50px;
            margin-top: 20px;
            text-align: center;
        }
        .b22{
            margin-left: 55px;
        }
        .b231{
            color: rgb(187, 184, 184);
            float: left;
            margin-left: 70px;
        }
        .b232{
            float: left;
            border-right: 2px solid rgb(160, 157, 157);
            margin-left: 20px;
            color: rgb(255, 123, 0);
        }
        .b233{
            float: left;
            color: rgb(255, 123, 0);
            margin-left: 3px;
        }
        .b234{
            color: rgb(187, 184, 184);
            float: left;
            margin-left: 120px;
        }
    </style>
</head> 
<body>
    <div class="a">
        <div class="a1">
            <img src="https://gw.alicdn.com/imgextra/i4/O1CN01H11jUw1gVppn3YjsM_!!6000000004148-2-tps-480-144.png" alt="" style="width:170px;height:52px;left:0px;top:50px;">
        </div>
        <div class="a2">
            <small>
                <span>网站无障碍</span><br>
                <span>"登陆页面"改进建议</span>
            </small>
        </div>
    </div>
    <div class="b">
        <div class="b1">
            <div class="b11">
                    <b><big><big>密码登录</big></big></b>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <b><big><big>短信登录</big></big></b>
            </div>
            <div class="b12">
                <input type="text" name="text" class="b121" placeholder="   账号名/手机号/有户名">
                <input type="password" name="password" class="b122" placeholder="   请输入登录密码">
                <button class="b123" type="submit" ><b>登录</b></button>
            </div>
            <div class="b13">
                <span><small>免费注册</small></span>
                <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <span><small>忘记账号名 忘记密码</small></span>
            </div>
            <div class="b14">
                <span><small>支付宝登陆</small></span>
            </div>
        </div>
        <div class="b2">
            <div class="b21">
                <b><big><big>手机扫码安全登录</big></big></b>
            </div>
            <div class="b22">
                <img src="./二维码.png" alt="">
            </div>
            <div class="b23">
                <div class="b231">
                    <span><small>打开</small></span>
                </div>
                <div class="b232">
                    <span><small>淘宝App&nbsp;</small></span>
                </div>
                <div class="b233">
                    <small>天猫App &nbsp;</small>
                </div>
                <div class="b234">
                    <span><small>扫一扫登录</small></span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿淘宝页面</title>
    <style>
        .a{
            height: 100px;
            /* border: 1px solid red; */
        }
        .a1{
            /* border: 1px solid red; */
            width: 260px;
            height: 80px;
            float: left;
        }
        .a2{
            /* border: 1px solid red; */
            width: 1150px;
            height: 100px;
            float: left;
            margin-left: 100px;
        }
        .a21{
            border: 2px solid rgb(247, 72, 8);
            height: 40px;
            border-radius: 5px;
            margin-top: 5px;
        }
        .a211{
            width: 1000px;
            height: 32px;
            border: 0px;
            margin-left: 50px;
            margin-top: 3px;
        }
        .a212{
            background-color: orangered;
            color: aliceblue;
            border: 0px;
            width: 80px;
            height: 38px;
            margin-top: 1px;
            border-radius: 5px;

        }
        .a22{
            margin-left: 30px;
        }
        .b{
            /* border: 1px solid red; */
            height: 1100px;
        }
        .b1{
            height: 500px;
        }
        .b1 > div{
            /* border: 1px solid red; */
            width: 280px;
            height: 500px;
            float: left;
            margin-left: 10px;
            border-radius: 5px;
        }
        .b11:hover{
            border: 1px solid red;
        }
        .b11{
            align-items: center;
        }
        .b112{
            margin-top: 80px;
        }
        .sss{
            color: orangered;
        }
        .b12:hover{
            border: 1px solid red;
        }
        .b13:hover{
            border: 1px solid red;
        }
        .b14:hover{
            border: 1px solid red;
        }
        .b15:hover{
            border: 1px solid red;
        }
        .b16:hover{
            border: 1px solid red;
        }
        .b2{
            margin-top: 10px;
        }
        .b2 > div{
            /* border: 1px solid red; */
            width: 280px;
            height: 500px;
            float: left;
            margin-left: 10px;
            border-radius: 5px;
        }
        .b21:hover{
            border: 1px solid red;
        }
        .b22:hover{
            border: 1px solid red;
        }
        .b23:hover{
            border: 1px solid red;
        }
        .b24:hover{
            border: 1px solid red;
        }
        .b25:hover{
            border: 1px solid red;
        }
        .b26:hover{
            border: 1px solid red;
        }
        .c{
            /* border: 1px solid red; */
            height: 250px;
        }
        .ccc > span{
            color: rgb(145, 145, 145);
        }
        span:hover{
            color: orange;
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="a1">
            <img src="https://gw.alicdn.com/imgextra/i4/O1CN01H11jUw1gVppn3YjsM_!!6000000004148-2-tps-480-144.png" alt="" style="width:240px;height:80px;left:0px;top:50px;">
        </div>
        <div class="a2">
            <div class="a21">
                <input type="text" class="a211" placeholder="手机壳">
                <button type="submit" class="a212">搜索</button>
            </div>
            <div class="a22">
                <span><small>
                    大额神卷 &nbsp;iPhone惊喜卷 &nbsp;进口惊喜卷 &nbsp;家电爆款 &nbsp;3c数码优惠 &nbsp;美味狂欢 &nbsp;女装 &nbsp;货架 &nbsp;空调 &nbsp;手机 &nbsp;笔记本电脑 &nbsp;电脑主机 &nbsp;瓷砖 &nbsp;床 &nbsp;男鞋
                </small></span>
            </div>
        </div>
    </div>
    <div class="b">
        <div class="b1">
            <div class="b11">
                <img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/2207244639976/O1CN01tXJIST2NZ42VvB7nD_!!2207244639976.jpg_360x360q90.jpg_.webp" height="280px" width="280px" >
                <div class="b111">
                     <span>便签贴索引标签纸可书写标记小条便利贴纸粘性强高颜值</span>
                </div>
                <div class="b112">
                    <span class="sss"><b><big>¥2.10</big></b></span> 
                    <span><small>9000+人累计付款 浙江</small></span><br>
                    <span class="sss"><small>包邮</small></span><br>
                    <span>魔方百货严选</span>
                </div>
            </div>
            <div class="b12">
                <img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/2207244639976/O1CN01tXJIST2NZ42VvB7nD_!!2207244639976.jpg_360x360q90.jpg_.webp" height="280px" width="280px" >
                <div class="b111">
                    <span>便签贴索引标签纸可书写标记小条便利贴纸粘性强高颜值</span>
               </div>
               <div class="b112">
                   <span class="sss"><b><big>¥2.10</big></b></span> 
                   <span><small>9000+人累计付款 浙江</small></span><br>
                   <span class="sss"><small>包邮</small></span><br>
                   <span>魔方百货严选</span>
               </div>
            </div>
            <div class="b13">
                <img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/2207244639976/O1CN01tXJIST2NZ42VvB7nD_!!2207244639976.jpg_360x360q90.jpg_.webp" height="280px" width="280px" >
                <div class="b111">
                    <span>便签贴索引标签纸可书写标记小条便利贴纸粘性强高颜值</span>
               </div>
               <div class="b112">
                   <span class="sss"><b><big>¥2.10</big></b></span> 
                   <span><small>9000+人累计付款 浙江</small></span><br>
                   <span class="sss"><small>包邮</small></span><br>
                   <span>魔方百货严选</span>
               </div>
            </div>
            <div class="b14">
                <img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/2207244639976/O1CN01tXJIST2NZ42VvB7nD_!!2207244639976.jpg_360x360q90.jpg_.webp" height="280px" width="280px" >
                <div class="b111">
                    <span>便签贴索引标签纸可书写标记小条便利贴纸粘性强高颜值</span>
               </div>
               <div class="b112">
                   <span class="sss"><b><big>¥2.10</big></b></span> 
                   <span><small>9000+人累计付款 浙江</small></span><br>
                   <span class="sss"><small>包邮</small></span><br>
                   <span>魔方百货严选</span>
               </div>
            </div>
            <div class="b15">
                <img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/2207244639976/O1CN01tXJIST2NZ42VvB7nD_!!2207244639976.jpg_360x360q90.jpg_.webp" height="280px" width="280px" >
                <div class="b111">
                    <span>便签贴索引标签纸可书写标记小条便利贴纸粘性强高颜值</span>
               </div>
               <div class="b112">
                   <span class="sss"><b><big>¥2.10</big></b></span> 
                   <span><small>9000+人累计付款 浙江</small></span><br>
                   <span class="sss"><small>包邮</small></span><br>
                   <span>魔方百货严选</span>
               </div>
            </div>
            <div class="b16">
                <img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/2207244639976/O1CN01tXJIST2NZ42VvB7nD_!!2207244639976.jpg_360x360q90.jpg_.webp" height="280px" width="280px" >
                <div class="b111">
                    <span>便签贴索引标签纸可书写标记小条便利贴纸粘性强高颜值</span>
               </div>
               <div class="b112">
                   <span class="sss"><b><big>¥2.10</big></b></span> 
                   <span><small>9000+人累计付款 浙江</small></span><br>
                   <span class="sss"><small>包邮</small></span><br>
                   <span>魔方百货严选</span>
               </div>
            </div>
        </div>
        <div class="b2">
            <div class="b21">
                <img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/2207244639976/O1CN01tXJIST2NZ42VvB7nD_!!2207244639976.jpg_360x360q90.jpg_.webp" height="280px" width="280px" >
                <div class="b111">
                    <span>便签贴索引标签纸可书写标记小条便利贴纸粘性强高颜值</span>
               </div>
               <div class="b112">
                   <span class="sss"><b><big>¥2.10</big></b></span> 
                   <span><small>9000+人累计付款 浙江</small></span><br>
                   <span class="sss"><small>包邮</small></span><br>
                   <span>魔方百货严选</span>
               </div>
            </div>
            <div class="b22">
                <img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/2207244639976/O1CN01tXJIST2NZ42VvB7nD_!!2207244639976.jpg_360x360q90.jpg_.webp" height="280px" width="280px" >
                <div class="b111">
                    <span>便签贴索引标签纸可书写标记小条便利贴纸粘性强高颜值</span>
               </div>
               <div class="b112">
                   <span class="sss"><b><big>¥2.10</big></b></span> 
                   <span><small>9000+人累计付款 浙江</small></span><br>
                   <span class="sss"><small>包邮</small></span><br>
                   <span>魔方百货严选</span>
               </div>
            </div>
            <div class="b23">
                <img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/2207244639976/O1CN01tXJIST2NZ42VvB7nD_!!2207244639976.jpg_360x360q90.jpg_.webp" height="280px" width="280px" >
                <div class="b111">
                    <span>便签贴索引标签纸可书写标记小条便利贴纸粘性强高颜值</span>
               </div>
               <div class="b112">
                   <span class="sss"><b><big>¥2.10</big></b></span> 
                   <span><small>9000+人累计付款 浙江</small></span><br>
                   <span class="sss"><small>包邮</small></span><br>
                   <span>魔方百货严选</span>
               </div>
            </div>
            <div class="b24">
                <img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/2207244639976/O1CN01tXJIST2NZ42VvB7nD_!!2207244639976.jpg_360x360q90.jpg_.webp" height="280px" width="280px" >
                <div class="b111">
                    <span>便签贴索引标签纸可书写标记小条便利贴纸粘性强高颜值</span>
               </div>
               <div class="b112">
                   <span class="sss"><b><big>¥2.10</big></b></span> 
                   <span><small>9000+人累计付款 浙江</small></span><br>
                   <span class="sss"><small>包邮</small></span><br>
                   <span>魔方百货严选</span>
               </div>
            </div>
            <div class="b25">
                <img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/2207244639976/O1CN01tXJIST2NZ42VvB7nD_!!2207244639976.jpg_360x360q90.jpg_.webp" height="280px" width="280px" >
                <div class="b111">
                    <span>便签贴索引标签纸可书写标记小条便利贴纸粘性强高颜值</span>
               </div>
               <div class="b112">
                   <span class="sss"><b><big>¥2.10</big></b></span> 
                   <span><small>9000+人累计付款 浙江</small></span><br>
                   <span class="sss"><small>包邮</small></span><br>
                   <span>魔方百货严选</span>
               </div>
            </div>
            <div class="b26">
                <img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/2207244639976/O1CN01tXJIST2NZ42VvB7nD_!!2207244639976.jpg_360x360q90.jpg_.webp" height="280px" width="280px" >
                <div class="b111">
                    <span>便签贴索引标签纸可书写标记小条便利贴纸粘性强高颜值</span>
               </div>
               <div class="b112">
                   <span class="sss"><b><big>¥2.10</big></b></span> 
                   <span><small>9000+人累计付款 浙江</small></span><br>
                   <span class="sss"><small>包邮</small></span><br>
                   <span>魔方百货严选</span>
               </div>
            </div>
        </div>
    </div>
    <div class="c">
        <div class="c1">
            <p class="ccc">
                <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>1688</span>
                <b>|</b>
                <span>阿里妈妈</span>
                <b>|</b>
                <span>飞猪</span>
                <b>|</b>
                <span>阿里云计算</span>
                <b>|</b>
                <span>AliOS</span>
                <b>|</b>
                <span>阿里通信</span>
                <b>|</b>
                <span>一淘</span>
                <b>|</b>
                <span>万网</span>
                <b>|</b>
                <span>高德</span>
                <b>|</b>
                <span>UC</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>
            </p>
        </div>
        <div class="c2">

        </div>
        <div class="c3">

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值