CSS飄浮按鈕學習
學習了一下使用CSS完成按鈕飄浮功能。由於是第一次玩CSS，所以主要是熟悉CSS語法。至於飄浮功能，就一個屬性position:fixed，完成。
本程式碼實現功能：
1. 實現三個按鈕飄浮
2. 按鈕實現滑鼠移上時，背景色變化。
3. 按鈕按下時，呼叫 JS彈個對話方塊。
注意事項：
1. CSS的定義只能在<head>中
2. CSS中#後面跟id名, .(點）後面跟class名
3. css的margin 和padding學習，使用兩個div, 一大框一小框，然後設定小框在大框裡面。設定小框的margin和padding，熟悉其含義
以下為程式碼全文。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>模擬與測試</title>
<script charset="utf-8" type="text/javascript">
function TurnOnLight()
{
alert("快開啟燈");
}
<!--以下的表格只是為了讓頁面超過一頁，可以測試拉動頁面時，飄浮按鈕固定不動-->
window.onload = function()
{
var drawTableHtml = "<table border=\"1\">";
for (i = 0; i < 50; i++)
{
drawTableHtml += "<tr><td>100</td></tr>";
}
drawTableHtml += "</table>";
// 生成一百行的表
document.getElementById("longtable").innerHTML = drawTableHtml;
}
</script>
<style type="text/css">
.floatbtn{width:60px; height:30px; background:rgb(175, 100, 100); position:fixed; right:100px; top:100px; margin: 2px; padding: 2}
.floatbtn:hover{width:60px; height:30px; background:#F00; position:fixed; right:100px; top:100px; margin: 2px; padding: 2; cursor:hand;}
#b .floatbtn{top:150px;}
#c .floatbtn{top:200px;}
</style>
</head>
<body>
<div id="a">
<input class="floatbtn" type="button" value ="開燈" onclick="TurnOnLight()" >
<div id="b">
<input class="floatbtn" type="button" value ="關燈" >
</div>
<!--<input type="button" value ="按鈕" width="5000" height="5000">-->
<div id="c">
<input class="floatbtn" type="button" value ="睡覺" >
</div>
<h4>一百行的表,只是為了讓頁面超過一頁，可以測試拉動頁面時，飄浮按鈕固定不動：</h4>
<div id="longtable">
</div>
</body>
</html>