萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> 純CSS做的帶開關的台燈
純CSS做的帶開關的台燈
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style>
#info {text-align:center;}
#info h2 {width:750px; text-align:left;}
.off {cursor:pointer; background:#060; color:#ddd; font-size:12px;}
.off:hover {cursor:pointer; background:#060; color:#fff; font-size:12px;}
#switchbox2 {position:relative; width:200px; border:10px solid #697210; text-align:center; background:#060; margin:25px auto 100px auto;}
#toplight2 {display:block; width:70px; height:4px; font-size:1px; border-top:70px solid #888; border-left:65px solid #888; border-right:65px solid #888; background:#800;}
#leftback {display:block; width:30px; height:100px; background:#888; float:left;}
#leftlamp {display:block; width:35px; height:3px; font-size:1px; border-bottom:97px solid #c00; border-left:35px solid #888; float:left; background:#c00;}
#rightlamp {display:block; width:35px; height:3px; font-size:1px; border-bottom:97px solid #e00; border-right:35px solid #888; float:left; background:#c00;}
#rightback {display:block; width:30px; height:100px; background:#888; float:left;}
#botlight2 {clear:both; display:block; width:140px; height:4px; font-size:1px; border-bottom:40px solid #888; border-left:30px solid #888; border-right:30px solid #888; background:#800;}
#botback {display:block; width:200px; height:112px; background:#888;}
#stemtop {position:absolute; left:96px; top:178px; display:block; width:4px; height:15px; font-size:1px; background:#844; border-right:4px solid #a88;}
#stemtop2 {position:absolute; left:85px; top:193px; display:block; width:30px; height:3px; font-size:1px; background:#844; border-bottom:2px solid #422;}
#stemtop3 {position:absolute; left:85px; top:198px; display:block; width:20px; height:2px; font-size:1px; background:#422; border-top:5px solid #633; border-left:5px solid #888; border-right:5px solid #888;}
#stemtop4 {position:absolute; left:65px; top:205px; display:block; width:10px; height:2px; font-size:1px; border-bottom:100px solid #633; border-left:25px solid #888; background:#422;}
#stemtop5 {position:absolute; left:100px; top:205px; display:block; width:10px; height:2px; font-size:1px; border-bottom:100px solid #844; border-right:25px solid #888; background:#633;}
#stembase {position:absolute; left:60px; top:307px; display:block; width:40px; height:10px; font-size:1px; border-right:40px solid #844; background:#633;}
#table {position:absolute; left:10px; top:317px; display:block; width:180px; height:10px; font-size:1px; border-top:2px solid #aaa; background:#050;}
a#switch2 {display:block; text-decoration:none; color:#fff; background:#c00; font-size:12px;}
a#switch2:visited {text-decoration:none; color:#fff; background:#c00; font-size:12px;}
a#switch2:hover {text-decoration:none; color:#fff; background:#c00; font-size:12px;}
a#switch2:hover #toplight2 {border-top:70px solid #f8f8f8; border-left:65px solid #ccc; border-right:65px solid #ccc; background:#b00;}
a#switch2:hover #leftback {background:#ccc;}
a#switch2:hover #leftlamp {border-bottom:97px solid #e00; border-left:35px solid #ccc; background:#d00;}
a#switch2:hover #rightlamp {border-bottom:97px solid #f00; border-right:35px solid #ccc; background:#d00;}
a#switch2:hover #rightback {background:#ccc;}
a#switch2:hover #botlight2 {border-bottom:40px solid #f8f8f8; border-left:30px solid #ccc; border-right:30px solid #ccc; background:#b00;}
a#switch2:hover #botback {background:#f8f8f8;}
a#switch2:hover #stemtop {background:#a66; border-right:4px solid #caa;}
a#switch2:hover #stemtop2 {background:#a66; border-bottom:2px solid #633;}
a#switch2:hover #stemtop3 {background:#633; border-top:5px solid #744; border-left:5px solid #f8f8f8; border-right:5px solid #f8f8f8;}
a#switch2:hover #stemtop4 {border-bottom:100px solid #844; border-left:25px solid #f8f8f8; background:#866;}
a#switch2:hover #stemtop5 {border-bottom:100px solid #a66; border-right:25px solid #f8f8f8; background:#866;}
a#switch2:hover #stembase {border-right:40px solid #b88; background:#a66;}
a#switch2:hover #table {border-top:2px solid #eee; background:#070;}
a#switch2:active #toplight2 {border-top:70px solid #f8f8f8; border-left:65px solid #ccc; border-right:65px solid #ccc; background:#b00;}
a#switch2:active #leftback {background:#ccc;}
a#switch2:active #leftlamp {border-bottom:97px solid #e00; border-left:35px solid #ccc; background:#d00;}
a#switch2:active #rightlamp {border-bottom:97px solid #f00; border-right:35px solid #ccc; background:#d00;}
a#switch2:active #rightback {background:#ccc;}
a#switch2:active #botlight2 {border-bottom:40px solid #f8f8f8; border-left:30px solid #ccc; border-right:30px solid #ccc; background:#b00;}
a#switch2:active #botback {background:#f8f8f8;}
a#switch2:active #stemtop {background:#a66; border-right:4px solid #caa;}
a#switch2:active #stemtop2 {background:#a66; border-bottom:2px solid #633;}
a#switch2:active #stemtop3 {background:#633; border-top:5px solid #744; border-left:5px solid #f8f8f8; border-right:5px solid #f8f8f8;}
a#switch2:active #stemtop4 {border-bottom:100px solid #844; border-left:25px solid #f8f8f8; background:#866;}
a#switch2:active #stemtop5 {border-bottom:100px solid #a66; border-right:25px solid #f8f8f8; background:#866;}
a#switch2:active #stembase {border-right:40px solid #b88; background:#a66;}
a#switch2:active #table {border-top:2px solid #eee; background:#070;}
a#switch2:focus #toplight2 {border-top:70px solid #f8f8f8; border-left:65px solid #ccc; border-right:65px solid #ccc; background:#b00;}
a#switch2:focus #leftback {background:#ccc;}
a#switch2:focus #leftlamp {border-bottom:97px solid #e00; border-left:35px solid #ccc; background:#d00;}
a#switch2:focus #rightlamp {border-bottom:97px solid #f00; border-right:35px solid #ccc; background:#d00;}
a#switch2:focus #rightback {background:#ccc;}
a#switch2:focus #botlight2 {border-bottom:40px solid #f8f8f8; border-left:30px solid #ccc; border-right:30px solid #ccc; background:#b00;}
a#switch2:focus #botback {background:#f8f8f8;}
a#switch2:focus #stemtop {background:#a66; border-right:4px solid #caa;}
a#switch2:focus #stemtop2 {background:#a66; border-bottom:2px solid #633;}
a#switch2:focus #stemtop3 {background:#633; border-top:5px solid #744; border-left:5px solid #f8f8f8; border-right:5px solid #f8f8f8;}
a#switch2:focus #stemtop4 {border-bottom:100px solid #844; border-left:25px solid #f8f8f8; background:#866;}
a#switch2:focus #stemtop5 {border-bottom:100px solid #a66; border-right:25px solid #f8f8f8; background:#866;}
a#switch2:focus #stembase {border-right:40px solid #b88; background:#a66;}
a#switch2:focus #table {border-top:2px solid #eee; background:#070;}
</style>
</head>
<body>
<div id="switchbox2">
<a id="switch2" href="#nogo">
<span id="toplight2"></span>
<span id="leftback"></span>
<span id="leftlamp"></span>
<span id="rightlamp"></span>
<span id="rightback"></span>
<span id="botlight2"></span>
<span id="botback"></span>
<span id="stemtop"></span>
<span id="stemtop2"></span>
<span id="stemtop3
- 上一頁:純CSS定義雙色文字
- 下一頁:CSS條狀圖表進度條
