web 手机淘宝

最新推荐文章于 2024-08-20 17:58:42 发布

Happy-Dog

最新推荐文章于 2024-08-20 17:58:42 发布

阅读量233

点赞数

本文链接：https://blog.youkuaiyun.com/ababychicken/article/details/103662808

版权

<!doctype html>
<html lang="zh">
   <head>
       <meta charset="utf-8">
       <title>无标题文档</title>
       <style type="text/css">
           .Navbar {
               background-color: red;
               height: 250px;
               width: 100%;
               position: fixed;
               top: 0;
               z-index: 4;
           }

           .Navbar-top {
               height: 80px;
               padding-top: 10px;
           }

           .Navbar-center {
               width: 100%;
               height: 100px;
               z-index: 4;
           }

           .Navbar-bottom {
               height: 80px;
               text-align: center;
               height: 100px;
               width: 100%;
               position: absolute;
               top: 0px;
               margin-top: 300px;
               z-index: 3;
               background-color: red;
           }

           .Navbar-bottom li {
               float: left;
               width: 18%;
               height: 35px;
               margin-right: 2%;
               color: #CCCCCC;
               font-family: "黑体";
               font-size: 24px;
               padding-top: 5px;
               list-style-type: none;
           }

           .Scan {
               width: 12%;
               text-align: center;
               float: left;
               color: #FFF;
               font-family: "黑体";
               font-size: 24px;
           }

           .Search {
               width: 64%;
               background-color: #FFF;
               height: 85px;
               float: left;
               border-radius: 50px;

}

           .Search-right {
               width: 11%;
               float: left;
               text-align: center;
               font-family: "黑体";
               font-size: 24px;
               color: #FFF;
           }

           .middle {
               width: 100%;
               height: 100%;
               background-color: red;
               text-align: center;
               padding-top: 400px;
               padding-bottom: 150px;
               height: auto;
           }

           .bottom {
               background-color: #FFFFFF;
               height: 150px;
               width: 100%;
               position: fixed;
               bottom: 0;
               text-align: center;
               font-family: "黑体";
               font-size: 30px;
               color: #666;
           }

           .div1 {
               background-color: #39E9FF;
               width: 50%;
               height: 309.14px;
               float: left;
           }

           .f1 {
               font-size: 100px;
               color: #06C;
           }

           .f2 {
               font-size: 30px;
               color: #0CF;
           }

           .f3 {
               width: 40px;
               margin: 0 auto;
               line-height: 40px;
               font-size: 40px;
               color: white;
               margin-left: 50px;
               margin-top: 30px;
               float: left;
           }

           .f4 {
               font-size: 60px;
               color: white;
               margin-left: 40px;
               margin-top: 30px;
               float: left;
           }

           #div-img img {
               margin-left: 55px;
               padding-top: 50px;
               width: 18%;
               float: left;
               border-radius: 50px;
           }

           .div2 {
               background-color: #FFF;
               height: 360px;
               width: 90%;
               border-radius: 20px;
               margin-right: auto;
               margin-bottom: 0;
               margin-left: auto;
               margin-top: 300px;
               font-size: 24px;
               font-family: "黑体";
               color: #999;
           }

           .item {
               width: 20%;
               float: left;
               padding-top: 20px;
           }

           .xian {
               width: 100px;
               height: 10px;
               background-color: #F90;
               border-top-left-radius: 100px;
               border-top-right-radius: 100px;
               border-bottom-left-radius: 100px;
               border-bottom-right-radius: 100px;
               float: left;
               margin-left: 360px;
           }

           .xian2 {
               width: 100px;
               height: 10px;
               border-top-left-radius: 100px;
               border-top-right-radius: 100px;
               border-bottom-left-radius: 100px;
               border-bottom-right-radius: 100px;
               float: left;
               background-color: #CCC;
               margin-left: -20px;
           }

           .item1 {
               float: left;
               width: 20%;
           }

           .bottomitem {
               padding-top: 20px;
               list-style-type: none;
           }

           .div3-1 {
               background-color: #FFF;
               height: 300px;
               width: 44%;
               float: left;
               border-radius: 20px;
               margin-bottom: 0;
               margin-left: 45px;
               margin-top: 50px;
               font-size: 24px;
               font-family: "黑体";
               color: #999;
           }

           .div3-1-text1 {
               font-size: 40px;
               font-family: "黑体";
               color: red;
               float: left;
               margin-top: 50px;
           }

           .div3-1-text2 {
               font-size: 40px;
               font-family: "黑体";
               color: red;
               float: left;
               margin-top: 100px;
               margin-left: -230px;
           }

           .div3-1-text3 {
               font-size: 60px;
               font-family: "黑体";
               color: white;
               float: left;
               margin-left: -220px;
               margin-top: 180px;
               background-color: red;
               border-radius: 20px;
           }

           .div3-1-img {
               float: right;
               margin-top: 30px;
           }

           .div3-2 {
               background-color: #FFF;
               height: 300px;
               width: 44%;
               float: left;
               border-radius: 20px;
               margin-left: 20px;
               margin-bottom: 0;
               margin-top: 50px;
               font-size: 24px;
               font-family: "黑体";
               color: #999;
           }

           .div3-2-text1 {
               font-size: 40px;
               font-family: "黑体";
               color: red;
               float: left;
               margin-top: 50px;
           }

           .div3-2-text2 {
               font-size: 40px;
               font-family: "黑体";
               color: red;
               float: left;
               margin-top: 100px;
               margin-left: -200px;
           }

           .div3-2-text3 {
               font-size: 60px;
               font-family: "黑体";
               color: white;
               float: left;
               margin-left: -180px;
               margin-top: 180px;
               background-color: red;
               border-radius: 20px;
           }

           .div3-2-img {
               float: right;
               margin-top: 30px;
           }

           .item2 {
               width: 50%;
               height: 200px;
           }

           .div4 {
               width: 95%;
               margin-top: 400px;
               margin-left: auto;
               margin-right: auto;
           }

           .div4_left {
               width: 50%;
               min-height: 800px;
               background-color: #FFF;
               float: left;
               border-top-left-radius: 30px;
           }

           .div4_right {
               width: 50%;
               min-height: 800px;
               background-color: #FFF;
               float: right;
               border-top-right-radius: 30px;
           }

           .div4_bottom {
               width: 100%;
               height: 100px;
               background-color: #FFF;
               float: left;
               border-bottom-left-radius: 30px;
               border-bottom-right-radius: 30px;
               border-top: 1px #FFF solid;
               margin-bottom: 20px;
           }

           .div4_item {
               width: 90%;
               height: 330px;
               margin-left: auto;
               margin-right: auto;
               margin-top: 20px;
           }

           .div4_text {
               height: 60px;
               width: 100%;
               font-size: 40px;
               color: #555;
               font-weight: bold;
               float: left;
               margin-top: 10px;
           }

           .div4_item_left,
           .div4_item_right {
               width: 47%;
               height: 250px;
               background-color: #FDF5F2;
               border-radius: 20px;
               text-align: center;
           }

           .div4_item_left {
               float: left;
           }

           .div4_item_right {
               float: right;
           }

           .div4_item p {
               font-size: 32px;
               margin: 10px;
               color: #FA2A59;
               font-weight: bold;
           }
       </style>
   </head>

   <body leftmargin=0 topmargin=0 style="color: red;">
       <div class="Navbar">
           <div class="Navbar-top">
               <div style="font-size:28px; font-family:黑体;color:#FFF; float:left; padding-left:20px; margin-top:10px">9:15
               </div>
               <div style="float:right; margin-right:20px"><img src="电量2-01.png" width="50px"></div>
               <div style="float:right; margin-right:20px"><img src="信号.png" width="50px"></div>
               <div style="float:right; margin-right:20px"><img src="wifi.png" width="50px"></div>
           </div>
           <div class="Navbar-center">
               <div class="Scan">
                   <div><img src="扫一扫.png" width="60" height="60"></div>
                   <div>扫一扫</div>
               </div>
               <div class="Search">
                   <div style="padding-top:13px; padding-left:20px; float:left"><img src="放大镜 (1).png" width="60"></div>
                   <div style="font-size:36px; font-family:黑体; color:#999; padding-top:20px; margin-left:10px;float:left">
                       心机裤
                   </div>
                   <div style="padding-top:13px; padding-right:20px;float:right"><img src="照相机 (1).png" width="60"></div>
               </div>
               <div class="Search-right">
                   <div><img src="红包.png" width="60" height="60"></div>
                   <div><img src="二维码.png" width="60" height="60"></div>
                   <div>会员码</div>
               </div>
           </div>
       </div>
       <div class="Navbar-bottom">
           <ul>
               <li style="color: white;font-size:36px;">首页</li>
               <li>食品</li>
               <li>运动</li>
               <li>生鲜</li>
               <li>男装</li>
           </ul>
       </div>
       <div class="middle">
           <div>
               <div class="div1">
                   <div class=" f1">感恩回馈</div>
                   <div class=" f2">NEW ARRIVAL</div>
                   <div class=" f3">海量</div>
                   <div class=" f4">新品上市</div>
               </div>
               <div><img src="guanggao.png" width="50%"></div>
           </div>
           <div>
               <div style=" margin-top:20px;font-size:50px; font-family:黑体; color:white;">双十一主会场</div>
               <div id="div-img"><img src="img.jpg" width="200" height="200"></div>
               <div id="div-img"><img src="img2.jpg" width="200" height="200"></div>
               <div id="div-img"><img src="img3.jpg" width="200" height="200"></div>
               <div id="div-img"><img src="img4.jpg" width="200" height="200"></div>
           </div>
           <div class="div2">
               <div>
                   <div class="item">
                       <div><img src="天猫.png" width="150"></div>
                       <div>天猫</div>
                   </div>
                   <div class="item">
                       <div><img src="聚划算.png" width="150"></div>
                       <div>聚划算</div>
                   </div>
                   <div class="item">
                       <div><img src="天猫国际.png" width="150"></div>
                       <div>天猫国际</div>
                   </div>
                   <div class="item">
                       <div><img src="外卖.png" width="150"></div>
                       <div>外卖</div>
                   </div>
                   <div class="item">
                       <div><img src="天猫超市.png" width="150"></div>
                       <div>天猫超市</div>
                   </div>
               </div>
               <div>
                   <div class="item">
                       <div><img src="充值中心.png" width="150"></div>
                       <div>充值中心</div>
                   </div>
                   <div class="item">
                       <div><img src="飞猪旅行.png" width="150"></div>
                       <div>飞猪旅行</div>
                   </div>
                   <div class="item">
                       <div><img src="领金币.png" width="150"></div>
                       <div>领金币</div>
                   </div>
                   <div class="item">
                       <div><img src="拍卖.png" width="150"></div>
                       <div>拍卖</div>
                   </div>
                   <div class="item">
                       <div><img src="分类.png" width="150"></div>
                       <div>分类</div>
                   </div>
               </div>
               <div class="xian"></div>
               <div class="xian2"></div>
           </div>
           <div class="div3-1">
               <div class="div3-1-text1">淘宝双11爆款</div>
               <div class="div3-1-text2">满200减20</div>
               <div class="div3-1-text3">立即抢购</div>
               <div class="div3-1-img"> <img src="hot.jpeg" width="150"></div>
           </div>
           <div class="div3-2">
               <div class="div3-2-text1">双11合伙人</div>
               <div class="div3-2-text2">今日开大奖</div>
               <div class="div3-2-text3">立即开奖</div>
               <div class="div3-2-img"> <img src="红包2.png" width="150"></div>
           </div>
           <div class="div4">
               <div class="div4_left">
                   <div class="div4_item">
                       <div class="div4_text">聚划算</div>
                       <div class="div4_item_left">
                           <p>淘抢购</p><img src="div4-1.jpg" width="160px">
                       </div>
                       <div class="div4_item_right">
                           <p>每日红包</p><img src="div4-2.jpg" width="160px">
                       </div>
                   </div>
                   <div class="div4_item">
                       <div class="div4_text">天天特卖</div>
                       <div class="div4_item_left">
                           <p>源头好货</p><img src="div4-3.jpg" width="160px">
                       </div>
                       <div class="div4_item_right">
                           <p>9.9包邮</p><img src="div4-4.jpg" width="160px">
                       </div>
                   </div>

               </div>
               <div class="div4_right">
                   <div class="div4_item">
                       <div class="div4_text">淘宝直播</div>
                       <div class="div4_item_left">
                           <p>超值货在此</p><img src="div4-5.jpg" width="160px">
                       </div>
                       <div class="div4_item_right">
                       <img src="div4-6.jpg" width="160px">
                       </div>
                   </div>
                   <div class="div4_item">
                       <div class="div4_text">有好货</div>
                       <div class="div4_item_left">
                           <p>世间好物</p><img src="div4-7.jpg" width="160px">
                       </div>
                       <div class="div4_item_right">
                           <img src="div4-8.jpg" width="160px">
                       </div>
                   </div>
               </div>
               <div class="div4_bottom">
                   <div style="font-size: 42px;color: #444; margin-left: 30px;margin-top: 18px;float: left;font-weight: bold;">淘宝头条</div>
                   <div style="font-size: 30px;color: #FF4500;margin-top: 28px;margin-left: 20px;float: left;width: 100px;background-color: #FFEEEE;text-align: center;">双11</div>
                   <div style="font-size: 34px;color: #555; margin-left: 10px;margin-top: 23px;float: left;">双十一当天从领红包开始！</div>
               </div>
               <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
               <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
           </div>
       </div>
       <div class="bottom">
           <div class="bottomitem">
               <div class="item1">
                   <div><img src="淘宝.png" width="80"></div>
                   <div>首页</div>
               </div>
               <div class="item1">
                   <div><img src="微淘.png" width="80"></div>
                   <div>微淘</div>
               </div>
               <div class="item1">
                   <div><img src="消息.png" width="80"></div>
                   <div>消息</div>
               </div>
               <div class="item1">
                   <div><img src="购物车.png" width="80"></div>
                   <div>购物车</div>
               </div>
               <div class="item1">
                   <div><img src="我的淘宝.png" width="80"></div>
                   <div>我的淘宝</div>
               </div>
           </div>
       </div>
   </body>
</html>