2013.9.11
1.今天上午看了图层拖动的代码（两个实例），选择了一个简单的实例学习了，上午可能因为有些关键字没有敲对，导致代码敲好了，但是没有办法，实现自己想要的效果，经过重新对照代码一个个敲达到了想要的效果。由于不太熟悉，便把js部分重新敲了，大概的意思的理解了，大部分自己可以编写出来了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图层拖动实例</title>
<style type="text/css">
div
{
position:absolute;
background:#CC66FF;
//border:solid 2px;
height:200px;
width:260px;
}
</style>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
var a;mouseup=function()/* 鼠标在图块上面的判断，*/
{
document.on
if(!a) return;
document.all?a.releaseCapture():window.captureEvents(Event.mousemove|Event.mouseup);/*定位判断 */
a="";
};
document.onmousemove=function (d)/*鼠标离开图块上面的判断及其重定位*/
{
if(!a) return;
if(!d) d=event;
a.style.left=(d.clientX-b)+"px";
a.style.top=(d.clientY-c)+"px";
};
function $(o,e)
{
a=o;
document.all?a.setCapture():window.captureEvents(Event.mousemove);
b=e.clientX-parseInt(a.style.left);
c=e.clientY-parseInt(a.style.top);
};
</script>
</head>
<body>
<div style="left:100px; top:20px;" onmousedown="$(this,event)">
</div>
</body>
</html>
2.下午开始看九宫格的划分，完全就是div的应用，不过此时学会了css，故自己用了id和class，也遇见了一点小疑惑
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#big{
width:610px;
border:1px #0000CC solid;
height:610px;
}
.small{
width:180px;
height:180px;
border:1px #666666 solid;
margin:10px 10px 10px 10px;
background:#FFCCFF;
padding:0;
float:left;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>画格</title>
</head>
<body>
<div id="big">
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
</div>
</body>
</html>
参考代码如下
<html> <style> body { padding:0; } #bigdiv { width:410px; height:400px; border:1px #0066FF solid;}
/*bigdiv与.之间有个空格*/ #bigdiv .xxdiv { width:120px; height:120px; border:1px #CCCCCC solid; background:#F6F6F6; margin:5px 5px 5px 5px; padding: 0; float:left; } </style> <body> <div id=bigdiv> <div></div> <div class=xxdiv></div> <div class=xxdiv></div> <div class=xxdiv></div> <div class=xxdiv></div> <div class=xxdiv></div> <div class=xxdiv></div> <div class=xxdiv></div> <div class=xxdiv></div> <div class=xxdiv></div> </div> </body> </html>
3.今天下午写注释的时候发现<head>中的注释只能用/***********/, 而在<body>中则要使用<!--********-->
alert("hello world!");//对话框弹出hello world！
