仿天猫双12主页广告部分

灰太狼 2022-07-14 15:53 181阅读 0赞

## 运用了Bootstrap来布局 ##

![这里写图片描述][SouthEast]

1.  该部分分为左右两块DIV  
    **左DIV**实现的是鼠标移动到下方的一个轮播图上的图片时整块DIV背景跟随变化。轮播图有左右按钮，当按下右按钮时轮播新的三张图并且右按钮隐藏左按钮显示。轮播图下方是一个自动向上滚动的一串 li 实现信息推送。  
    var index;  
    var opic\_1=$(“.run\_1 li”);
    
        for(var i=0;i<opic_1.length;i++){
             opic_1[i].index=i;
                 $(opic_1[i]).mouseover(function(){ 
                  $('.sport_1img').attr("src",$(this).children('img').attr('src')); 
                        });
             };`
    
    这是运用索引找到了当前轮播图上鼠标处于其上位置的DIV当前背景图，然后让其父亲DIV背景换为一样的代码。

--------------------

**右DIV**实现的是一系列商标的导航（这里用了随机图片作为背景）。布局为一连串DIV使其浮动，然后在各DIV中增加一个shadow阴影层DIV，使其hidde隐藏，当鼠标移动到其中一个DIV上时让当前的DIV的shadow层显示。shadow层中写入button按钮设置链接可跳转，并有关注收藏按钮。然后设置给DIV的边距实现友好的DIV布局（这里的布局稍有瑕疵）。

\*\*

$(this).stop().animate(\{“opacity”:0.5\},110);  
在之前的网页练习中很容易出现一个问题，就是当执行一个特效的时候（例如二级菜单的下拉显示动画，对象的运动或者背景的变化）当鼠标多次快速的往返于两个特效对象上，该对象会多次的执行特效尽管鼠标离开后特效仍然执行。为了避免这种问题发生只需要在运动语句前增加一个.spot()停止语句便可。

\*\*

--------------------

![这里写图片描述][SouthEast 1]

该部分实现的是当鼠标移动到广告图片部分上时，图片会按一个自定义的比例放大，鼠标移开时图片变为原来大小。实现一个广告的立体推送。  
这里运用了CSS3的 transition和 transform属性。一个小的属性就可以体现出CSS3的强大之处。

.ad_main_2 img{
                      position: absolute;
                      width: 70px;
                      height: 90px;
                      left: 60px;
                      top: 95px;
                      transition: all 0.4s;所有对象执行时间0.4s
                 }
    .ad_main_2 img:hover{
                      transform: scale(1.2);按1.2倍比例放大
                 }

![这里写图片描述][SouthEast 2]

这个是一个广告模板，天猫官网主页上有很多重复的，可以载入不同类型的广告。  
左侧是一个有shadow层的DIV，鼠标移动到其上时shadow层显示并且下方字体颜色改变。中间是一个无缝滚动的 li，li里有超链接可以实现跳转。  
右侧是一连串的DIV广告块布局，这里调整了各DIV的边框使其布局更加好看并不是每一个DIV的上下左右边框都有，直观看上去更加的友好。  
当鼠标移动到中间图片上时图片会左移一段距离，鼠标离开后回到原位置。这里用到了CSS3的transition和 transform属性。也可以用Js实现，不过运用CSS3代码会少一点。

.te_mid_content img{
        width: 90px;
        height: 110px;
        margin-left:112px ;
        margin-top:10px;
        transition: all 0.6s;
    }
    .te_mid_content img:hover{
            transform: translateX(-10px);按X轴左移10px
    }

## 附上代码 ##

样式代码  
  
\*\{  
margin: 0;  
padding: 0;  
\}  
body\{  
background: rgb(202,50,190);  
height: 2000px;  
\}  
.box\{  
width: 1000px;  
\}  
.pic1\{  
height: 300px;  
width: 120px;  
float: left;  
\}  
.pic1 img\{  
height: 300px;  
width: 180px;  
border-radius: 5px;  
\}

.pic2{
                        height: 300px;
                        width: 300px;
                        margin-left: 72px;
                        float: left;
                    }
                    .pic2 img{
                        width: 300px;
                        height: 145px;
                        border-radius: 5px;
                    }
                  .sport{
                    width: 400px;
                    height: 400px;
                    margin-top: 80px;
                    background: #000000;
                    float: left;
                  }
                  .sport_1{
                    width: 400px;
                    height: 250px;
    
    
                  }
                  .sport_1 img{
                    width: 400px;
                    height: 250px;
                  }
                  .sport_2{
                    width: 400px;
                    height: 90px;
                   margin-top: 0px;
    
                    position: relative;
                    overflow: hidden;
                  }
                 .sport_2 .run_1{
                    width: 400px;
                    height: 90px;
                    margin-top: -10px;
                  }
                  .sport_2 .run_1 img{
                    width:130px ;
                    height: 90px;
                  }
                   .sport_2 .run_1 ul{
                    width: 1000px;
    
                  }
                  .sport_2 .run_1 li{
                     width: 130px;
                     height: 90px;
                     background: #FFFF00;
                     list-style: none; 
                     float: left;
                  }
                  .sport_btn_box{
                    height: 90px;
                    width: 30px;
    
                    z-index: 1;
                 } 
                   .sport_btn{
                    height: 90px;
                    width: 30px;
                    background: #CCCCCC;
                    position: absolute;
                    opacity: 0.7;
                 } 
                 .act{
                    opacity: 0;
                 }
                 .pos{
                    left: 369px;
                 }
                 .sport_3{
                    width: 400px;
                    height: 50px;
                    overflow: hidden;
                 }
                 .sport_3 ul{
                    margin-top: 5px;
                    margin-left: 20px;
                     list-style: none;
                     color: #FFFFFF;
                     float: left;
                 }
                .text{
                    height: 30px;
                    width: 50px;
                    margin-left: -15px;
                    margin-top: 10px;
                  transform: rotate(90deg);
                   float: left;
                 }
                 .text span{
                    color: #D9534F;
                 }
                 .hr{
                    width: 5px;
                    height: 20px;
                    border-right: 1px solid #333333;
                    margin-left: -5px;
                    margin-top: 18px;
                    float: left;
                 }
                 .sign{
                    color: #FFFFFF;
                    margin-left: 10px;
                    margin-top: 20px;
                 }
                   .run_2{
                    width: 275px;
                    height: 50px;
                   margin-left: 120px;
                   margin-top: -32px;
    
                  }
                   .sport_2 .run_2 ul{
                   height: 160px;
                  }
                  .run_2 ul li{
                     width: 255px;
                     height: 60px;
                     margin-top: 0px;
                     list-style: none;
                  }
                  .run_2_font1{
                    margin-left: -10px;
    
                    color: #FFFFFF;
                  }
                  .run_2_font2{
                    margin-left: -10px;
                    color: #C7254E;
                  }
                  .signArr{
                    width: 600px;
                    height: 400px;
                    background: #ffffff;
                    margin-top: 80px;
                    float: left;
                  }
                  .signArr_pic{
                    width: 119px;
                    height: 100px;
                    border-bottom: 1px solid #FFFFFF;
                    float: left;
                  }
                 .signArr_pic img{
                      width: 119px;
                    height: 98px;
                 } 
                 .add_left{
                    margin-left: 5px;
                 }
                 .add_top{
                    height: 100px;
                 }
                 .shadow{
                     position: absolute; 
                     width: 119px; 
                     height: 98px;
                     background:#000000;
                     opacity: 0;
                 }
    
                 .shadow_sign{
                    position: absolute;
                    top:10px;
                    right: 5px;
                    cursor:pointer;
                    color: red;
                    z-index: 1;
                 }
                 .shadow_padge{
                    color: #FFFFFF;
                   background: rgb(255,255,255,0.9);
                 }
    
                 .shadow_btn{
                       margin-top: 5px;
                       width: 60px;
                       height: 20px;
    
                 }
                 .shadow_btn span{
                 position: absolute;
                 top: 57px;
                 left: 35px;
                    font-size: 10px;
                 }
                 .ad_box{
                    width: 1000px;
                    height: 500px;
                 }
                 .ad{
                    width: 192px;
                    height: 390px;
                    margin-left:10px;
                    background: #FFFFFF;
                    position: relative;
                    float: left;
                 }
                 .ad_padding{
                      margin-left: 0px;
                 }
                 .ad_row{
                    margin-top: 30px;
                    position: relative;
                 }
                 .ad_buttom{
                  clear: left;
                    width: 1000px;
                    height: 100px;
                    position: absolute;
                    top: 400px;
                 }
                 .ad_main_1{
                     height: 30px;
                     width: 192px;
                     background: #FF0000;
                 }
                 .ad_main_1 img{
                      width: 25px;
                      height: 25px;
                      margin-top: 2px;
                      margin-left: 35px;
                 }
                 .ad_main_1 .ad_text_1{
                     color: #FFFFFF;
                     display: block;
                     margin-top: -22px;
                     margin-left: 80px;
                 }
                 .ad_main_2{
                    width: 100px;
                    height: 100px;
                    border-radius: 50%;
                    background: #E6E6FA;
                    margin: auto;
                    margin-top: 5px;
                 }
                 .ad hr{
                      width: 160px;
                      margin: auto;
                      margin-top: 10px;
                 }
                 .ad_text_2{
                    display: block;
                      margin-left:75px;
                      margin-top: 10px;
                      font-size: 20px;
                 }
                 .ad_text_3{
                    display: block;
                      margin-left:60px;
                      margin-top: -20px;
                      font-size: 10px;
                      color: #CCCCCC;
                 }
                .ad_add_text{
                    margin-left: 55px;
                }
                .ad_main_2 img{
                    position: absolute;
                      width: 70px;
                      height: 90px;
                      left: 60px;
                      top: 95px;
                      transition: all 0.4s;
                }
                .ad_main_2 img:hover{
                         transform: scale(1.2);
                }
                .ad_add_Img_top img{
                    top: 266px;
                }
                .ad_buttom img{
                    width: 1000px;
                    height: 100px;
                }
                .template{
                    width: 1000px;
                    height: 400px;
                    margin-top: 30px;
                }
                .template_top{
                    width: 1000px;
                    height: 20px;
                    border-left: 6px solid  #C92222;
                }
                .template_left{
                    width: 200px;
                    height: 380px;
                    background:url(img/6.jpg);
                    position: relative;
                    float: left;
                }
                .template_mid{
                    width: 600px;
                    height: 380px;
                    background:#FFFFFF;
                    float: left;
                }
                .template_right{
                    width: 200px;
                    height: 380px;
                    background:#FFFFFF;
                    float: left;
                }
                .te_top_text_1{
                    font-size: 15px;
                    margin-left: 5px;
                }
                .te_top_text_2{
                    font-size: 10px;
                    margin-left: 5px;
                }
                .template_top ul{
                    margin-top: -21px;
                    margin-left: 430px;
                }
                .template_top li {
                    margin-left: 25px;
                    list-style: none;
                    float: left;
                }
                .template_top a{
                    font-size: 10px;
                    color: #000000;
                }
                .te_shadow{
                    width: 200px;
                    height: 380px;
                    position: absolute;
                    background: #cccccc;
                    opacity: 0;
                }
                .te_run{
                    width: 200px;
                    height: 25px;
                    position: absolute;
                    top: 250px;
                    background: #FFFFFF;
                  overflow: hidden;
                  opacity: 0.5;
                }
                .te_run ul{
                    margin-top: 3px;
                    margin-left: 10px;
                }
                .te_run li{
    
                    list-style: none;
                    color: #000000;
                    font-size: 15px;
                }
                .te_buttom{
                    width: 200px;
                    height: 105px;
                    margin-top: 275px;
                    background: #C92222;
                    opacity: 0.7;
                }
                .te_left_text_1{
                    font-size:18px;
                    color: #FFFFFF;
                }
                .te_left_text_2{
                    font-size:16px;
                    color: #FFFFFF;
                }
                .te_mid_content{
                    width: 199px;
                    height: 190px;
                    border: 1px solid #CCCCCC;
                    border-top: 0px ;
                    border-right: 0px;
                    float: left;
                }
                .add_border{
                    border-bottom: 0px;
                }
                .te_add_content_width{
                    border-left: 0px;
                    width: 202px;
                }
                .te_mid_content_text_1{
                    margin-left: 20px;
                    font-size: 15px;
                }
                .te_mid_content_text_2{
                    color: #FA8072;
                    margin-left: 20px;
                    font-size: 10px;
                }
                .te_mid_content img{
                    width: 90px;
                    height: 110px;
                    margin-left:112px ;
                    margin-top:10px;
                    transition: all 0.6s;
                }
                .te_mid_content img:hover{
                        transform: translateX(-10px);
                }
                .te_mid_content .mod_img{
                        margin-left:108px ;
                }
                .te_right_content{
                    width:199px;
                    height: 126px;
                    border-left: 1px solid #CCCCCC ;
                    border-bottom: 1px solid #CCCCCC;
                }
                 .add_border_bottom{
                    border-bottom: 0px;
                }
                .add_te_right_height{
                    height: 127px;
                }
                .te_right_content img{
                    width: 50px;
                    height: 70px;
                    margin-left: 149px;
                    margin-top: -10px;
                    transition: all 0.6s;
                }
                .te_right_content img:hover{
                        transform: translateX(-10px);
                }
                .add_sign_top{
                    margin-top: -1px;

布局代码

<body>
          <div class="container box">
    
            
            <div class="row visible-lg visible-md" >
    
                 <div class="pager">
                    <img src="img/9.png" />
                 </div> 
                  <div class="pic1">
                       <img src="img/2.jpg" "/>
                  </div>
                  <div class="pic2">
                       <img src="img/3.jpg" />
                       <img src="img/4.jpg" style="margin-top: 10px;" />
                  </div>
                  <div class="pic1" style="margin-left: 13px;">
                       <img src="img/2.jpg" "/>
                  </div>
                  <div class="pic2">
                       <img src="img/3.jpg" />
                       <img src="img/4.jpg" style="margin-top: 10px;" />
                  </div>
            </div>
    
            
           <div class="row">
              <div class="sport">
                  <div class="sport_1">
                     <img src="img/1.jpg" />
                  </div>
                  <div class="sport_2">
                        <button class="btn btn-default sport_btn act">←</button>
                        <button class="btn btn-default sport_btn pos">→</button>
                    <div class="run_1">
    
                        <ul>
                            <li>
                                <img src="img/1.jpg" />
                            </li>
                            <li style="margin-left: 5px;"><img src="img/3.jpg" /></li>
                            <li style="margin-left: 5px;"><img src="img/4.jpg" /></li>
                            <li><img src="img/5.jpg" /></li>
                            <li style="margin-left: 5px;"><img src="img/6.jpg" /></li>
                            <li style="margin-left: 5px;"><img src="img/7.jpg" /></li>
                        </ul>
                    </div>
    
                  </div>
                  <div class="sport_3">
                        <ul>
                            <li>直播</li>
                            <li>预告</li>
                        </ul>
    
                        <div class="text"><center><span>LIVE</span></center></div>
                        <div class="hr"></div>  
                            <span class="glyphicon glyphicon-volume-up sign"></span>
    
                        <div class="run_2">
                            <ul>
                                <li ><span class="run_2_font1">肯德基老爷爷爱吃大鸡排</span><br/>
                                    <span class="run_2_font2">12月12日</span></li>
                                <li ><span class="run_2_font1">肯德基老爷爷爱吃大鸡排</span><br/>
                                    <span class="run_2_font2">12月12日</span></li>
                                <li ><span class="run_2_font1">肯德基老爷爷爱吃大鸡排</span><br/>
                                    <span class="run_2_font2">12月12日</span></li>
                            </ul>
                        </div>
    
                  </div>
              </div>
           <div class="signArr">
                  <div class="signArr_pic add_left add_height add_sign_top">
                    <div class="shadow">    
                            <center>
                          <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                          <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                          <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                            </center>
                    </div>
                    <img src="img/1.jpg" />
                  </div>
                   <div class="signArr_pic add_height add_sign_top">
                    <div class="shadow">
                        <center>
                          <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                          <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                          <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                            </center>
                    </div>
                    <img src="img/2.jpg" />
                  </div>          
                   <div class="signArr_pic add_height add_sign_top">
                    <div class="shadow">    
                      <center>
                          <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                          <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                          <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                            </center>
                    </div>
                    <img src="img/3.jpg" />
                  </div>
                   <div class="signArr_pic add_height add_sign_top">
                    <div class="shadow">    
                        <center>
                          <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                          <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                          <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                            </center>
                    </div>
                    <img src="img/4.jpg" />
                  </div>
                   <div class="signArr_pic add_height add_sign_top">
                    <div class="shadow">
                        <center>
                          <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                          <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                          <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                            </center>       
                    </div>
                    <img src="img/5.jpg" />
                  </div>
                   <div class="signArr_pic add_left add_top">
                    <div class="shadow shadow_add_height">  
                      <center>
                          <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                          <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                          <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                            </center>
                    </div>
                    <img src="img/6.jpg" />
                  </div>
                   <div class="signArr_pic add_top">
                    <div class="shadow shadow_add_height">  
                       <center>
                          <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                          <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                          <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                            </center>
                    </div>
                    <img src="img/7.jpg" />
                  </div>
                   <div class="signArr_pic add_top">
                    <div class="shadow shadow_add_height">  
                       <center>
                          <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                          <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                          <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                            </center>
                    </div>
                    <img src="img/2.jpg" />
                  </div>
                   <div class="signArr_pic add_top">
                    <div class="shadow shadow_add_height">  
                      <center>
                          <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                          <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                          <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                            </center>
                    </div>
                    <img src="img/8.jpg" />
                  </div>
                   <div class="signArr_pic add_top">
                    <div class="shadow shadow_add_height">  
                       <center>
                          <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                          <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                          <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                            </center>
                    </div>
                    <img src="img/2.jpg" />
                  </div>
                   <div class="signArr_pic add_left add_top">
                    <div class="shadow shadow_add_height">  
                       <center>
                          <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                          <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                          <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                            </center>
                    </div>
                    <img src="img/3.jpg" />
                  </div>
                   <div class="signArr_pic add_top">
                    <div class="shadow shadow_add_height">  
                       <center>
                          <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                          <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                          <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                            </center>
                    </div>
                    <img src="img/4.jpg" />
                  </div>
                   <div class="signArr_pic add_top">
                    <div class="shadow shadow_add_height">
                        <center>
                          <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                          <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                          <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                            </center>       
                    </div>
                    <img src="img/5.jpg"/>
                  </div>
                   <div class="signArr_pic add_top">
                    <div class="shadow shadow_add_height">  
                       <center>
                          <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                          <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                          <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                            </center>
                    </div>
                    <imgsrc="img/1.jpg" />
                  </div>
                   <div class="signArr_pic add_top">
                    <div class="shadow shadow_add_height">  
                       <center>
                          <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                          <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                          <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                            </center>
                    </div>
                    <img src="img/6.jpg" />
                  </div>
                   <div class="signArr_pic add_left add_top">
                    <div class="shadow">
                        <center>
                          <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                          <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                          <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                            </center>
                    </div>
                    <img src="img/1.jpg" />
                  </div>
                   <div class="signArr_pic add_top">
                    <div class="shadow">    
                      <center>
                          <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                          <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                          <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                            </center>
                    </div>
                    <img src="img/8.jpg" />
                  </div>
                   <div class="signArr_pic add_top">
                    <div class="shadow">
                         <center>
                          <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                          <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                          <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                            </center>
    
                    </div>
                    <img src="img/4.jpg" />
                  </div>
                   <div class="signArr_pic add_top">
                    <div class="shadow">    
                      <center>
                          <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                          <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                          <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                            </center>
                    </div>
                    <img src="img/2.jpg" />
                  </div>
                   <div class="signArr_pic add_top">
                    <div class="shadow">    
                      <center>
                          <div style="margin-top: 30px;"><span class="shadow_padge">关注56万</span></div>
                          <span class="glyphicon glyphicon-heart-empty shadow_sign"></span>
                          <button class="btn btn-danger shadow_btn " value="点击进入"><span>点击进入</span></button>
                            </center>
                    </div>
                    <img src="img/1.jpg" />
                  </div>
           </div>
           </div>
    
           
           <div class="row ad_row">
                   <div class="ad_box">
                         <div class="ad ad_padding">
                                 <div class="ad_main_1">
                                    <img src="img/11.png" />
                                      <span class="ad_text_1"><b>潮 流 前 沿</b></span>
                                 </div>
                                    <span class="ad_text_2">焕新</span>   <br />
                                    <span class="ad_text_3">品牌精选新品</span>
                                 <div class="ad_main_2">
                                           <img src="img/10.JPG" />
                                 </div>
                                 <hr />
                                  <span class="ad_text_2 ad_add_text">全球时尚</span>   <br />
                                    <span class="ad_text_3">大牌精致时尚</span>
                                 <div class="ad_main_2 ad_add_Img_top">
                                            <img src="img/10.JPG"/>
                                 </div>
                         </div>
                         <div class="ad ">
                               <div class="ad_main_1">
                                    <img src="img/12.png" />
                                      <span class="ad_text_1"><b>品 质 生 活</b></span>
                                 </div>
                                    <span class="ad_text_2">焕新</span>   <br />
                                    <span class="ad_text_3">品牌精选新品</span>
                                 <div class="ad_main_2">
                                           <img src="img/10.JPG" />
                                 </div>
                                 <hr />
                                  <span class="ad_text_2 ad_add_text">全球时尚</span>   <br />
                                    <span class="ad_text_3">大牌精致时尚</span>
                                 <div class="ad_main_2 ad_add_Img_top">
                                            <img src="img/10.JPG"/>
                                 </div>
                         </div>
                         <div class="ad ">
                               <div class="ad_main_1">
                                    <img src="img/13.png" />
                                      <span class="ad_text_1"><b>美 食 乐 园</b></span>
                                 </div>
                                    <span class="ad_text_2">焕新</span>   <br />
                                    <span class="ad_text_3">品牌精选新品</span>
                                 <div class="ad_main_2">
                                           <img src="img/10.JPG" />
                                 </div>
                                 <hr />
                                  <span class="ad_text_2 ad_add_text">全球时尚</span>   <br />
                                    <span class="ad_text_3">大牌精致时尚</span>
                                 <div class="ad_main_2 ad_add_Img_top">
                                            <img src="img/10.JPG"/>
                                 </div>
                         </div>
                         <div class="ad ">
                               <div class="ad_main_1">
                                    <img src="img/14.png" />
                                      <span class="ad_text_1"><b>国 际 海 购</b></span>
                                 </div>
                                    <span class="ad_text_2">焕新</span>   <br />
                                    <span class="ad_text_3">品牌精选新品</span>
                                 <div class="ad_main_2">
                                           <img src="img/10.JPG" />
                                 </div>
                                 <hr />
                                  <span class="ad_text_2 ad_add_text">全球时尚</span>   <br />
                                    <span class="ad_text_3">大牌精致时尚</span>
                                 <div class="ad_main_2 ad_add_Img_top">
                                            <img src="img/10.JPG"/>
                                 </div>
                         </div>
                         <div class="ad ">
                               <div class="ad_main_1">
                                    <img src="img/15.png" />
                                      <span class="ad_text_1"><b>电 子 酷 玩</b></span>
                                 </div>
                                    <span class="ad_text_2">焕新</span>   <br />
                                    <span class="ad_text_3">品牌精选新品</span>
                                 <div class="ad_main_2">
                                           <img src="img/10.JPG" />
                                 </div>
                                 <hr />
                                  <span class="ad_text_2 ad_add_text">全球时尚</span>   <br />
                                    <span class="ad_text_3">大牌精致时尚</span>
                                 <div class="ad_main_2 ad_add_Img_top">
                                            <img src="img/10.JPG"/>
                                 </div>
                         </div>
                         <div class="ad_buttom">
                               <img src="img/9.png" />
                         </div>
                   </div>
           </div>
    
          
          <div class="row template">
                <div class="template_top">
                     <span class="te_top_text_1">美丽人生</span> <span class="te_top_text_2">FASHION & BEAUTY</span>
                     <ul>
                          <li ><a href="#">连衣裙</a></li>
                          <li ><a href="#">T恤男</a></li>
                          <li><a href="#">美容护肤</a></li>
                          <li><a href="#">休闲男鞋</a></li>
                          <li><a href="#">黄金项链</a></li>
                          <li><a href="#">单鞋</a></li>
                          <li><a href="#">女包</a></li>
                          <li><a href="#">文胸</a></li>
                          <li><a href="#">大牌腕表</a></li>       
                     </ul>
                </div>
                <div class="template_left">
                       <div class="te_shadow"></div>
                       <div class="te_run">
                           <ul>
                                <li><span>欧时力15日0时抢></span></li>
                                <li><span>抢完加微信w15829357178></li>
                                    <li><span>欧时力15日0时抢></span></li>
                           </ul>
                       </div>
                       <div class="te_buttom">
                        <center>
                                <br />
                              <span class="te_left_text_1"><b>神秘大牌5日首降</b></span> <br />
                              <span class="te_left_text_2">女装新品五折抢</span>
                        </center>
                       </div>
                </div>
                <div class="template_mid">
                        <div class="te_mid_content te_add_content_width">
                            <br />
                               <span class="te_mid_content_text_1">中长款修身羽绒服</span><br />
                               <span class="te_mid_content_text_2">轻盈时尚保暖外套</span>
                               <img src="img/16.png" />
                        </div>
                        <div class="te_mid_content te_add_content_height ">
                              <br />
                               <span class="te_mid_content_text_1">中长款修身羽绒服</span><br />
                               <span class="te_mid_content_text_2">轻盈时尚保暖外套</span>
                               <img class="mod_img" src="img/16.png" />
                        </div>
                        <div class="te_mid_content ">
                                <br />
                               <span class="te_mid_content_text_1">中长款修身羽绒服</span><br />
                               <span class="te_mid_content_text_2">轻盈时尚保暖外套</span>
                               <img class="mod_img" src="img/16.png" />
                        </div>
                        <div class="te_mid_content add_border te_add_content_width">
                              <br />
                               <span class="te_mid_content_text_1">中长款修身羽绒服</span><br />
                               <span class="te_mid_content_text_2">轻盈时尚保暖外套</span>
                               <img src="img/16.png" />
                        </div>
                        <div class="te_mid_content te_add_content_height add_border ">
                              <br />
                               <span class="te_mid_content_text_1">中长款修身羽绒服</span><br />
                               <span class="te_mid_content_text_2">轻盈时尚保暖外套</span>
                               <img class="mod_img" src="img/16.png" />
                        </div>
                        <div class="te_mid_content add_border ">
                              <br />
                               <span class="te_mid_content_text_1">中长款修身羽绒服</span><br />
                               <span class="te_mid_content_text_2">轻盈时尚保暖外套</span>
                               <img class="mod_img" src="img/16.png" />
                        </div>
                </div>
                <div class="template_right visible-lg visible-md">
                      <div class="te_right_content add_te_right_height">
                             <br />
                               <span class="te_mid_content_text_1">中长款修身羽绒服</span><br />
                               <span class="te_mid_content_text_2">轻盈时尚保暖外套</span>
                             <img src="img/16.png" />
                      </div>
                      <div class="te_right_content add_te_right_height">
                         <br />
                               <span class="te_mid_content_text_1">中长款修身羽绒服</span><br />
                               <span class="te_mid_content_text_2">轻盈时尚保暖外套</span>
                             <img src="img/16.png" />
                      </div>
                      <div class="te_right_content add_border_bottom">
                          <br />
                               <span class="te_mid_content_text_1">中长款修身羽绒服</span><br />
                               <span class="te_mid_content_text_2">轻盈时尚保暖外套</span>
                             <img src="img/16.png" />
                      </div>
                </div>
          </div>
          </div>
    </body>

jQuery代码

[SouthEast]: /images/20220709/ae05edddd65b441d8cce5180d4f52601.png
[SouthEast 1]: /images/20220709/757f3c99424842c784a396ed7439a0f0.png
[SouthEast 2]: /images/20220709/0d126515ceff4bfe9008a7933da1e4c7.png