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;
	 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{
			610px;
			border:1px #0000CC solid;
			height:610px;
		}
	.small{
			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 { 410px; height:400px; border:1px #0066FF solid;}
/*bigdiv与.之间有个空格*/
#bigdiv .xxdiv { 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！　