CSS3 ?? ???? ?? ??
<!DOCTYPE html>
<html lang="ko">
<??>
<meta charset="UTF-8">
<title>jQuery+CSS3選擇滑塊按鈕代碼 </title>
<???>
.? ??{
?? ??: 20px;
??: 26px;
????: ??;
??: ???;
??? ??: 20px;
}
ul{
??: 0;
??: 0;
?? ???: ??;
}
?{
??: 24px;
? ??: 24px;
??: ??;
??? ??: ??;
??: ???;
?? ??: 12px;
}
.? ?? ??{
??: 4px;
?????: ??? ??;
??: 18px;
??: ??;
??: 0;
??: 0;
??? ??: 20px;
??: ?? 0.4?;
-webkit-transition: 0.4? ??;
-moz-??: 0.4? ??;
}
?:??{
??: ???;
}
.tworow{
??: 160px;
???: rgba(224, 229, 232, 1);
}
.tworow ??{
??: 72px;
???: rgba(0, 54, 80, 1);
}
.tworow .active{
??: ??;
}
.tworow ?{
??: 80px;
??:rgba(0, 54, 80, 1);
}
.eightrow ?{
??: 50px;
??: ??;
}
.eightrow .active{
??: #10aefc;
}
.eightrow{
??: 700px;
??: #10aefc;
}
.eightrow ??{
??: 42px;
??: ??;
}
</???>
</??>
<?>
<??>
<div class="tab-menu sixrow">
<span id="bg"></span>
<ul id="??">
<li class="active" type="1">24h</li>
<li type="2">48??</li>
<li type="3">72h</li>
<li type="4">96h</li>
<li type="5">120h</li>
<li type="6">144h</li>
<li type="7">168h</li>
<li type="8">192h</li>
<li type="9">216h</li>
<li type="10">240h</li>
<li type="11">264h</li>
<li type="12">288h</li>
<li type="13">312h</li>
<li type="14">336h</li>
</ul>
</div>
<div class="tab-menu tworow">
<span id="thirdbg"></span>
<ul id="?? ??">
~
~?????????????????????????
</ul>
</div>
</center>
<script src="script/jquery.min.js"></script>
<script src="script/slide.js"></script>
<????>
??? ???????($("#list"),{
???:0,
??:$("#bg"),
??:??(???) {
console.log(???)
}
});
??? Slideicon($("#hourlist"),{
???:0,
??:$("#thirdbg"),
??:??(???) {
console.log(???)
}
});
<div style="text-align:center;margin:50px 0; ??:normal 14px/24px 'MicroSoft YaHei';">
</div>
</??>