每日学到 2

1.Swiper的脚本的书写

<!--swiper脚本要写入同一个mySwiper，否则有的效果出不来-->
<script language="javascript"> 
    var mySwiper = new Swiper('.swiper',{
      pagination: {el: '.swiper-pagination',dynamicBullets: true,clickable :true,dynamicMainBullets: 2},
      navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},
      autoplay:true,
      loop: true,
    })

2.解决了困扰了我一天的问题，Swiper做的轮播图，其左右箭头和分页器始终在弹出窗口上方，单独为弹窗设置层级依旧会显示在箭头和分页器下方，给其祖先标签设置一个很高的层级后，弹窗自动显示在了左右箭头和分页器上。

/* 在设置popups2(也就是左侧的弹出窗口)的层级时，在其css下设置失效，swiper轮播图的左右箭头、分页器的层级一直比popups2高，之后把.left-nav-wrap的层级设置很高时，popups2的层级自动比swiper高了 */
.left-nav-wrap{
    height: 470px;
    width: 230px;
    background-color:rgba(71, 68, 68, 0.5);
    position: absolute;
    z-index: 998;
}
.left-nav{
    padding: 20px 0px;
}
.left-nav li{
    text-align: left;
    line-height: 42px;
    padding: 0px 20px 0 30px;
}
.left-nav li:hover{
    background-color: rgb(255, 106, 0);
}
.left-nav a{
    color: white;
}
.left-nav i{
    float: right;
    line-height: 41px;
    color: white;
}
.popups2{
    display: none;
    position: absolute;
    width: 996px;
    height: 469px;
    left: 230px;
    top: 0px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0 2px 3px rgba(0, 0, 0, .2);
    border-top: 1px solid #fdfcfc;
}
.left-nav-1:hover~.popups2{
    display: block;
}
.popups2 li{
    float:left;
    padding: 20px;
}
.popups2 img{
    height: 60px;
    width: 90px;
}
.popups2 p{
    color: black;
}
/* 轮播图 */
.swiper{
    width: 1226px;
    height: 470px;
    position: relative;
}
.swiper{
    --swiper-theme-color: #ff6600;/* 设置Swiper风格 */
    --swiper-navigation-color: #ff6600;/* 单独设置按钮颜色 */
    --swiper-navigation-size: 30px;/* 设置按钮大小 */
    overflow: hidden;
}
.swiper-wrapper img{
    width: 1226px;
    height: 470px;
}
.swiper .prev{
    position: absolute;
    left: 240px;
}
.swiper{
    --swiper-pagination-color: #ff6600;/* 两种都可以 */
}

3.使用border制作三角形时，设置宽高为0px，然后设置边框，是为了得到正方形。

.QRcode-wrap::before{
    content: '';
    width：0px；
    height：0px；
    border:8px solid;
    border-color:transparent transparent white transparent;
    border-top: none;
    position: absolute;
    top: -8px;
    left: 42px;
}