CSS3選擇滑桿按鈕程式碼

<頭>
<元字元集=“UTF-8”>


<風格>
.tab-選單{
頂部邊距：20px；
高度：26px；
溢出：隱藏；
位置：相對；
邊框半徑：20px；
}
ul{
# 填充：0;
邊距：0；
列表樣式：無；
}
李{
高度：24px；
行高：24px;
向左飄浮;＃＃＃ 文字對齊：居中；
位置：相對；
字體大小：12px;
}
.tab-選單跨度{
邊距：4px;
顯示：內聯區塊；
高度：18px；
位置：絕對；
左：0；
頂部：0；
邊框半徑：20px；
過渡：左.4s；
-webkit-transition: 左 .4s;
-moz-transition: 左 .4s;
}
李：懸停{
遊標：指針；
}
.tworow{
寬度：160px；
背景顏色: rgba(224, 229, 232, 1);
}
.tworow跨度{
寬度：72px；
背景顏色: rgba(0, 54, 80, 1);
}
.tworow .active{
白顏色;＃＃＃ }
.tworow李{
寬度：80px；
顏色:rgba(0, 54, 80, 1);
}
.八件行李{
寬度：50px；
白顏色;＃＃＃ }
.eightrow .active{
顏色：#10aefc;
}
.八行{
寬度：700px；
背景：#10aefc;
}
.八行跨度{
寬度：42px;
背景：白色；
}
</風格>

</頭>
<內文>
<中心>

;

<div class="tab-menu tworow">
    <span id="thirdbg"></span>
    <ul id="hourlist">
#         <li class="active" type="1">24h</li>
        <li type="2">48h</li>
    </ul>
</div>
</center>
<script src="script/jquery.min.js"></script>
<script src="script/slide.js"></script>
<script>
new Slideicon($("#list"),{
index:0,
cover:$("#bg"),
callback:function (data) {
console.log(data)
}
});
new Slideicon($("#hourlist"),{
index:0,
cover:$("#thirdbg"),
callback:function (data) {
console.log(data)
}
});
</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

這是CSS3選擇滑桿按鈕代碼，需要的朋友可以直接下載使用，更多特效代碼盡在PHP中文網。