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>

<div id="c">
   <input class="floatbtn" type="button" value ="睡觉" >
</div>

<h4>一百行的表,只是为了让页面超过一页，可以测试拉动页面时，飘浮按钮固定不动：</h4>
<div id="longtable">
</div>

</body>
</html>

猜你喜欢