第三次作业

淘宝的三个界面

登录页面

<!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>
        .a{
            margin-top: 25px;
            margin-left: 190px;
        }
        .box{
            width: 885px;
            height: 514px;
            border-radius: 18px;
            background-color:whitesmoke;
            margin: auto;
            margin-top: 60px;
            border-radius: 18px;
        }
        .b,.c{
            float: left;
            border-radius: 18px;
        }
        .b{
            width: 60%;
            background-color:whitesmoke;
            height: 514px;
            float: left;
            border-radius: 18px;
        }
        .c{
            width: 40%;
            background-color:whitesmoke;
            height: 514px;
            border-radius: 18px;
            float: left;
            position: relative;
            left: 670px;
            bottom: 180px;
           
           }
        .b11{
            color: #ff6200;
            font-family: PingFang SC;
            padding: 0 20px;
            height: 16px;
            margin: 0;
            font-size: 22px;
            font-weight: 600;
            line-height: 16px;
            letter-spacing: 0;
             position: relative;
             top: 80px;
             left: 60px;
                }
        .b12{
            font-family: PingFang SC;
             padding: 0 20px;
             height: 16px;
             margin: 0;
             font-size: 22px;
             font-weight: 600;
             line-height: 16px;
             letter-spacing: 0;
             color: #11192d;
             position: relative;
             top:80px;
             left: 80px;
        }
        .b2{
            position: relative;
            top: 120px;
            left: 120px; 
        }
        .b3{
          position: relative;
          top: 150px;
          left: 120px;
         
        }
       
        button{ background-color: #ff6200;
            position: relative;
            top: 180px;
            left: 120px;
            width: 280px;
            height: 35px;
            border-radius: 8px;
            border: 0px;
        }
       
        li{list-style: none;
            display: inline-block;
          border-right: 1px black;
        }
        .b5{
            position: relative;
            top: 200px;
            left: 80px;
        }
      
        .c1{
             position: relative;
            top: 100px;
            right: 10px; 
        }
       
    </style>
</head>
<body>
    <div class="a"><img src="./下载.png" alt="" style="width: 72px;height: 42px;"></div>
    <div class="box">
        <div class="b">
            <span class="b11">密码登录</span> <span class="b12">短信登陆</span><br>
            <div class="b2"><input type="text" placeholder="账号名/邮箱/手机号" style="border-color: #f1eeee;
                border-radius: 8px;
                font-family: PingFang SC;
                font-size: 16px;
                 width: 280px;
                 height: 35px;
                 border: 0px;
               "></div>
            <div class="b3">
                <input type="text" placeholder="请输入登录密码" style="border-color: #f1eeee;
                    border-radius: 8px;
                    font-family: PingFang SC;
                    font-size: 16px;
                    width: 280px;
                    height: 35px;
                    border: 0px;
                   "> </div>
            <div class="b4">
                <button type="submit">登录</button>
            </div>
            <div class="b5">

                <ul>
                    <li><img src="./下载 (1).svg" alt="" style="width: 14px; height: 14px;">支付宝登录</li>
                    <li>免费注册|</li>
                    <li>忘记账号|</li>
                    <li>忘记密码</li>
                </ul>
            </div
    </div>
        <div class="c">
            <div class="c1">
            <span style="font-size: 22px;">手机扫码登录</span><br><br>
        <img src="./微信截图_20240615183132.png" alt="" style="width: 176px;height: 176px; position: relative; right: 30px;" >
        </div>
    </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>登录</title>
    <style>
        .a>div{
            background-color: aliceblue;
            float: left;
            width: 1190px;
        height: 119px;}
       
        
        
        .a2{
            position: fixed;
            top:30px;
            left: 200px;
        }
        .a3{
            position: fixed;
          left: 820px;
            top: 35px;
        }
        ul{
            width:500px;
            position: fixed;
            left: 200px;
        }
       li{
        width: 50px;
            list-style: none;
            display: inline-block;}
        .box{
            position: relative;
            top: 90px;
        }
        
        .box{
            display: grid;
            grid-template-rows: repeat(1,1fr);
            grid-template-columns: repeat(3,1fr);
            height: 310px;
             width: 1190px;
            grid-gap: 5px;
       }
        .box>div:nth-child(1){
        grid-column: 1/2;
        background-color:whitesmoke;
        width: 280px;
       }
       .box>div:nth-child(2){grid-column: 2/3;width: 610px;}
       .box>div:nth-child(3){grid-column: 3/4;width: 240px;}
       
       .b3{
        margin: 0px;
        /* border: 2px solid red; */
        position: relative;
        left: 200px;}
        .c>body{
            float: left;
            height: 48px;
            
        }
        .c{
            margin-top: 250px;
            height: 60px;
            width: 100%;
             
        }  
        .c1{
            height: 60px;
            background-color: white;
            width: 200px;
        }
        .z1{
            position: relative;
            bottom: 35px;
        }
        .z2{
            font-size: 12px;
            position: relative;
            bottom: 30px;
            left: 55px;
            color: #ff5000!important;
        }
        /* 下面 */
       .c1,.c2,.c3,.c4,.c5,.c6{
        float: left;
       margin: 5px;}
        
      
       .c2{
        height: 60px;
            background-color:white;
            width: 200px;
             }
       .z3{
        color: #11192d;
        font-size: 16px;
        position: relative;
        bottom: 30px;
             }
       .z4{
           position: relative;
           bottom: 30px;
           left: 60px;
           color: #7c889c;
           font-size: 12px;
            }
       .c3{
            height: 60px;
            width: 200px;
  background-color: white;
            }
        .z5{
            color: #11192d;
            font-size: 16px;
            position: relative;
        bottom: 30px;
        }
        .z6{
            color: #7c889c;
            font-size: 12px;
            position: relative;
           bottom: 10px;
           right: 70px;
        }
        .c4{
            height: 60px;
            width: 200px;
  background-color: white;
        }
        .z7{ color: #11192d;
            font-size: 16px;
            position: relative;
        bottom: 30px;
    }
        .z8{
           color: #7c889c;
           font-size: 12px;
           position: relative;
           bottom: 10px;
           right: 70px;
        }
        .c5{height: 60px;
            width: 200px;
  background-color: white;
        }
        .z9{color: #11192d;
            font-size: 16px;
            position: relative;
        bottom: 30px;}
        
        .z10{ color: #7c889c;
           font-size: 12px;
           position: relative;
           bottom: 10px;
           right: 70px;

        }
       
    </style>
</head>
<body><div class="a">
    <div class="a1"><img src="https://img.alicdn.com/imgextra/i1/O1CN01BqHq2Z28Ns0s0KLHa_!!6000000007921-2-tps-126-54.png" alt="" style="text-align: center;">
     <div class="a2"><input type="text" style="width: 690px; height: 37px; border-color: #FE6076;border-radius: 10px;"></div>
    <div class="a3"><button type="submit" style="height: 34px; width: 73px;border-color: #FE6076; background-color: #FE6076;border-radius: 10px;">搜索</button></div>
    <div class="a4">
    <ul class="a41">
        <li>聚划算</li>
        <li>空调</li>
        <li>笔记本</li>
        <li>洗衣机</li>
        <li>零食</li>
        <li>球衣</li>
        <li>游戏</li>
    </ul>
    </div>
     <div class="box">
        <div class="b1">
    <table  width="280px" height="200px" >
           <tr>
            <td rowspan="2"><img src="./女装内衣.png" alt=""style="width:20px; height:20px;">女人</td>
            <td>连衣裙</td>
            <td>凉鞋</td>
            <td>拖鞋</td>
        </tr>
           <tr>
             
            <td>高跟鞋</td>
            <td>鞋子</td>
            <td>长裙</td>
        </tr>
           <tr>
            <td rowspan="2"><img src="./男装.png" alt=""style="width:20px; height:20px;">男人 </td>
            <td>拖鞋</td>
            <td>T恤</td>
            <td>男鞋</td>
        </tr>
           <tr>
         
            <td>单车</td>
            <td>套装</td>
            <td>头盔</td>
        </tr>
           <tr>
            <td rowspan="2"><img src="./数码手机.png" alt=""style="width:20px; height:20px;">数码</td>
            <td>耳机</td>
            <td>冰箱</td>
            <td>空调</td>
        </tr>
           <tr>
          
            <td>饮水机</td>
            <td>小白鞋</td>
            <td>投影仪</td>
        </tr>
           <tr>
            <td rowspan="2"><img src="./母婴玩具.png" alt=""style="width:20px; height:20px;">母婴</td>
            <td>笔袋</td>
            <td>卫衣</td>
            <td>手套</td>
        </tr>
           <tr>
          
            <td>益生菌</td>
            <td>婴儿车</td>
            <td>帽子</td>
        </tr>
    </table>
        </div>
       
        <div class="b2"><img src="https://gw.alicdn.com/imgextra/i2/O1CN01nlPQ9s1y3aKUb5tDo_!!6000000006523-0-tps-800-450.jpg" alt="" ></div>
        <div class="b3">
            <!-- <div class="b31"><span style="color: #FE6076;">我的淘宝</span></div>
            <div class="b32">
                <div class="b321"><span style=" color: #c50a0a;font-size: 38px; width: 150px;" >天猫</span></div>
                <div class="b322"><img src="https://img.alicdn.com/tfs/TB1HqQ.iEH1gK0jSZSyXXXtlpXa-228-126.gif" alt="" style="width: 199px;height: 61px; margin-left: 60px"></div>
            </div>
            <div class="b33">
                <div class="b331"><img src="https://img.alicdn.com/tfs/TB19mNXiO_1gK0jSZFqXXcpaXXa-228-126.gif" alt="" style="width: 199px;height: 61px;margin-bottom: 10px; float: left;;"> </div>
                <div class="b332"> <img src="https://img.alicdn.com/imgextra/i1/O1CN01ri8MCJ1wodmFXLMWC_!!6000000006355-2-tps-238-122.png" alt="" style="width: 199px;height: 61px;margin-left: 50px;float: left;;"></div>
            </div>
             <div class="b34">
                <div class="b341"> <span style=" color: #c50a0a;font-size: 38px; width: 150px;">九块九</span></div>
                <div class="b342"><img src="https://gw.alicdn.com/imgextra/i2/O1CN01fxERSz1lLp5Jqzmv1_!!6000000004803-2-tps-238-120.png" alt="" style="width: 199px;height: 61px;margin-top: 20px;margin-left: 80px;"> </div>  -->
          <table  width="240px" height="280px" ">
                <tr>
            <td colspan="2"><span style=" font-size: 38px; color: #FE6076;">我的淘宝</span></td>
            <!-- <td></td> -->
           </tr>
           <tr>
            <td><span style=" font-size: 38px; color: #FE6076;">天猫</span></td>
            <td><img src="https://img.alicdn.com/tfs/TB1HqQ.iEH1gK0jSZSyXXXtlpXa-228-126.gif" alt="" style="width: 119px;height: 61px;"></td>
           </tr>
           <tr>
            <td><img src="https://img.alicdn.com/tfs/TB19mNXiO_1gK0jSZFqXXcpaXXa-228-126.gif" alt="" style="width: 119px;height: 61px;"></td>
            <td><img src="https://img.alicdn.com/imgextra/i1/O1CN01ri8MCJ1wodmFXLMWC_!!6000000006355-2-tps-238-122.png" alt="" style="width: 119px;height: 61px;"></td>
           </tr>
           <tr>
            <td><span style=" font-size: 38px; color: #FE6076;">九块九</span></td>
            <td><img src="https://gw.alicdn.com/imgextra/i2/O1CN01fxERSz1lLp5Jqzmv1_!!6000000004803-2-tps-238-120.png" alt="" style="width: 119px;height: 61px;"></td>
           </tr>
           <tr>
            <td><img src="https://img.alicdn.com/tfs/TB1zFU_ipT7gK0jSZFpXXaTkpXa-228-126.gif" alt="" style="width: 119px;height: 61px;"></td>
            <td><img src="https://ossgw.alicdn.com/alp/1578762297268-200-107.png" alt="" style="width: 119px;height: 61px;"></td>
           </tr>
        </table>
           
            </div>
         
        </div>
    <div class="c">
        <div class="c1"><img src="https://gw.alicdn.com/imgextra/i2/O1CN011E0R1J23w9lJDeJXk_!!6000000007319-2-tps-192-192.png" alt="" style="width: 60px;height: 60px;border-radius: 100%;background-color: rgb(241, 233, 229);"><span class="z1" style="color: #ff5000;font-size: 16px;">猜你喜欢</span>
        <br><span class="z2" style="font-size: 12px;">精选好物推荐</span>
        </div>
        <div class="c2"><img src="https://img.alicdn.com/imgextra/i4/O1CN01O363PQ23L3gUtAlg5_!!6000000007238-2-tps-192-192.png" alt="" style="width: 60px;height: 60px;border-radius: 100%;background-color: rgb(241, 233, 229);"><span class="z3">潮店数码</span><br>
        <span class="z4">疯强8.5折起</span>
        </div>
        <div class="c3"><img src="https://img.alicdn.com/imgextra/i3/O1CN01wCKde31iiJrvWtIbb_!!6000000004446-2-tps-192-192.png" alt="" style="width: 60px;height: 60px;border-radius: 100%;background-color: rgb(241, 233, 229);">
        <span class="z5">服饰时尚</span>
        <span class="z6">大牌直降</span>
        </div>
        <div class="c4"><img src="https://gw.alicdn.com/imgextra/i4/O1CN01HcFWbP25zTrvtEkbS_!!6000000007597-2-tps-192-192.png" alt="" style="width: 60px;height: 60px;border-radius: 100%;background-color: rgb(241, 233, 229);">
        <span class="z7">运动户外</span>
        <span class="z8">满300减50</span>
        </div>
        <div class="c5"><img src="https://img.alicdn.com/imgextra/i1/O1CN01OrnNZw1QLjFUWKGmc_!!6000000001960-2-tps-192-192.png" alt="" style="width: 60px;height: 60px;border-radius: 100%;background-color: rgb(241, 233, 229);">
        <span class="z9">精致护理</span>
        <span class="z10">满十减一</span>
        </div>
    </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>
        
        .a{
            position:relative;
            bottom: 50px;
        }
        .b{
            background-color: #f03726;
            font-size: 18px;
            position: absolute;
            top: 10px;
            left: 997px;
        }

        .dh{
          width: 60px;
          height: 24px;
          list-style: none;
          display: inline-block;
          font-size: 14px;
          color: #50607A;
        }
        .c{
          position: relative;
          bottom:65px ;
          left: 300px;

        }
      
      .box{
        width: 1200px;
        height: 800px;
        margin: auto;
      }
       li{
        list-style-type: none;
        display: inline-block;
        border: #f03726 1px;
        margin-right: 4px;
       }
       .pro-introduce{
        display: inline-block;
        font-size: 13px;
        font-weight: 500;
        width: 200px;
        height: 40px;
        margin-left: 8px;
        margin-right: 8px;
       }
       .pro-sale{
        position: relative;
        left: 120px;
       }
    </style>
</head>
<body>
    <div class="head"><img src="https://img.alicdn.com/tfs/TB1R5fsgyDsXe8jSZR0XXXK6FXa-281-80.jpg" alt="">
    <input type="text" class="a" style="width: 697px;height: 39px;border-color: #f03726;">
    <button class="b" type="submit" style="width: 95px;height: 40px;border-color: #f03726;">搜索</button>
   <div class="c"><ul>
                    <li class="dh">苹果</li>
                    <li class="dh">芬迪</li>
                    <li class="dh">零食</li>
                    <li class="dh">床垫</li>
                    <li class="dh">电脑</li>
                    <li class="dh">手机</li>
                    <li class="dh">可乐</li>
                    <li class="dh">鼠标垫</li>
                  </ul>
    </div>
    <div class="box">
        <ul>
            
            <li>
                <a href="">
                   <div class="pro-img"><img src="https://img.alicdn.com/imgextra/i2/2086030006/O1CN01s6CrAd1BunKEmxxpu_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt=""
                     style=" height: 200px; width: 194px;"></div>
                   <div class="pro-introduce"><span>内蒙古牛肉干特产零食手撕牛肉干五香原味牛肉粒香辣味休闲食品</span></div>
                   <div class="pro-price"><span style="color: #fd3f31;font-size: 18px;">¥8.8</span></div>
                   <div class="pro-boss"><span><img src="./微信截图_20240617115948.png" alt="">遥遥零食小卖部</span></div>
                   <div class="pro-sale"><span style="font-size: 12px;">月销33</span></div>
                </a>
            </li>
            <li>
                <a href="">
                   <div class="pro-img"><img src="https://img.alicdn.com/imgextra/i2/2086030006/O1CN01s6CrAd1BunKEmxxpu_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt=""
                     style=" height: 200px; width: 194px;"></div>
                   <div class="pro-introduce"><span>内蒙古牛肉干特产零食手撕牛肉干五香原味牛肉粒香辣味休闲食品</span></div>
                   <div class="pro-price"><span style="color: #fd3f31;font-size: 18px;">¥8.8</span></div>
                   <div class="pro-boss"><span><img src="./微信截图_20240617115948.png" alt="">遥遥零食小卖部</span></div>
                   <div class="pro-sale"><span style="font-size: 12px;">月销33</span></div>
                </a>
            </li>
            <li>
                <a href="">
                   <div class="pro-img"><img src="https://img.alicdn.com/imgextra/i2/2086030006/O1CN01s6CrAd1BunKEmxxpu_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt=""
                     style=" height: 200px; width: 194px;"></div>
                   <div class="pro-introduce"><span>内蒙古牛肉干特产零食手撕牛肉干五香原味牛肉粒香辣味休闲食品</span></div>
                   <div class="pro-price"><span style="color: #fd3f31;font-size: 18px;">¥8.8</span></div>
                   <div class="pro-boss"><span><img src="./微信截图_20240617115948.png" alt="">遥遥零食小卖部</span></div>
                   <div class="pro-sale"><span style="font-size: 12px;">月销33</span></div>
                </a>
            </li>
            <li>
                <a href="">
                   <div class="pro-img"><img src="https://img.alicdn.com/imgextra/i2/2086030006/O1CN01s6CrAd1BunKEmxxpu_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt=""
                     style=" height: 200px; width: 194px;"></div>
                   <div class="pro-introduce"><span>内蒙古牛肉干特产零食手撕牛肉干五香原味牛肉粒香辣味休闲食品</span></div>
                   <div class="pro-price"><span style="color: #fd3f31;font-size: 18px;">¥8.8</span></div>
                   <div class="pro-boss"><span><img src="./微信截图_20240617115948.png" alt="">遥遥零食小卖部</span></div>
                   <div class="pro-sale"><span style="font-size: 12px;">月销33</span></div>
                </a>
            </li>
            <li>
                <a href="">
                   <div class="pro-img"><img src="https://img.alicdn.com/imgextra/i2/2086030006/O1CN01s6CrAd1BunKEmxxpu_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt=""
                     style=" height: 200px; width: 194px;"></div>
                   <div class="pro-introduce"><span>内蒙古牛肉干特产零食手撕牛肉干五香原味牛肉粒香辣味休闲食品</span></div>
                   <div class="pro-price"><span style="color: #fd3f31;font-size: 18px;">¥8.8</span></div>
                   <div class="pro-boss"><span><img src="./微信截图_20240617115948.png" alt="">遥遥零食小卖部</span></div>
                   <div class="pro-sale"><span style="font-size: 12px;">月销33</span></div>
                </a>
            </li>
            <li>
                <a href="">
                   <div class="pro-img"><img src="https://img.alicdn.com/imgextra/i2/2086030006/O1CN01s6CrAd1BunKEmxxpu_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt=""
                     style=" height: 200px; width: 194px;"></div>
                   <div class="pro-introduce"><span>内蒙古牛肉干特产零食手撕牛肉干五香原味牛肉粒香辣味休闲食品</span></div>
                   <div class="pro-price"><span style="color: #fd3f31;font-size: 18px;">¥8.8</span></div>
                   <div class="pro-boss"><span><img src="./微信截图_20240617115948.png" alt="">遥遥零食小卖部</span></div>
                   <div class="pro-sale"><span style="font-size: 12px;">月销33</span></div>
                </a>
            </li>
            <li>
                <a href="">
                   <div class="pro-img"><img src="https://img.alicdn.com/imgextra/i2/2086030006/O1CN01s6CrAd1BunKEmxxpu_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt=""
                     style=" height: 200px; width: 194px;"></div>
                   <div class="pro-introduce"><span>内蒙古牛肉干特产零食手撕牛肉干五香原味牛肉粒香辣味休闲食品</span></div>
                   <div class="pro-price"><span style="color: #fd3f31;font-size: 18px;">¥8.8</span></div>
                   <div class="pro-boss"><span><img src="./微信截图_20240617115948.png" alt="">遥遥零食小卖部</span></div>
                   <div class="pro-sale"><span style="font-size: 12px;">月销33</span></div>
                </a>
            </li>
            <li>
                <a href="">
                   <div class="pro-img"><img src="https://img.alicdn.com/imgextra/i2/2086030006/O1CN01s6CrAd1BunKEmxxpu_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt=""
                     style=" height: 200px; width: 194px;"></div>
                   <div class="pro-introduce"><span>内蒙古牛肉干特产零食手撕牛肉干五香原味牛肉粒香辣味休闲食品</span></div>
                   <div class="pro-price"><span style="color: #fd3f31;font-size: 18px;">¥8.8</span></div>
                   <div class="pro-boss"><span><img src="./微信截图_20240617115948.png" alt="">遥遥零食小卖部</span></div>
                   <div class="pro-sale"><span style="font-size: 12px;">月销33</span></div>
                </a>
            </li> <li>
                <a href="">
                   <div class="pro-img"><img src="https://img.alicdn.com/imgextra/i2/2086030006/O1CN01s6CrAd1BunKEmxxpu_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt=""
                     style=" height: 200px; width: 194px;"></div>
                   <div class="pro-introduce"><span>内蒙古牛肉干特产零食手撕牛肉干五香原味牛肉粒香辣味休闲食品</span></div>
                   <div class="pro-price"><span style="color: #fd3f31;font-size: 18px;">¥8.8</span></div>
                   <div class="pro-boss"><span><img src="./微信截图_20240617115948.png" alt="">遥遥零食小卖部</span></div>
                   <div class="pro-sale"><span style="font-size: 12px;">月销33</span></div>
                </a>
            </li>
            <li>
                <a href="">
                   <div class="pro-img"><img src="https://img.alicdn.com/imgextra/i2/2086030006/O1CN01s6CrAd1BunKEmxxpu_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt=""
                     style=" height: 200px; width: 194px;"></div>
                   <div class="pro-introduce"><span>内蒙古牛肉干特产零食手撕牛肉干五香原味牛肉粒香辣味休闲食品</span></div>
                   <div class="pro-price"><span style="color: #fd3f31;font-size: 18px;">¥8.8</span></div>
                   <div class="pro-boss"><span><img src="./微信截图_20240617115948.png" alt="">遥遥零食小卖部</span></div>
                   <div class="pro-sale"><span style="font-size: 12px;">月销33</span></div>
                </a>
            </li>
            <li>
                <a href="">
                   <div class="pro-img"><img src="https://img.alicdn.com/imgextra/i2/2086030006/O1CN01s6CrAd1BunKEmxxpu_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt=""
                     style=" height: 200px; width: 194px;"></div>
                   <div class="pro-introduce"><span>内蒙古牛肉干特产零食手撕牛肉干五香原味牛肉粒香辣味休闲食品</span></div>
                   <div class="pro-price"><span style="color: #fd3f31;font-size: 18px;">¥8.8</span></div>
                   <div class="pro-boss"><span><img src="./微信截图_20240617115948.png" alt="">遥遥零食小卖部</span></div>
                   <div class="pro-sale"><span style="font-size: 12px;">月销33</span></div>
                </a>
            </li>
            <li>
              <a href="">
                 <div class="pro-img"><img src="https://img.alicdn.com/imgextra/i2/2086030006/O1CN01s6CrAd1BunKEmxxpu_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt=""
                   style=" height: 200px; width: 194px;"></div>
                 <div class="pro-introduce"><span>内蒙古牛肉干特产零食手撕牛肉干五香原味牛肉粒香辣味休闲食品</span></div>
                 <div class="pro-price"><span style="color: #fd3f31;font-size: 18px;">¥8.8</span></div>
                 <div class="pro-boss"><span><img src="./微信截图_20240617115948.png" alt="">遥遥零食小卖部</span></div>
                 <div class="pro-sale"><span style="font-size: 12px;">月销33</span></div>
              </a>
          </li>
          <li>
            <a href="">
               <div class="pro-img"><img src="https://img.alicdn.com/imgextra/i2/2086030006/O1CN01s6CrAd1BunKEmxxpu_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt=""
                 style=" height: 200px; width: 194px;"></div>
               <div class="pro-introduce"><span>内蒙古牛肉干特产零食手撕牛肉干五香原味牛肉粒香辣味休闲食品</span></div>
               <div class="pro-price"><span style="color: #fd3f31;font-size: 18px;">¥8.8</span></div>
               <div class="pro-boss"><span><img src="./微信截图_20240617115948.png" alt="">遥遥零食小卖部</span></div>
               <div class="pro-sale"><span style="font-size: 12px;">月销33</span></div>
            </a>
        </li>
        <li>
          <a href="">
             <div class="pro-img"><img src="https://img.alicdn.com/imgextra/i2/2086030006/O1CN01s6CrAd1BunKEmxxpu_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt=""
               style=" height: 200px; width: 194px;"></div>
             <div class="pro-introduce"><span>内蒙古牛肉干特产零食手撕牛肉干五香原味牛肉粒香辣味休闲食品</span></div>
             <div class="pro-price"><span style="color: #fd3f31;font-size: 18px;">¥8.8</span></div>
             <div class="pro-boss"><span><img src="./微信截图_20240617115948.png" alt="">遥遥零食小卖部</span></div>
             <div class="pro-sale"><span style="font-size: 12px;">月销33</span></div>
          </a>
      </li>
      <li>
        <a href="">
           <div class="pro-img"><img src="https://img.alicdn.com/imgextra/i2/2086030006/O1CN01s6CrAd1BunKEmxxpu_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt=""
             style=" height: 200px; width: 194px;"></div>
           <div class="pro-introduce"><span>内蒙古牛肉干特产零食手撕牛肉干五香原味牛肉粒香辣味休闲食品</span></div>
           <div class="pro-price"><span style="color: #fd3f31;font-size: 18px;">¥8.8</span></div>
           <div class="pro-boss"><span><img src="./微信截图_20240617115948.png" alt="">遥遥零食小卖部</span></div>
           <div class="pro-sale"><span style="font-size: 12px;">月销33</span></div>
        </a>
    </li>
           
        </ul>
    </div>
    
</body>
</html>

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值