虚拟选座css实现过程，

还没有学到js，所以这个是个虚拟选座。

1 在html中先写出座位，让input和label相关联，每一行是一个ul，每个座位是一个li，每个id值都是唯一的。

2 座位分为3种类型，已购买的位置不能再点击，需要用到input的disable属性，其他的都是一样的可以购买的白色背景，当点击的时候更换背景图片就可以了。

3 没有位置的地方，就把背景图片隐藏或者把i隐藏也可以。

html代码

<ul>
    <li><input type="radio" name="zuowei" id="01" disabled><label for="01"><i class="wu"></i></label></li>
    <li><input type="radio" name="zuowei" id="02"><label for="02"><i></i></label></li>
    <li><input type="radio" name="zuowei" id="03"><label for="03"><i></i></label></li>
    <li><input type="radio" name="zuowei" id="4" disabled><label for="4"><i class="xuan"></i></label></li>
    <li><input type="radio" name="zuowei" id="5"><label for="5"><i></i></label></li>
    <li><input type="radio" name="zuowei" id="6"><label for="6"><i></i></label></li>
    <li><input type="radio" name="zuowei" id="7"><label for="7"><i></i></label></li>
    <li><input type="radio" name="zuowei" id="8"><label for="8"><i></i></label></li>
    <li><input type="radio" name="zuowei" id="9"><label for="9"><i></i></label></li>
    <li><input type="radio" name="zuowei" id="10"><label for="10"><i></i></label></li>
    <li><input type="radio" name="zuowei" id="11"><label for="11"><i></i></label></li>
    <li><input type="radio" name="zuowei" id="12"><label for="12"><i></i></label></li>
    <li><input type="radio" name="zuowei" id="13"><label for="13"><i></i></label></li>
    <li><input type="radio" name="zuowei" id="14"><label for="14"><i></i></label></li>
    <li><input type="radio" name="zuowei" id="15"><label for="15"><i></i></label></li>
</ul>

css代码

/*座位*/
 input{
    display: none;
}
li{
    list-style: none;
}
i{
    display: inline-block;
    width:34px;
    height: 31px;
    background-image:url("../imgs/Screenshot_2016-10-21-17-14-02_03.png");
    background-size: 34px 31px;
    margin-right: 20px;
}
.wu{
   visibility: hidden;
}
.xuan{
background-image:url("../imgs/Screenshot_2016-10-21-17-14-02_05.png");
}
ul{
    display: flex;
}
input:checked+label>i{
    background-image:url("../imgs/Screenshot_2016-10-21-17-14-02_07.png");
}