第三次作业

最新推荐文章于 2024-08-08 22:07:51 发布
最新推荐文章于 2024-08-08 22:07:51 发布
阅读量110 收藏
点赞数 3
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2302_81617789/article/details/139837459
版权

1，首页

<!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>
        *{ margin: 0px;
            margin:auto;
           
        }

        body>div{
            /* border: 1px solid #fa3e19; */
            width: 1500px;
            height: 188px;
        }
        .fastlj{
            padding-top: 10px;
            height: 34px;
            /* margin: auto; */
            font-size: 14px;
        }
    
        a:hover{
            color: #fa3e19;
        }
        select{
            width: 78px;
            height: 25px;
        }
        .signin{
            color:#fa3e19;
        }
        .fastlj > div:not(.vacuum){
            /* float: left; */
            display: inline-block;
            width: 104px;
            height: 34px;
        }
        a{
            text-decoration: none;
            color: #070707;
        }

        .vacuum{
            width:156px;
            /* float: left; */
            display: inline-block;
            height: 14px;
            /* border: 1px solid red; */
        }

        .image{
            /* background-image: url("淘宝截屏.png"); */
            /* background-size:cover ; */
            margin-bottom: 10px;
            height: 60px;
            /* background-color:#fa3e19 ; */
            width: 100%;
            /* text-align: center; */
        }

        .seachar{
            padding-top: 20px;
            padding-bottom: 20px;
            height: 100px;
        }

      

        .img1{
            /* background-size: 190px 45px; */
            float: left;
            margin: 0ch;
        }

        .kuang{
            width: 43%;
            height: 102px;
          /* margin-top:32px; */
            /* position: relative; */
        }

        .seachar1{
            /* border: 2px solid #fa3e19; */
            border-radius: 8px;
            width: 523px ;
            height: 66px;
            margin-right: 108px;
            /* display: inline-block; */
        }
        .kjlj > div{
            display: inline-block;
            height: 66px;
        }
        .kjlj > div:hover{
            color: #fa3e19;
           margin-left: 15px;
        }

        .img2{
            /* float: right; */
            /* border: 1px solid red; */
            /* display:inline-block ; */
            float: right;
            position: relative;
            
        }

        .ss{
            
            width: 48px;
            height: 66px;
            float: right;
            border: white;
            /* display: inline-block; */
            background-color: #fa3e19;
        }

        .commodity{
            margin: 26px;
        }

        .commodity > div{
            float: left;
            /* border: #070707 1px solid; */
            border-radius:10px ;

       }

       .sort,.grcenter{
        width: 280px;
        height: 449px;
       text-align: center;
       }

       .middle{
        width: 910px;
        height: 449px;
        /* background: antiquewhite; */
       }
      .sort > li{
        float: left;
        width: 280px;
        height: 13px;
        font-size: 14px;
        margin-bottom: 3px;
        /* text-decoration: none; */
        list-style-type: none;
        padding-bottom: 15px;
      }
      .hl > li{
        float: left;
        list-style-type: none;
        width: 130px;
        height: 46px;
        text-align: center;
        /* border-right: 1px solid gray; */
       
      }
      .t{
        padding-bottom: 16px;
        margin-top: 10px;
      }
      .tm{
        color: #ff0036;
      }

      .xk > div{
        float: left;
        /* border: 1px slateblue solid; */
      }
    
      .xk1,.xk3{
        width: 198px;
        height: 393px;
        margin-right: 7px;
      }

      .xk2{
        width: 456px;
        height: 400px;
        margin-right: 12px;

      }

      .xk212 > div{
        float: left;
        /* border: 1px solid red; */
        width: 219px;
        height: 178px;
        margin-bottom: 10px
      }
      .xl > div{
    
        height: 134px;
        float: left;
        /* border: 1px solid pink; */
      }

      .xl2 > div{
        width:54px ;
        height: 35px;
      }
      .dx > div{
        height: 134px;
        float: left;
        /* border: 1px solid pink; */
      }
      .dx2{
        width:54px ;
        height: 35px;
      }

      .xk22 > div{
        float: left;
        
        /* border: 1px solid green; */
        width: 220px;
        height: 185px;
      }

      .img0 > div{
        /* border: 1px solid green; */
        float: left;
        width: 105px;
        height: 134px;
      }
     
      .tjh,.htb{
        display: inline-block;
        width: 50px;
        height: 15px;
        /* border: #070707 1px solid;  */
        margin: 7px;
        
      } 

      .htb{
        background-color: #fa3e19;
        font-size: 10px;
        color: aliceblue;
      }
      .rm > span{
        margin-left: 12px;
        font-size: 10px;
        background-color: #f09d8c;
        color: #dd3f20;
        
      }
      .rm  a{
        font-size: 10px;
      }
      .rm > div{
        display: inline-block;
        margin: 6px;
      }

      .wl{
        display: inline-block;
        margin: 2px;
      }
      .wl > img{
        width: 90px;
        height: 167px;
      }

      .sd{
        margin-top: 20px; 
        width: 250px;
        /* margin: auto; */
        height: 64px;
        
      }

      .x{
        /* float: left; */
        display: inline-block;
        width:68px;
        height: 60px;
        margin-right: 10px;
        /* position: fixed; */
      }
      .content{
        margin-bottom: 13px;
      }
      .ctt1{
        display: inline-block;
        width: 49px;
        height: 35px;
        font-size: 12px;
     }
     .brand{
        width: 250px;
        height: 180px;
        /* border: #1d10ca 2px solid; */
    }
    .pp{
        display: inline-block;
        width: 55px;
        height: 80px; 
        padding-top: 10px;
    }
    .pp img{
        width: 50px;
        height: 50px;    
    }
    .pp  div{
        font-size: 12px;
    }
    .brand1{
        /* border: 1px solid rebeccapurple; */
        width: 800px;
        height:250px;
    }
    .brand2{
        /* border: #070707 2px solid; */
        width: 1500px;
        height: 65px;
    }
    .pin{
        display: inline-block;
        /* border: #070707 1px solid; */
        width: 200px;
        height: 60px;
    }
    .pin1,.pin2:nth-child(1){
        display: inline-block;
       
        margin-bottom: 10px;
    }
    .pin21{
        font-size: 10px;

    }
    .pin:visited{
         color: #fa3e19;
    }

    .pin1 img{
        
        width: 48px;
        height: 48px;
    }
    .pin > div{
        display: inline-block;
    }
    .libiao{
        /* border: #070707 1px  solid; */
        width: 1550px;
        height: auto;
    }
    .item{
        display: inline-block;
    }
    .item1{
        width: 290px;
        height: 320px;
        display: inline-block;
        /* border: #070707 1px solid; */
        margin-top: 10px;
        margin-left: 10px;
        text-align: center;
        border-radius: 10px;
    }

    .item2{
        /* border: #070707 1px solid; */
        width: 235px;
        height: 100px;
        border-radius:10px ;
    }   

    .item3,.item42{

        font-size: 10px;
        /* border: #070707 1px solid; */
    }
    .item4{
        width: 235px;
        height: 45px;
        /* border: #070707 1px solid; */
        margin-top: 23px;
        
    }
    .item4 > div{
        /* border: #070707 1px solid; */
        display: inline-block;
        margin-right: 23px;
    }
    </style>
</head>
<body>
    <div class="fastlj">
        <div class="lj1">
                <select style="border: white;" name="">
            <option value="">中国大陆</option>
            <option value="">中国台湾</option>
            <option value="">巴基斯坦</option>
                </select> 
        </div>
        <div class="signin"><a href="" style="color: #fa3e19;">亲，请登录</a></div>
        <div class="signup"><a href="">免费注册</a></div>
        <div class="phonetb"><a href="">手机逛淘宝</a></div>
        <div class="url"><a href="">网页无障碍</a></div>
        <div class="vacuum"></div>
        <div class="mytb"><select style="border: white;" name="" id="">
            <option value="">我的淘宝</option>
            <option value="">已买到的宝贝</option>
            <option value="">我的足迹</option>
        </select></div>
        <div class="shoppingcar"><a href="">购物车</a></div>
        <div class="collection"><a href="">收藏夹</a></div>
        <div class="shoppingsort"><a href="">商品分类</a></div>
        <div class="freeshop"><select style="border: white;" name="" id="">
            <option value="">免费开店</option>
            <option value="">对公支付</option>
        </select></div>
        <div class="saleperson">|<a href="">千牛卖家中心</a></div>
        <div class="help" style="margin-left: 18px;"><a href="">帮助中心</a></div>
    </div>
    <div class="image">
        <img src="./淘宝.png" width="100%" height="60px">
    </div>
    <div class="seachar"style="background: #f3f6f8;">
        <div class="img1"><a href="">
            <img src="https://gw.alicdn.com/imgextra/i4/O1CN01H11jUw1gVppn3YjsM_!!6000000004148-2-tps-480-144.png" width="240px"></a>
        </div>
        <div class="kuang">
            <div class="seachar1"><select style="height: 66px;border: white; font-size: 23px;" name="">
                <option value="">宝贝</option>
                <option value="">天猫</option>
                <option value="">店铺</option>
            </select>|平衡车 
            <button class="ss" type="submit">搜索</button>
            </div>
            <div class="kjlj">
                <div style="color: #fa3e19;">大额神卷</div>
                <div>苹果惊喜券</div>
                <div>0.1元抢粽子</div>
                <div>家电爆款</div>
                <div>3c数码优惠</div>
                <div>美味狂欢</div>
                <div>女装</div>
            </div>
        </div>
            <!-- <div class="img2"><a href=""> <img src="https://gw.alicdn.com/imgextra/i1/O1CN01zPQ3cI1ZW6lIk3apB_!!6000000003201-2-tps-480-144.png"></a></div> -->
    </div>
    <div class="commodity">
        <div class="sort"  style="background: #f3f6f8;">
            <div class="t"><span>分类</span></div>
            <li><img src="" alt=""><a href="">电脑</a>/ &nbsp;<a href=""> &nbsp;办公</a>/ &nbsp;<a href="">文具</a></li>
            <li><a href=""> 工业品&nbsp;</a>/ &nbsp;<a href=""> &nbsp;商业</a>/ &nbsp;<a href="">&nbsp;定制</a></li>
            <li><a href=""> 家电&nbsp;</a>/ &nbsp;<a href=""> &nbsp;手机</a>/ &nbsp;<a href="">&nbsp;数码</a></li>
            <li><a href=""> 家具&nbsp;</a>/ &nbsp;<a href=""> &nbsp;家装</a>/ &nbsp;<a href="">&nbsp;家居</a></li>
            <li><a href=""> 女装&nbsp;</a>/ &nbsp;<a href=""> &nbsp;男装</a>/ &nbsp;<a href="">&nbsp;内衣</a></li>
            <li><a href=""> 女鞋&nbsp;</a>/ &nbsp;<a href=""> &nbsp;男鞋</a>/ &nbsp;<a href="">&nbsp;运动</a></li>
            <li><a href=""> 汽车&nbsp;</a>/ &nbsp;<a href=""> &nbsp;珠宝</a>/ &nbsp;<a href="">&nbsp;箱包</a></li>
            <li><a href=""> 食品&nbsp;</a>/ &nbsp;<a href=""> &nbsp;生鲜</a>/ &nbsp;<a href="">&nbsp;健康</a></li>
            <li><a href=""> 母婴&nbsp;</a>/ &nbsp;<a href=""> &nbsp;童装</a>/ &nbsp;<a href="">&nbsp;潮玩</a></li>
            <li><a href=""> 美妆&nbsp;</a>/ &nbsp;<a href=""> &nbsp;洗护</a>/ &nbsp;<a href="">&nbsp;宠物</a></li>
            <li><a href=""> 娱乐&nbsp;</a>/ &nbsp;<a href=""> &nbsp;图书</a>/ &nbsp;<a href="">&nbsp;鲜花</a></li>
        </div>
        <div class="middle">
            <div class="hl"  style="background: #f3f6f8;">             
                <li ><a href="" class="tm">天猫</a></li>                
                <li><a href="" class="tm">淘宝直播</a></li>                
                <li ><a href="" class="tm">1688严选</a></li>                
                <li><a href="" class="tm" >司法拍卖</a></li>                
                <li><a href="" class="tm" style="color: aquamarine;" >天猫超市</a></li>                
                <li><a href="" class="tm" style="color: #070707;">聚划算</a></li>                
                <li><a href="" class="tm" style="color: #070707;">飞猪旅行</a></li>                
            </div>
            <div class="xk"  style="background: #f3f6f8;">
                <div class="xk1" ><img src="https://gw.alicdn.com/imgextra/i2/O1CN01lFqrRX1rCYwyS1dQc_!!6000000005595-2-tps-480-672.png" width="189px" height="394px"></div>
                <div class="xk2" >
                    <div class="xk21"  style="background: #f3f6f8;">
                        <div class="xk211" style="height: 23px; " >百亿补贴'正品低价</div>
                        <div class="xk212" >
                            <div class="xl">
                                <div class="xl1" ><img src="https://img.alicdn.com/bao/upload/O1CN01pgXuz41GbcnomtudJ_!!6000000000641-0-yinhe.jpg" width="132px" height="130px"></div>
                                <div class="xl2">
                                    <div class="wz" style="font-size: 12px;">韩版ins网红高弹力组合套装头绳韩版...</div>
                                </div>  
                                <div class="qian" style="height: 5px;  margin-top: 10px; margin-left: 25px;">¥5.99</div>
                            </div>
                            <div class="dx">
                                <div class="dx1"><img src="https://img.alicdn.com/bao/upload/O1CN01cYFEn21DVGRPndqtJ_!!6000000000221-0-yinhe.jpg" width="132px" height="130px"></div>
                                <div class="dx2">
                                    <div class="wz" style="font-size: 12px;">猫爸爸的厨房泡芙猫粮及遛狗... </div>
                                </div>
                                <div class="qian" style="height: 5px; margin-top: 10px; margin-left: 25px;">¥60.0</div>
                            </div>
                        </div>
                    </div>
                    <div class="xk22">
                        <div class="xk221">
                            <div >淘宝工厂</div>
                            <div class="img0"> 
                                <div class="img1" style="font-size: 13px;"><img src="https://img.alicdn.com/bao/upload/O1CN01DzeOYf1MZgjN32zCH_!!6000000001449-2-yinhe.png" width="98px" height="145px">￥89</div>
                                <div class="img2" style="font-size: 13px;"><img src="https://img.alicdn.com/bao/upload/O1CN01JVOAju1y2D7gYGvlK_!!6000000006520-2-yinhe.png" width="98px" height="145px">￥56</div>
                            </div>
                        </div>
                        <div class="xk222">
                            <div>珠宝首饰</div>
                            <div class="img0">
                                <div class="img1" style="font-size: 13px;"><img src="https://img.alicdn.com/bao/upload/O1CN01wnbOkz1ZR4Jd9ju28_!!6000000003190-2-yinhe.png"width="98px" height="145px">￥256</div>
                                <div class="img2" style="font-size: 13px;"><img src="https://img.alicdn.com/bao/upload/O1CN01xTZDcb265tMsHEIOZ_!!6000000007611-2-yinhe.png"width="98px" height="145px">￥8.9</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="xk3" >
                    <div class="xk31"style="background: rgb(255, 241, 235);border-radius: 10px;">                        
                        <div ><div class="tjh"><b>淘江湖</b></div>
                        <div class="htb">话题榜</div>
                            <div class="rm">
                                <span>热门</span><div class="rm1"><a href="">致taobao.com用户的一封信..</a></div>
                                <span>热门</span><div class="rm1"><a href="">“禁止焦绿”火了！3分钟带你...</a></div>
                                <span>热门</span><div class="rm1"><a href="">马老板20年前发帖的时候你...</a></div>
                                <span>热门</span><div class="rm1"><a href="">又被惊喜到了，这1件的商品，...</a></div>                        
                            </div>
                        </div>
                    </div>
                    <div class="xk32">
                        <div>
                           <div class="tbzb" style="margin: 12px;">淘宝直播</div>
                            <div>
                                <div class="wl"><img src="https://gw.alicdn.com/tfscom/i1/O1CN01QUpt7c1j0BJfi5BQF_!!0-dgshop.jpg"></div>
                                <div class="wl"><img src="https://gw.alicdn.com/tfscom/i1/O1CN013r5Jhr1OFCNBFd7tK_!!0-dgshop.jpg" alt=""></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="grcenter">
            <div style="width: 240px; height:89px ; " ><img src="https://wwc.alicdn.com/avatar/getAvatar.do?userNick=&width=60&height=60&type=sns&_input_charset=UTF-8" style="padding: 12px;"></div>
            <span>下午好</span>
            <div class="sd"  style="background: #f3f6f8;">
                <a href="" class="x" style="background: #FF6408; border-radius: 10px;">登录</a>
                <a href="" class="x" style="background: #FEB306; border-radius: 10px;">注册</a>
                <a href="" class="x" style="background: #F4F6F8; border-radius: 10px;">开店</a>
            </div>
            <div class="content"  style="background: #f3f6f8;">
                <div class="ctt1"><a href=""><p>宝贝收藏</p></a></div>
                <div class="ctt1"><a href=""><p>买过的店</p></a></div>
                <div class="ctt1"><a href=""><p>收藏的店</p></a></div>
                <div class="ctt1"><a href=""><p>我的足迹</p></a></div>
            </div>
            <div class="brand"  style="background: #f3f6f8;">
                <a href="" class="pp"><img src="https://gw.alicdn.com/imgextra/i1/O1CN01nTz9d01PAuH2K5Ifh_!!6000000001801-2-tps-128-128.png"><div>云养熊猫</div></a>
                <a href="" class="pp"><img src="https://gw.alicdn.com/imgextra/i2/O1CN01nb35qq1elkMpL4lGP_!!6000000003912-2-tps-128-128.png"><div>1688</div></a>
                <a href="" class="pp"><img src="https://gw.alicdn.com/imgextra/i2/O1CN01qcMRwH1q2CMpLLOu5_!!6000000005437-2-tps-128-128.png"><div>裹裹快寄</div></a>
                <a href="" class="pp"><img src="https://gw.alicdn.com/imgextra/i4/O1CN01AZVESe20L6sXJXvyB_!!6000000006832-2-tps-128-128.png"><div>书旗小说</div></a>
                <a href="" class="pp"><img src="https://gw.alicdn.com/imgextra/i2/O1CN01wG8KW31IGDYZJbMgy_!!6000000000865-2-tps-128-128.png"><div>云游戏</div></a>
                <a href="" class="pp"><img src="https://gw.alicdn.com/imgextra/i3/O1CN01l6t3Jm1OlG5jE88tQ_!!6000000001745-2-tps-128-128.png"><div>飞猪旅行</div></a>
                <a href="" class="pp"><img src="https://gw.alicdn.com/imgextra/i4/O1CN01W5Ex9W1nOEa9F1COW_!!6000000005079-2-tps-128-128.png"><div>阿里资产</div></a>
                <a href="" class="pp"><img src="https://gw.alicdn.com/imgextra/i1/O1CN01ON7aSS26hRtJ2ZJcR_!!6000000007693-2-tps-128-128.png"><div>优酷视频</div></a>
            </div>
        </div>
    </div>
    <div class="brand1"></div>
    <div class="brand2"  style="background: #f3f6f8;">
       <div class="pin">
            <div class="pin1"><img src="https://gw.alicdn.com/imgextra/i2/O1CN011E0R1J23w9lJDeJXk_!!6000000007319-2-tps-192-192.png" ></div>
            <div class="pin2">
                <a href="">
                    <div>猜你喜欢</div>
                    <div class="pin21">精选好物推荐</div>
                </a>
            </div> 
        </div>
       <div class="pin">
                <div class="pin1"><img src="https://img.alicdn.com/imgextra/i4/O1CN01O363PQ23L3gUtAlg5_!!6000000007238-2-tps-192-192.png" ></div>
            <div class="pin2">
                <a href="">
                    <div>潮店数码</div>
                    <div class="pin21">疯抢8.5折起</div>
                </a>
            </div>
        </div>
        <div class="pin">
            <div class="pin1"><img src="https://img.alicdn.com/imgextra/i3/O1CN01wCKde31iiJrvWtIbb_!!6000000004446-2-tps-192-192.png" ></div>
            <div class="pin2">
                <a href="">
                    <div>服饰时尚</div>
                    <div class="pin21">大牌直降</div>
                </a>
            </div>
        </div>
        <div class="pin">
            <div class="pin1"><img src="https://gw.alicdn.com/imgextra/i4/O1CN01HcFWbP25zTrvtEkbS_!!6000000007597-2-tps-192-192.png" ></div>
            <div class="pin2">
                <a href="">
                    <div>运动户外</div>
                    <div class="pin21">满300减50</div>
                </a>
            </div>
        </div>
        <div class="pin">
            <div class="pin1"><img src="https://img.alicdn.com/imgextra/i1/O1CN01OrnNZw1QLjFUWKGmc_!!6000000001960-2-tps-192-192.png" ></div>
            <div class="pin2">
                <a href="">
                    <div>精致护理</div>
                    <div class="pin21">买一享十</div>
                </a>
            </div>
        </div>
        <div class="pin">
            <div class="pin1"><img src="https://img.alicdn.com/imgextra/i3/O1CN01LTDjKk29LPgYe0Mmb_!!6000000008051-2-tps-192-192.png" ></div>
            <div class="pin2">
                <a href="">
                    <div>家享生活</div>
                    <div class="pin21">大牌不止5H者</div>
                </a>
            </div>
        </div>
        <div class="pin">
            <div class="pin1"><img src="https://img.alicdn.com/imgextra/i3/O1CN01LLu9731XNHuK080yf_!!6000000002911-2-tps-192-192.png" ></div>
            <div class="pin2">
                <a href="">
                    <div>食品生鲜</div>
                    <div class="pin21">满300减50</div>
                </a>
            </div>
        </div>
      
    </div>
    <div class="libiao">
        <a href="" class="item">
            <div>
                <div class="item1">
                    <img src="./download.avif" style="width: 265px; height: 190px;margin-top: 10px;">
                    <div class="item2">
                        <div class="item3">威浦航空插头WP20-2芯3芯4芯5-7-9-12芯公母接头WEIPU连接器TO+Z</div>
                        <div class="item4">
                            <div class="item41">￥27.43</div>
                            <div class="item42">已经有25人购买</div>
                        </div>
                    </div>
                </div>
               
            </div>
        </a>
        <a href="" class="item">
            <div>
                <div class="item1">
                    <img src="./download.avif" style="width: 265px; height: 190px;margin-top: 10px;">
                    <div class="item2">
                        <div class="item3">威浦航空插头WP20-2芯3芯4芯5-7-9-12芯公母接头WEIPU连接器TO+Z</div>
                        <div class="item4">
                            <div class="item41">￥27.43</div>
                            <div class="item42">已经有25人购买</div>
                        </div>
                    </div>
                </div>
               
            </div>
        </a>
        <a href="" class="item">
            <div>
                <div class="item1">
                    <img src="./download.avif" style="width: 265px; height: 190px;margin-top: 10px;">
                    <div class="item2">
                        <div class="item3">威浦航空插头WP20-2芯3芯4芯5-7-9-12芯公母接头WEIPU连接器TO+Z</div>
                        <div class="item4">
                            <div class="item41">￥27.43</div>
                            <div class="item42">已经有25人购买</div>
                        </div>
                    </div>
                </div>
               
            </div>
        </a>
        <a href="" class="item">
            <div>
                <div class="item1">
                    <img src="./download.avif" style="width: 265px; height: 190px;margin-top: 10px;">
                    <div class="item2">
                        <div class="item3">威浦航空插头WP20-2芯3芯4芯5-7-9-12芯公母接头WEIPU连接器TO+Z</div>
                        <div class="item4">
                            <div class="item41">￥27.43</div>
                            <div class="item42">已经有25人购买</div>
                        </div>
                    </div>
                </div>
               
            </div>
        </a>
        <a href="" class="item">
            <div>
                <div class="item1">
                    <img src="./download.avif" style="width: 265px; height: 190px;margin-top: 10px;">
                    <div class="item2">
                        <div class="item3">威浦航空插头WP20-2芯3芯4芯5-7-9-12芯公母接头WEIPU连接器TO+Z</div>
                        <div class="item4">
                            <div class="item41">￥27.43</div>
                            <div class="item42">已经有25人购买</div>
                        </div>
                    </div>
                </div>
               
            </div>
        </a>
        <a href="" class="item">
            <div>
                <div class="item1">
                    <img src="./download.avif" style="width: 265px; height: 190px;margin-top: 10px;">
                    <div class="item2">
                        <div class="item3">威浦航空插头WP20-2芯3芯4芯5-7-9-12芯公母接头WEIPU连接器TO+Z</div>
                        <div class="item4">
                            <div class="item41">￥27.43</div>
                            <div class="item42">已经有25人购买</div>
                        </div>
                    </div>
                </div>
               
            </div>
        </a>
        <a href="" class="item">
            <div>
                <div class="item1">
                    <img src="./download.avif" style="width: 265px; height: 190px;margin-top: 10px;">
                    <div class="item2">
                        <div class="item3">威浦航空插头WP20-2芯3芯4芯5-7-9-12芯公母接头WEIPU连接器TO+Z</div>
                        <div class="item4">
                            <div class="item41">￥27.43</div>
                            <div class="item42">已经有25人购买</div>
                        </div>
                    </div>
                </div>
               
            </div>
        </a>
        <a href="" class="item">
            <div>
                <div class="item1">
                    <img src="./download.avif" style="width: 265px; height: 190px;margin-top: 10px;">
                    <div class="item2">
                        <div class="item3">威浦航空插头WP20-2芯3芯4芯5-7-9-12芯公母接头WEIPU连接器TO+Z</div>
                        <div class="item4">
                            <div class="item41">￥27.43</div>
                            <div class="item42">已经有25人购买</div>
                        </div>
                    </div>
                </div>
               
            </div>
        </a>
        <a href="" class="item">
            <div>
                <div class="item1">
                    <img src="./download.avif" style="width: 265px; height: 190px;margin-top: 10px;">
                    <div class="item2">
                        <div class="item3">威浦航空插头WP20-2芯3芯4芯5-7-9-12芯公母接头WEIPU连接器TO+Z</div>
                        <div class="item4">
                            <div class="item41">￥27.43</div>
                            <div class="item42">已经有25人购买</div>
                        </div>
                    </div>
                </div>
               
            </div>
        </a>
        <a href="" class="item">
            <div>
                <div class="item1">
                    <img src="./download.avif" style="width: 265px; height: 190px;margin-top: 10px;">
                    <div class="item2">
                        <div class="item3">威浦航空插头WP20-2芯3芯4芯5-7-9-12芯公母接头WEIPU连接器TO+Z</div>
                        <div class="item4">
                            <div class="item41">￥27.43</div>
                            <div class="item42">已经有25人购买</div>
                        </div>
                    </div>
                </div>
               
            </div>
        </a>
       
    </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>登录界面</title>
    <style>
        *{
            margin: 0px;

        }
        .page{
            background-color: #f0eff2;
            width: auto;
            height: 870px;
            position: relative;
        }
      
        .logo{
            width: auto;
            height: 140px;
            /* border: #5500ff 1px solid; */
        }
        .logo  img {
           width: 67px;
           height: 63px;
           margin-top: 67px; 
           margin-left: 78px;
        }
        .logo span{
           float: right;
            width: 115px;
            height: 34px;
            font-size: 12px;
            margin-top: 45px;
            color:rgb(36, 28, 28);
        }
        .body{
            /* border: 1px solid red; */
            width: 884px;
            height: 556px;
            position: absolute;
            top:50%;
            left:50%;
            background-color: #fff;
            transform:translate(-50%,-50%);
            /* margin-top: 10px; */
            /* margin-left: 336px; */
        }
        .main,.main1{
            text-align: center;
            height: 556px;
            /* border: #100e14 1px solid; */
            /* display: inline-block; */
            float: left;
        }
       
        .main{
            width: 498px;
        }
        .main1{
            width: 367px;
            margin-left: 10px;
        }
        .top{
            margin-top: 20px;
        }
        .ma,.dx{
            display: inline-block;
            font-size: 35px;

        }
        .ma{
            border-right: #100e14 0.4px solid;
        }
        input{
            width: 480px;
            height: 50px;
            margin-top: 45px;
            border-radius: 10px;
            box-shadow: 1px 0.1px 1px;
            border: 0px;
            background-color: #f0eff2;
        }
        .lj1{
            display: inline-block;
        }
        a{
            text-decoration: none;
            color: #050404;
        }

        h1{
            margin-top: 20px;
            margin-bottom: 50px;
        }
    </style>
</head>
<body>
    <div class="page">
        <!-- 顶部logo -->
        <div class="logo"><h1><a href=""><img src="data:image/png;base64,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">
        </a><span>网站无障碍 <br> "登陆页面"改进建议</span></h1></div>
        <!-- 验证方式 -->
        <div class="body">
           <div class="main">
                <div class="top">
                        <div class="ma">密码登陆</div>
                        <div class="dx">短信登陆</div>
                </div>
                <div class="username"><input type="text" value="账号名/邮箱/手机号" required></div>
                <div class="password"><input type="text" value="请输入登录密码" required></div>
                <div class="signin"><input type="submit" value="登录" style="background: #ff6200; color: #fff;"></div> 
                <div class="lj">
                    <div class="lj1"><img src=""><a href="">支付宝登录</a></div>
                    <div class="lj1"><img src=""><a href="">钉钉登录</a></div>
                <div class="lj2" style="margin-top: 10px;">
                        <div class="lj1"><a href="">免费注册</a></div>
                        <div class="lj1"><a href="">忘记账号名</a></div>
                        <div class="lj1"><a href="">忘记密码</a></div>
                </div>
                </div>
            </div>
            <!--登录 扫码 -->
            <div class="main1">
                <h1>手机扫描安全登录</h1>
                <div><img src="./dc841fbb59ff0603c753dd9e06f9fc6.png"></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>Document</title>
    <style>
                *{ margin: 0px;
            margin:auto;
           
        }

        body>div{
            /* border: 1px solid #fa3e19; */
            width: 1500px;
            height: 188px;
        }
        .fastlj{
            padding-top: 10px;
            height: 34px;
            /* margin: auto; */
            font-size: 14px;
        }
    
        a:hover{
            color: #fa3e19;
        }
        select{
            width: 78px;
            height: 25px;
        }
        .signin{
            color:#fa3e19;
        }
        .fastlj > div:not(.vacuum){
            /* float: left; */
            display: inline-block;
            width: 104px;
            height: 34px;
        }
        a{
            text-decoration: none;
            color: #070707;
        }
        .vacuum{
            width:156px;
            /* float: left; */
            display: inline-block;
            height: 14px;
            /* border: 1px solid red; */
        }
        .item{
        display: inline-block;
    }
    .item1{
        width: 290px;
        height: 320px;
        display: inline-block;
        /* border: #070707 1px solid; */
        margin-top: 10px;
        margin-left: 10px;
        text-align: center;
        border-radius: 10px;
    }

    .item2{
        /* border: #070707 1px solid; */
        width: 235px;
        height: 100px;
        border-radius:10px ;
    }   

    .item3,.item42{

        font-size: 10px;
        /* border: #070707 1px solid; */
    }
    .item4{
        width: 235px;
        height: 45px;
        /* border: #070707 1px solid; */
        margin-top: 23px;
        
    }
    .item4 > div{
        /* border: #070707 1px solid; */
        display: inline-block;
        margin-right: 23px;
    }
    </style>
</head>
<body>
    <div class="fastlj">
        <div class="lj1">
                <select style="border: white;" name="">
            <option value="">中国大陆</option>
            <option value="">中国台湾</option>
            <option value="">巴基斯坦</option>
                </select> 
        </div>
        <div class="signin"><a href="" style="color: #fa3e19;">亲，请登录</a></div>
        <div class="signup"><a href="">免费注册</a></div>
        <div class="phonetb"><a href="">手机逛淘宝</a></div>
        <div class="url"><a href="">网页无障碍</a></div>
        <div class="vacuum"></div>
        <div class="mytb"><select style="border: white;" name="" id="">
            <option value="">我的淘宝</option>
            <option value="">已买到的宝贝</option>
            <option value="">我的足迹</option>
        </select></div>
        <div class="shoppingcar"><a href="">购物车</a></div>
        <div class="collection"><a href="">收藏夹</a></div>
        <div class="shoppingsort"><a href="">商品分类</a></div>
        <div class="freeshop"><select style="border: white;" name="" id="">
            <option value="">免费开店</option>
            <option value="">对公支付</option>
        </select></div>
        <div class="saleperson">|<a href="">千牛卖家中心</a></div>
        <div class="help" style="margin-left: 18px;"><a href="">帮助中心</a></div>
    </div>
    <div class="body">
        <a href="" class="item">
            <div>
                <div class="item1">
                    <img src="./download.avif" style="width: 265px; height: 190px;margin-top: 10px;">
                    <div class="item2">
                        <div class="item3">威浦航空插头WP20-2芯3芯4芯5-7-9-12芯公母接头WEIPU连接器TO+Z</div>
                        <div class="item4">
                            <div class="item41">￥27.43</div>
                            <div class="item42">已经有25人购买</div>
                        </div>
                    </div>
                </div>
               
            </div>
        </a>
        <a href="" class="item">
            <div>
                <div class="item1">
                    <img src="./download.avif" style="width: 265px; height: 190px;margin-top: 10px;">
                    <div class="item2">
                        <div class="item3">威浦航空插头WP20-2芯3芯4芯5-7-9-12芯公母接头WEIPU连接器TO+Z</div>
                        <div class="item4">
                            <div class="item41">￥27.43</div>
                            <div class="item42">已经有25人购买</div>
                        </div>
                    </div>
                </div>
               
            </div>
        </a>
        <a href="" class="item">
            <div>
                <div class="item1">
                    <img src="./download.avif" style="width: 265px; height: 190px;margin-top: 10px;">
                    <div class="item2">
                        <div class="item3">威浦航空插头WP20-2芯3芯4芯5-7-9-12芯公母接头WEIPU连接器TO+Z</div>
                        <div class="item4">
                            <div class="item41">￥27.43</div>
                            <div class="item42">已经有25人购买</div>
                        </div>
                    </div>
                </div> 
            </div>
        </a>
        <a href="" class="item">
            <div>
                <div class="item1">
                    <img src="./download.avif" style="width: 265px; height: 190px;margin-top: 10px;">
                    <div class="item2">
                        <div class="item3">威浦航空插头WP20-2芯3芯4芯5-7-9-12芯公母接头WEIPU连接器TO+Z</div>
                        <div class="item4">
                            <div class="item41">￥27.43</div>
                            <div class="item42">已经有25人购买</div>
                        </div>
                    </div>
                </div> 
            </div>
        </a>
        
    </div>
</body>
</html>

 4，盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
    <!-- 
        padding 内边距 是内容与边框的距离
        margin 外边距 是边框外的间隔
        border 边框 边 
        border-radius 边框的
        border-width : medium | thin | thick | length
                    medium : 默认值。默认宽度
                    thin : 小于默认宽度
                    thick : 大于默认宽度
                    length : 由浮点数字和单位标识符组成的长度值。不可为负值。

            {padding margin border 一致}

            设置一个值 表示 上下左右边框
            设置两个值 表示 上下 左右边框
            设置两个值 表示 上  左右  下边框
            设置四个值 表示 上 下 左 右 边框
            
            
            border solid表示实线 dashed表示虚线 dotted表示点 double表示双实线


    -->
    <style>

        /* 表示默认去除盒子的内外边距 将边距从0开始计算 */
        *{
            margin: 0px;
            padding: 0px;
        }
        /* margin外边距 盒子进行移动 */
        /* 默认width，height是图片大小 */
        .box{
            width: 100px;
            height: 200px;
            background-color: #bb1818;
            border:  solid pink;
            border-width: thin;
             
        }

        .box:hover{
            margin: 30px;
        }

        .box1{
            width: 50px;
            height: 100px;
            background-color: #0d5e90;
            padding: 10px;
        }
        /*
         margin给负值会向相反方向移动
         padding赋负值会向上走
        */
        .nn{
            /* margin: -90px; */
            padding-left: -89px;
            background-color: #24c239;
        }
        /* 通过display实现行内元素和块级元素的相互转换 */
        /* .b_l{
            border: 1px dashed rebeccapurple;
             保留块级元素的性质 
            display: inline-block;
             设置宽高 
            width: 100px;
            height: 100px;
        }
        .l{
            border: #0d5e90 1px solid;
            width: 100px;
            height: 100px;
        } */

        /* 
        通过浮动将盒子进行行内元素和块级元素的相互转换 
        但却无法使浮动过的盒子居中
        */
        body > div{
           margin: auto;
        }
        
        .b_l{
            float: left;
            width: 100px;
            height: 100px;
            border: #0d5e90 1px dashed;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
    </div>
    <div class="nn">负的</div>
    <div class="b_l"></div>
    <div class="b_l"></div>
    <div class="b_l"></div>
    <div class="l"></div>
</body>
</html>

劣酒82
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
国科大数据挖掘刘莹第三次作业
01-13
国科大数据挖掘刘莹第三次作业
数据库第三次作业.pdf
05-11
国科大数据库作业3详细过程以及完整答案，没有学过数据库的可以来看
HCIA第三次作业.topo
04-26
HCIA第三次作业.topo
第三次作业已完成！哈哈哈
04-26
【标题】：“第三次作业已完成！哈哈哈” 在信息技术领域，完成作业或项目往往是学习过程中的重要环节，特别是对于编程和实验性的课程来说。这里的“第三次作业”可能指的是一个学生或者团队在学习过程中面临的某个...
江苏开放大学形成性考核作业建筑材料第三次作业.pdf
03-05
江苏开放大学形成性考核作业建筑材料第三次作业.pdf 该资源是江苏开放大学的一份形成性考核作业，主题是建筑材料。该作业共有两部分，第一部分是是非题，第二部分是单项选择题。 在是非题部分，共有10道题，涵盖了...
JavaWeb基础1：HTML/CSS/JS/HTTP
m0_53842576的博客
08-05 468
JavaWeb基础1：HTML/CSS/JS/HTTP (qq.com)
4个自定义倒计时
lulei5153的博客
08-03 353
【代码】4个自定义倒计时。
CSS实现元素hover时背景色拉伸渐变
p_s_p的博客
08-05 981
【代码】CSS实现元素hover时背景色拉伸渐变。
HTML&CSS
m0_73620971的博客
08-05 1130
1、 是一个单标签。2、img 标签必须具有 src 属性，a 标签必须具有 href 属性。3、input 标签中必须指明 type 属性，其中提交按钮必须放至 form 标签内。4、类选择器前缀为 "."，ID选择器前缀为 "#"。
CSS学习 02 利用鼠标悬停制造按钮边框的渐变方向变化
weixin_57266891的博客
08-05 289
的按钮元素，按钮类型为。
html制作卡通图案代码,使用HTML和CSS3绘制基本卡通图案的示例分享
爱敲代码的卡拉米的博客
08-03 617
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
前端HTML总结
m0_54066656的博客
08-05 913
前端笔记，HTML标签详解。
HTML-09.表单项标签
程小白的博客
08-05 359
【代码】HTML-09.表单项标签。
前端面试宝典【HTML篇】【5】
BDawn的专栏
08-05 100
form标签用于定义 HTML 表单，它用于收集用户输入的数据。而input 标签则是表单中最常用的元素之一，用于创建各种类型的输入控件。 template 标签是 HTML5 中引入的一个新元素，用于定义文档中的不可见模板。这些模板可以被脚本动态地克隆并插入到文档的可见部分中，从而实现动态内容的快速构建。
PySide6||QPushButton的QSS样式
最新发布
m0_56230886的博客
08-08 291
【代码】PySide6||QPushButton的QSS样式。
NET语言程序设计课件-第2章 Visual C#.NET语法基础.ppt
08-08
Visual C# .NET是一门面向对象的程序设计语言，是当前流行的.NET系列的语言。 本课程以Visual Studio为程序设计环境，对C#进行了全面阐述。 本电子课件适用于课程讲解或者课程分析参考使用。
[毕业设计]PHP图书借阅与归还管理系统(源代码+论文).zip
08-08
[毕业设计]PHP图书借阅与归还管理系统(源代码+论文)
ssm_012_mysql宝康药房销售管理系统.zip
08-08
随着我国市场经济的蓬勃发展和人们对医药产品需求的迅速增加，医药销售行业正处于一个高速发展的时期。行业的快速发展必然导致竞争的加剧，面对药品销售业日益严酷的竟争现实，加强管理、提高工作效率和改善服务质量成了急待解决的问题。而解决这些问题的关键措施之一就是利用计算机等现代信息技术，建立实用、先进、高效的药房销售管理系统，引进创新的经营机制，实现药品销售过程的全面信息化管理，以适应企业生存和发展的新形势。因此，开发一个宝康药房销售管理系统是十分必要的。 根据需求，确定系统采用JSP技术，SSM框架，JAVA作为编程语言，MySQL作为数据库。整个系统要操作方便、易于维护、灵活实用。主要实现了频道维护、新闻维护、药品维护、订单维护、系统管理等功能。
excel基本操作.pptx
08-08
excel基本操作.pptx
合工大java第三次作业
10-21
合工大Java第三次作业包括两个部分，第一部分是关于Java程序图形界面的开发，包括引入哪些包、布局管理器的作用、Frame类和Panel类的默认布局器、FlowLayout布局方式的特点、事件的概念和处理事件的机制等内容。第二部分是编写一个Java程序，创建一个窗体，并实现交互，包括在窗体内单击鼠标左键绘制一个绿圆、单击鼠标右键绘制一个红色方框、双击鼠标左键清空所有已画圆和方的功能。作业要求在3月27日之前提交，命名方式为学号+姓名+作业3。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值