css：input：radio单选框以及label标签实现图片手风琴

css：input：radio单选框实现图片手风琴

最终实现效果

源码

• html代码块

 <div class="wrap">
        <input type="radio" name="a" id="i1" checked>
        <label for="i1" class="lab lab1">O N E</label>
        <div class="box">
            <div class="zp"><img src="01.jpg" alt=""></div>
        </div>
        <input type="radio" name="a" id="i2">
        <label for="i2" class="lab lab2">T O W</label>
        <div class="box">
            <div class="zp"><img src="02.jpg" alt=""></div>
        </div>
        <input type="radio" name="a" id="i3">
        <label for="i3" class="lab lab3"><Table>T H R E E</Table></label>
        <div class="box">
            <div class="zp"><img src="03.jpg" alt=""></div>
        </div>
        <input type="radio" name="a" id="i4">
        <label for="i4" class="lab lab4">F O U R</label>
        <div class="box">
            <div class="zp"><img src="03.jpg" alt=""></div>
        </div>
    </div>

• css代码块

<style>
        body{
            background-color: #400b4f;
        }
        .wrap{
            width: 530px;
            overflow: hidden;
            margin: 0 auto;
            margin-top: 100px;
        }
        .lab{
            display: block;
            width: 50px;
            height: 500px;
            border-radius: 25px;
            color: #fff;
            font-size: 12px;
            text-align: center;
            padding-top: 64px;
            box-sizing: border-box;
            padding-left: 19px;
            padding-right: 19px;
            line-height: 40px;
            font-weight: bold;
            background-color: #ff00fe;
            margin-right: 10px;
            float: left;
        }

        .box{
            display: block;
            width: 0;
            height: 500px;
            float: left;
            background-color: #a085a7;
            border-radius: 25px;
            overflow: hidden;
            transition: 0.5s;
        }
        .zp{
            width: 210px;
            height: 292px;
            box-sizing: border-box;
            margin-top: 100px;
            margin-left: 36px;
            border: 5px solid #fff;
        }
        .zp img{
            width: 100%;
            height: 100%;
        }
        input:checked +.lab +.box{
            width: 282px;
            margin: 0 5px 0 5px;
        }
        input:checked +.lab{
            margin: 0;
            background-color: #ffcc33;
        }
        input{
            display: none;
        }
    </style>

事项

• input：radio 属性值——单选框
  radio包含有name、value、checked等属性，要实现单选功能，必须要使得众多radio单选框在同一个group（组）中，也就是radio的name属性值必须相同，必须保证在同一组才可以实现单选功能，这是前提！
• label标签——标签为 input 元素定义标注（标记）。（可以让input处于获取焦点或选中状）
  label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控 件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
  标签的 for 属性应当与相关元素的 id 属性相同.
• display属性
  none 此元素不会被显示。
  block 此元素将显示为块级元素，此元素前后会带有换行符。
  inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
  inline-block 行内块元素。
• ‘+’相邻兄弟选择器
  相邻兄弟元素选择器可以选择到紧接着该元素后的相邻元素。（而这应为相同父元素）
  例：选择到p元素后的span元素，且二者在同一父元素下，即为p元素的下一个相邻兄弟元素
  p+span{属性：属性值；}
• checked 选择器
  选取所有选中的复选框或单选按钮。