电影院选座的座位写法
效果图：
用ul进行的布局：
将每一列看做是一个ul，巧用emmet插件
ul[class="ultwo"]>(li>(input[id="1$$"]+label[for="1$$"]>img))*12
ul[class="ultwo"]>(li>(input[id="2$$"]+label[for="2$$"]>img))*12
html的写法：
<div class="pailie">
<ul class="ulone">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
<li><a href="">9</a></li>
<li><a href="">10</a></li>
<li><a href="">11</a></li>
</ul>
<ul class="ultwo">
<li><input type="checkbox" id="001"/><label for="001"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="002"/><label for="002"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="003"/><label for="003"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="004"/><label for="004"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="005"/><label for="005"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="006"/><label for="006"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="007"/><label for="007"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="008"/><label for="008"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="009"/><label for="009"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="010"/><label for="010"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="011"/><label for="011"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
</ul>
<ul class="ultwo">
<li><input type="checkbox" id="101"/><label for="101"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="102"/><label for="102"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="103"/><label for="103"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="104"/><label for="104"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="105"/><label for="105"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="106"/><label for="106"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="107"/><label for="107"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="108"/><label for="108"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="109"/><label for="109"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="110"/><label for="110"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="111"/><label for="111"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
</ul>
<ul class="ultwo">
<li><input type="checkbox" id="201"/><label for="201"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="202"/><label for="202"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="203"/><label for="203"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="204"/><label for="204"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="205"/><label for="205"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="206"/><label for="206"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="207"/><label for="207"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="208"/><label for="208"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="209"/><label for="209"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="210"/><label for="210"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="211"/><label for="211"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
</ul>
<ul class="ultwo">
<li><input type="checkbox" id="301"/><label for="301"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="302"/><label for="302"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="303"/><label for="303"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="304"/><label for="304"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="305"/><label for="305"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="306"/><label for="306"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="307"/><label for="307"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="308"/><label for="308"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="309"/><label for="309"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="310"/><label for="310"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="311"/><label for="311"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
</ul>
<ul class="ultwo">
<li><input type="checkbox" id="401"/><label for="401"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="402"/><label for="402"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="403"/><label for="403"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="404"/><label for="404"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="405"/><label for="405"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="406"/><label for="406"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="407"/><label for="407"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="408"/><label for="408"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="409"/><label for="409"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="410"/><label for="410"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="411"/><label for="411"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
</ul>
<ul class="ultwo">
<li><input type="checkbox" id="501"/><label for="501"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="502"/><label for="502"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="503"/><label for="503"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="504"/><label for="504"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="505"/><label for="505"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="506"/><label for="506"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="507"/><label for="507"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="508"/><label for="508"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="509"/><label for="509"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="510"/><label for="510"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="511"/><label for="511"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
</ul>
<ul class="ultwo">
<li><input type="checkbox" id="601"/><label for="601"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="602"/><label for="602"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="603"/><label for="603"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="604"/><label for="604"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="605"/><label for="605"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_05.png" alt=""/></label></li>
<li><input type="checkbox" id="606"/><label for="606"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="607"/><label for="607"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="608"/><label for="608"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="609"/><label for="609"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="610"/><label for="610"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="611"/><label for="611"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
</ul>
<ul class="ultwo">
<li><input type="checkbox" id="701"/><label for="701"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="702"/><label for="702"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="703"/><label for="703"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="704"/><label for="704"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="705"/><label for="705"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_05.png" alt=""/></label></li>
<li><input type="checkbox" id="706"/><label for="706"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="707"/><label for="707"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="708"/><label for="708"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="709"/><label for="709"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="710"/><label for="710"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="711"/><label for="711"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
</ul>
<ul class="ultwo">
<li><input type="checkbox" id="801"/><label for="801"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="802"/><label for="802"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="803"/><label for="803"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="804"/><label for="804"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="805"/><label for="805"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="806"/><label for="806"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="807"/><label for="807"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="808"/><label for="808"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="809"/><label for="809"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="810"/><label for="810"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="811"/><label for="811"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
</ul>
<ul class="ultwo">
<li><input type="checkbox" id="901"/><label for="901"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="902"/><label for="902"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="903"/><label for="903"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="904"/><label for="904"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="905"/><label for="905"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="906"/><label for="906"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="907"/><label for="907"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="908"/><label for="908"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="909"/><label for="909"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="910"/><label for="910"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="911"/><label for="911"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
</ul>
<ul class="ultwo">
<li><input type="checkbox" id="1001"/><label for="1001"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1002"/><label for="1002"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1003"/><label for="1003"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1004"/><label for="1004"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1005"/><label for="1005"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1006"/><label for="1006"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1007"/><label for="1007"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1008"/><label for="1008"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1009"/><label for="1009"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1010"/><label for="1010"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1011"/><label for="1011"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
</ul>
<ul class="ultwo">
<li><input type="checkbox" id="1101"/><label for="1101"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1102"/><label for="1102"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1103"/><label for="1103"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1104"/><label for="1104"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1105"/><label for="1105"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1106"/><label for="1106"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1107"/><label for="1107"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1108"/><label for="1108"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1109"/><label for="1109"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1110"/><label for="1110"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1111"/><label for="1111"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
</ul>
<ul class="ultwo">
<li><input type="checkbox" id="1201"/><label for="1201"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1202"/><label for="1202"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1203"/><label for="1203"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1204"/><label for="1204"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1205"/><label for="1205"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1206"/><label for="1206"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1207"/><label for="1207"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1208"/><label for="1208"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1209"/><label for="1209"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1210"/><label for="1210"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1211"/><label for="1211"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
</ul>
<ul class="ultwo">
<li><input type="checkbox" id="1301"/><label for="1301"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1302"/><label for="1302"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1303"/><label for="1303"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1304"/><label for="1304"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1305"/><label for="1305"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1306"/><label for="1306"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1307"/><label for="1307"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1308"/><label for="1308"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1309"/><label for="1309"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1310"/><label for="1310"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1311"/><label for="1311"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
</ul>
<ul class="ultwo">
<li><input type="checkbox" id="1401"/><label for="1401"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1402"/><label for="1402"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1403"/><label for="1403"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1404"/><label for="1404"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1405"/><label for="1405"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1406"/><label for="1406"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1407"/><label for="1407"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1408"/><label for="1408"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1409"/><label for="1409"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1410"/><label for="1410"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
<li><input type="checkbox" id="1411"/><label for="1411"><img src="../img/images_seat/Screenshot_2016-10-21-17-14-02_03.png" alt=""/></label></li>
</ul>
</div>
css写法：
.xuanzuo{
background-color: #f0f0f0;
padding-left: .3rem;
padding-bottom: .4rem;
}
.xuanzuo>div:nth-of-type(1){
width: 100%;
height: .64rem;
text-align: center;
line-height: .64rem;
display: flex;
justify-content: center;
}
.xuanzuo>div:nth-of-type(1)>a{
width: 6.3rem;
height: .64rem;
background: #dcdcdc;
border-bottom-left-radius: .8rem .64rem;
border-bottom-right-radius: .8rem .64rem;
}
.pailie{
display: flex;
}
.ulone a{
color: white;
}
.ulone{
height: 7.15rem;
width: .46rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #a8a8a8;
border-radius: .4rem;
padding: .2rem 0;
margin-right: .46rem;
}
.ulone li{
margin: .055rem;
}
.ulone li:nth-of-type(4){
margin-bottom: .75rem;
}
.ultwo img{
display: inline-block;
width: .48rem;
height: .42rem;
}
.ultwo input{
display: none;
}
.ultwo{
height: 7.15rem;
width: .46rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: .4rem;
padding: .2rem 0;
margin-right: .15rem;
}
.ultwo li{
margin: .055rem 0;
position: relative;
}
.ultwo li:nth-of-type(4){
margin-bottom: .75rem;
}
.ultwo label:after{
display: none;
}
.ultwo input:checked+label:after{
content: "";
display: inline-block;
width: .48rem;
height: .42rem;
background-image: url("../img/images_seat/Screenshot_2016-10-21-17-14-02_07.png");
background-size: .48rem .42rem;
position: absolute;
top: .08rem;
left: 0;
}
.pailie>ul:nth-of-type(2)>li:nth-of-type(1){
visibility: hidden;
}
.pailie>ul:nth-of-type(11)>li:nth-of-type(n+5){
visibility: hidden;
}
.pailie>ul:nth-of-type(11)>li:nth-of-type(11){
visibility: visible !important;
}
.pailie>ul:nth-of-type(12)>li:nth-of-type(n+5){
visibility: hidden;
}
.pailie>ul:nth-of-type(12)>li:nth-of-type(11){
visibility: visible !important;
}
