ol{
    list-style-image: url(/css/另存/favicon.ico);
    list-style-position: inside;
 }
 /*这里删掉了对body的设置  */
 .lbt{
     /*  设置一个元素为弹性盒子容器 在这个容器内，子元素的排列和尺寸会根据可用空间而变化。   */
     display: flex;
     justify-content: center;
     /* 主轴对齐方式 */
     align-items: center;
     /* 交叉轴对齐方式 */
     margin-bottom: 20px;
     margin: 0 1px;
 }
 .lbtleft,.lbtright{
    height: 370px;
    width: 300px;
    margin: 10px;
    border: 1px solid black;
    overflow: auto;
 }
 .lbtright  span{
    padding-right:5px ;
    display: inline-block;

 }

.dians {
    /* 相对定位是相对于盒子这样吧，不同于绝对定位absoult定着不动，用于调整元素的位置，同时保持其在文档中占据的空间，非常适合需要精细调整布局的场景。             */
    position: relative;
    width: 550px;
    height: 370px;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #eee;
    /* 这个标签相当于把三个重合在一起，即隐藏了后面的图片             */
    overflow: hidden;
}

.dian {

    width: inherit;
    height: inherit;
    position: absolute;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    display: flex;
    /* 这里主要是让里面的字居中，现在可能盖住了 */
    justify-content: center;
    align-items: center;
    /* 到这同上 */
    font-size: 400px;
    color: crimson;
    /* 动画的过渡设置             */
    transition: .5s;
    transform: ease-in-out;
}

.dian:nth-of-type(1) {
    background-image: url(/轮播图1.jpg);
    background-size: contain;
    /* 保持照片等比例大小 */
    background-repeat: no-repeat;
}

.dian:nth-of-type(2) {
    background-image: url(/轮播图2.jpg);
    left: 100%;
    background-size: contain;
    background-repeat: no-repeat;
}

.dian:nth-of-type(3) {
    background-image: url(/轮播图3.jpg);
    left: 200%;
    background-size: contain;
    background-repeat: no-repeat;
}

.dian:nth-of-type(4) {
    background-image: url(/轮播图4.jpg);
    left: 300%;
    background-size: contain;
    background-repeat: no-repeat;
}

input[radio] {
    /* 这里用相对的话，四个空格就会分开，用ablsoult的话就重叠在一起             */

    position: relative;
    z-index: 10;
    /* 可写数字            */
    /* 用于控制重叠元素的堆叠顺序   例如position位置属性的元素，z-index 才会生效。   
果父元素具有 z-index，那么子元素的 z-index 将受到父元素的限制。          */
    background-color: #eee;
    color: #eee;
    border-radius: 50%;
}



.xsbox {
    width: 100%;
    bottom: 12px;
    text-align: center;
    position: absolute;
}

.xsbox label {
    margin-right: 13px;

    display: inline-block;
    width: 10px;
    position: relative;
    height: 10px;
    background-color: #ffffff;
    border: 2px solid #fff;
    border-radius: 50%;
    margin: 0 30px;



}

/* 这里用的是lable 的关联 radio的用法，不大懂         */
.dians input[type="radio"]:nth-of-type(1):checked~.xsbox label:nth-of-type(1) {
    background-color: #121111;
}

.dians input:nth-of-type(2):checked~.xsbox label:nth-of-type(2) {
    background-color: #191818;
}

.dians input:nth-of-type(3):checked~.xsbox label:nth-of-type(3) {
    background-color: #141313;
}
.dians input:nth-of-type(4):checked~.xsbox label:nth-of-type(4) {
    background-color: #141313;
}

/* 图片的切换   不懂标签       */
.dians input:nth-of-type(1):checked~.dian {
    transform: translateX(0%);
}

.dians input:nth-of-type(2):checked~.dian {
    transform: translateX(-100%);
}

.dians input:nth-of-type(3):checked~.dian {
    transform: translateX(-200%);
}

.dians input:nth-of-type(4):checked~.dian {
    transform: translateX(-300%);
}