标题 <br />#Con{width:900px; /*宽度*/ height:500px;/*高度*/ background:#9933FF;/*背景颜色*/<br /> position:relative;}<br />#content{width:900px; height:500px; background:#669999;}<br />#content div{width:225px; height:500px; background:#3366FF;<br /> float:left;/*在水平方向显示*/ position:relative;/*相对定位*/<br /> overflow:hidden;}<br />#content div span{width:225px; height:500px; display:block; position:absolute; top:0px; left:225px;}<br />input#but1:checked ~ #content div span:nth-child(1){background-image:url("images/1.jpg");}<br /><br />input#but2:checked ~ #content div span:nth-child(2){background-image:url("images/2.jpg");}<br />input#but3:checked ~ #content div span:nth-child(3){background-image:url("images/3.jpg");}<br />input#but4:checked ~ #content div span:nth-child(4){background-image:url("images/4.jpg");}*/<br /><br />#content div:nth-child(1) span{background-position:0px 0px;}<br />#content div:nth-child(2) span{background-position:-225px 0px;}<br />#content div:nth-child(3) span{background-position:-450px 0px;}<br />#content div:nth-child(4) span{background-position:-675px 0px;}<br /><br />input#but1:checked ~ #content div span:nth-child(1),<br />input#but2:checked ~ #content div span:nth-child(2),<br />input#but3:checked ~ #content div span:nth-child(3),<br />input#but4:checked ~ #content div span:nth-child(4)<br />{left:0px;-webkit-transition:left 0.5s ease;}<br /><br />label{width:30px; height:30px; background:#33FFFF; display:block; border-radius:15px;<br /> text-align:center;/*水平方向显示*/line-height:30px;/*在竖直方向距中*/<br /> position:absolute;z-index:333;top:450px;}<br /><br />input#but1 + label{left:700px;}<br />input#but2 + label{left:750px;}<br />input#but3 + label{left:800px;}<br />input#but4 + label{left:850px;}<br /><br />input:checked + label{background:#fff;border:5px solid #33FFFF;border-radius:20px;}<br />input{display:none;/*隐藏*/}<br /> 1 2 3 4 效果图：
