牧童：

很淡雅的页面

Sun, 31 May 2009 17:21:07 +0800

很淡雅的页面

恩恩新的服务器空间调试好了下载的一些问题

Sun, 31 May 2009 01:45:36 +0800

换了空间服务商总算是弄好了抱歉啊抱歉

本站上面本地下载的出错了网盘下载的可以下载
本地下载的东西如果有人需要请在日志后面留下你的Email我发给你

自己第一个经过W3C认证没出的页面

Thu, 21 May 2009 11:23:10 +0800

这应该是我第一个完全很用心去写的一个页面了
以前做出来很久了也懒没去弄
这几天把这页面前台写了一次
嘿嘿应该是自己第一次完全使用xhtml写页面吧
还好CSS 到W3C验证了一下错误是没有不过还有几个警告额是连接上面的嘿嘿
现在放上来的只是一个首页不过首页写好以后后面的页面就很好写了
恩恩慢慢弄全部写好以后在找人把程序写好哈哈貌似要很久很久以后了

点击这里查看首页演示

一种横向产品列表

Mon, 18 May 2009 17:12:53 +0800

Html

复制内容到剪贴板程序代码

<div>
    <ul>
        <li>
            <img src="pic1.gif" alt="pic1" />
            <span>11111</span>
            <span class="text">aaaaaaaaaaaaaaa</span>
            <a href="#"></a>
        </li>
        <li>
            <img src="pic2.gif" alt="pic2" />
            <span>22222</span>
            <span class="text">bbbbbbbbbbbbbbb</span>
            <a href="#"></a>
        </li>
        <li>
            <img src="pic3.gif" alt="pic3" />
            <span>33333</span>
            <span class="text">ccccccccccccccc</span>
            <a href="#"></a>
        </li>
        <li>
            <img src="pic4.gif" alt="pic4" />
            <span>44444</span>
            <span class="text">ddddddddddddddd</span>
            <a href="#"></a>
        </li>
    </ul>
</div>

Css

复制内容到剪贴板程序代码

ul {
list-style-type:none;
padding:0;
}

li {
width:145px;
float:left;
border:4px #ddd solid;
margin-right:10px;
padding-bottom:10px;
}

img {
display:block;
margin-bottom:5px;
}

span {
color:#c00;
font-size:12px;
font-weight:700;
display:block;
padding:0 0 5px 10px;
}

.text {
color:#bbb;
font-size:11px;
font-weight:400;
}

a {
width:10px;
height:10px;
display:block;
background:transparent url(bullet3.gif) no-repeat scroll 0 0;
margin-left:120px;
}

a:hover {
background:url(bullet3_hover.gif) no-repeat;
}

css定义ulli一行多列

Thu, 14 May 2009 12:16:36 +0800

利用css让li一行多列

利用css怎么让li列表横起来呢？
看下面的例子：关键部位在于
#Login ul中的display:inline;
和#Login li中的float:left; display:block

css:

引用内容

#Login{
    width:994px;
    margin:2px;
    border: 1px solid #D4D4D4;
    padding: 0px;
}
#Login ul{display:inline; list-style-type:none; margin:0px;}
#Login li{float:left; display:block; text-align:left;margin-left:0px;}
.Login1{ padding-top:5px;}
.Login2{ padding-top:5px;}
.Login3{ padding-top:5px;}
.Login4{ padding-top:5px;}
.LoginDiv{ padding-top:5px; width:4px;}

代码:

引用内容

<div id="Login">
<ul>
<li class="Login1">Username</li>
<li class="LoginDiv"></li>
<li class="Login2"><input name="textfield" type="text" class="username" id="textfield" size="15" /></li>
<li class="LoginDiv"></li>
<li class="Login3">Password</li>
<li class="LoginDiv"></li>
<li class="Login4"><input name="textfield2" type="text" class="password" id="textfield2" size="15" /></li>
</ul>
</div>

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

系统后台登陆页面

Tue, 12 May 2009 16:11:10 +0800

一些登陆页面很不错哦

131个web 2.0样式 for Fireworks

Tue, 05 May 2009 11:26:11 +0800

以前很少用Fireworks 这段时间公司电脑貌似用photo 老出错内存也不够用了额就开始用Fireworks
陶了几个样式喜欢的拿去玩玩吧

[使用网络硬盘存储的文件下载慢的话大家见谅]

点击下载此文件

一个软件企业网站

Mon, 27 Apr 2009 15:31:47 +0800

这应该是我最近做的了吧我发现我现在一年基本做的站点也就2-3个嘿嘿~~~
好少真正的去设计站点了
弄一个站点基本也是东一点西一点的挪来用用哈哈

图我是传到网盘上貌似被压缩了哭泣

美化select

Mon, 13 Apr 2009 09:31:26 +0800

1、可批量美化select控件。
2、可以有onchange句柄。
3、触发onchange的函数可带参数。
3、可以得到select的值。
4、可设置像select类似的滚动条（如大于或等于8个数目时出现滚动条）
5、可设置宽度和高度

API参考：
//首先生成一个simulateSelect的实例
//构造函数的第一个可选参数为触发onchange的函数，其它的为onchange函数的参数；
c = new simulateSelect(s1onchange, "never-online");
//设置select的CSS，第一个参数为控件的主要CSS、第二个为选中条目时的CSS、第三个为没有选中条目时的CSS
c.style("CtlSelect2", "selected2", "unselected2");
//设置select的宽度和高度；
c.width = 320;
c.height = 20;
//初始化参数为：select控件的ID，可以用逗号分离，进行批量转换；
c.init("s1,s2,s3");

HTML代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> simulate combox control - <a href="http://www.never-online.net" target="_blank" rel="external"><a href="http://www.never-online.net" target="_blank" rel="external">http://www.never-online.net</a></a> </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
body, input
{
	font-family: verdana;
	font-size: 9pt;
}
h1
{
	font-family: tahoma;
	font-size: 22pt;
	text-align: left;
}
pre
{
	font-size: 9pt;
	font-family: verdana;
	border: 1px solid #006600;
	width: 400px;
	padding: 10px;
	background: #ffffff;
	color: #006600;
}
.CtlSelect
{
	border: 1px solid #006600;
	font-family: verdana;
	height: 20px;
	color: #006600;
	background: #ffffff;
	/*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/
}
.selected
{
	background: #006600;
	color: #ffffff;
	height: 20px;
}
.unselected
{
	height: 20px;
	color: #006600;
	line-height: 120%;
	border-bottom: 1px solid #006600;
}
.CtlSelect1
{
	border: 1px solid #003399;
	font-family: verdana;
	height: 20px;
	color: #003399;
	background: #ffffff;
	/*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/
}
.selected1
{
	background: #003399;
	color: #ffffff;
	height: 20px;
}
.unselected1
{
	height: 20px;
	color: #003399;
	line-height: 120%;
	border-bottom: 1px solid #003399;
}
.CtlSelect2
{
	border: 1px solid #990000;
	font-family: verdana;
	height: 20px;
	color: #990000;
	background: #ffffff;
	/*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/
}
.selected2
{
	background: #990000;
	color: #ffffff;
	height: 20px;
}
.unselected2
{
	height: 20px;
	color: #990000;
	line-height: 120%;
	border-bottom: 1px solid #990000;
}
.copyright
{
	margin-top: 10px;
	font-size: 9pt;
	text-align: center;
	color: #333;
	font-weight: bold;
}
</style>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
//-------------------------------------------------------------
//  @ Module: simulate select control, IE only.
//  @ Debug in: IE 6.0
//  @ Script by: blueDestiny, never-online
//  @ Updated: 2006-3-22
//  @ Version: 1.0 apha
//  @ Email: blueDestiny [at] 126.com
//  @ Website: <a href="http://www.never-online.net" target="_blank" rel="external"><a href="http://www.never-online.net" target="_blank" rel="external">http://www.never-online.net</a></a>
//  @ Please Hold this item please.
//
//  API
//  @ class: simulateSelect()
//
//  @ object.style(ctlStyle[,selStyle][,unselStyle])
//    ctlStyle: main control combox css class name
//    selStyle: when mouseover or option focus css class name
//    unselStyle: options blur's css class name
//
//  @ object.width=(widthPX)
//    widthPX must be a digit number.
//
//  @ object.height=(heightPX)
//    heightPX must be a digit number.
//
//  @ object.getValue(ctlSelID)
//    ctlSelID is the unique select control ID
//
//  -------------- for the next Version ----------
//  @ object.readOnly = (blnReadOnly)
//    blnReadOnly must be a boolean type or a number type.
//  @ object.addEvent(w, h)
//    w: fire handler's event.
//    h: handler function.
//-------------------------------------------------------------
function $(objID)
{
	return document.getElementById(objID);
};
function Offset(e)
{
	var t = e.offsetTop;
	var l = e.offsetLeft;
	var w = e.offsetWidth;
	var h = e.offsetHeight-2;
	while(e=e.offsetParent)
	{
		t+=e.offsetTop;
		l+=e.offsetLeft;
	}
	return {
		top : t,
		left : l,
		width : w,
		height : h
	}
}
//-----------------------------------------------
function simulateSelect(handlerFunction) { with(this)
{
	this.IDs = [];
	this.name = this;
	this.value = null;
	this.onchangeArgs = [];
	this.onchange = handlerFunction;
	this.height = 20;
	this.width = null;
	this.number = null;
	this.ctlStyle = "CtlSelect";
	this.selStyle = "selected";
	this.unselStyle = "unselected";
	this.elementPrefix = "e__";
	this.inputPrefix = "i__";
	this.containerPrefix = "c__";
	this.buttonPrefix = "b__";
	//  property for beta Version
	//  can editable combox
	this.readonly = true;
	if( arguments.length>0 )
	for(var i=0; i<arguments.length; i++)
	onchangeArgs[i-1] = arguments[i];
	return this;
}};
simulateSelect.prototype.init = function(ctlSelIDs) { with(this)
{
	eval(name).append(ctlSelIDs);
	eval(name).simulates();
}};
simulateSelect.prototype.style = function() { with(this)
{
	ctlStyle = arguments[0];
	selStyle = arguments[1];
	unselStyle = arguments[2];
}};
//-----------------------------------------------
simulateSelect.prototype.append = function(ctlSelIDs) { with(this)
{
	if( ctlSelIDs.indexOf(",")>0 )
	{
		var arrCtlSel = ctlSelIDs.split(",");
		for(var i=0; i<arrCtlSel.length; i++)
		{
			IDs.push(arrCtlSel[i]);
		}
	}
	else
	IDs.push(ctlSelIDs);
}};
simulateSelect.prototype.checkupOnMouseDown = function(e) { with(this)
{
	// here compatible mf.
	var el = e ? e.srcElement : e.target;
	if( el.id.indexOf(elementPrefix)>-1 || 
	el.id.indexOf(inputPrefix)>-1 || 
	el.id.indexOf(containerPrefix)>-1 || 
	el.id.indexOf(buttonPrefix)>-1 )
	{
		return;
	}
	else
	{
		for(var i=0; i<eval(name).IDs.length; i++)
		if( $(containerPrefix + IDs[i]) )
		$(containerPrefix + IDs[i]).style.display = "none";
	}
}};
simulateSelect.prototype.simulates = function() { with(this)
{
	for(var i=0; i<IDs.length; i++)
	eval(name).simulate(IDs[i]);
}};
simulateSelect.prototype.simulate = function(ctlSelID) { with (this)
{
	var input;
	var button;
	var object;
	var offset;
	object = $(ctlSelID);
	offset = Offset(object);
	input = document.createElement("INPUT");
	button = document.createElement("BUTTON");
	button.setAttribute("id", buttonPrefix + ctlSelID);
	//button.value = "⊿";
	button.value = "6";
	button.style.fontFamily = "Webdings, Marlett";
	button.style.background = "";
	button.onclick = input.onclick = function()
	{
		this.blur();
		eval(name).expand(ctlSelID, offset);
	};
	input.onselectstart = function()
	{
		eval(name).expand(ctlSelID, offset);
		event.returnValue = false; 
	};
	input.setAttribute("id", inputPrefix + ctlSelID);
	input.title = button.title = "click expand options";
	input.style.cursor = button.style.cursor = "default";
	input.className = button.className = ctlStyle;
	input.style.width = (width>0 ? width : object.offsetWidth);
	height ? input.style.height=button.style.height=height : "";
	input.value = value = object[0].text;
	if( readonly==true ) input.readOnly=true;
	// this method is only IE.
	object.insertAdjacentElement("afterEnd",button);
	object.insertAdjacentElement("afterEnd",input);
	object.style.display = 'none';
}};
simulateSelect.prototype.expand = function(ctlSelID, offset) { with(this)
{
	var div;
	var object = $(ctlSelID);
	if( !$(containerPrefix + ctlSelID) )
	{
		div = document.createElement("DIV");
		div.style.position = "absolute";
		div.style.display = "block";
		div.setAttribute("id", containerPrefix + ctlSelID);
		div.className = ctlStyle;
		div.style.left = offset.left;
		div.style.top = offset.top + offset.height;
		div.style.width = (width ? width : offset.width) + 20;
		if( number )
		{
			div.style.height = height * number;
			div.style.overflow = "auto";
		}
		document.body.appendChild(div);
		for(var i=0; i
</SCRIPT>
<h1> simulate combox control </h1>
<h4> demonstrate </h4>
<p>
normal select: <select id="s0">
<option value="- please select your options -"> - please select your options -</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
<option value="5">option5</option>
</select>
</p>
<p>
simulate select: <select id="s1">
<option value="- please select your options -"> - please select your options -</option>
<option value="1">1option1</option>
<option value="2">1option2</option>
<option value="3">1option3</option>
<option value="4">1option4</option>
<option value="5">1option5</option>
</select>
</p>
<p>
scroll simulate select: <select id="s2">
<option value="- please select your options -"> - please select your options -</option>
<option value="1">2option1</option>
<option value="2">2option2</option>
<option value="3">2option3</option>
<option value="4">2option4</option>
<option value="5">2option6</option>
<option value="5">2option7</option>
<option value="5">2option8</option>
<option value="5">2option9</option>
<option value="5">2option10</option>
<option value="5">2option11</option>
<option value="5">2option12</option>
<option value="5">2option13</option>
<option value="5">2option14</option>
</select>
</p>
<p>
onchange handler fire: <select id="s3">
<option value="- please select your options -"> - please select your options -</option>
<option value="1">3option1</option>
<option value="2">3option2</option>
<option value="3">3option3</option>
<option value="4">3option4</option>
<option value="5">3option5</option>
</select>
</p>
<button onclick="alert(a.getValue('s1') + '\n\n' + b.getValue('s2') + '\n\n' + c.getValue('s3'))" class="CtlSelect"> Get value </button>
<button onclick="alert('next version')"  class="CtlSelect">append item</button>
<button onclick="alert('next version')"  class="CtlSelect">remove item</button>
<h4> description </h4>
<pre>
//-------------------------------------------------------------
//  @ Module: simulate select control, IE only.
//  @ Debug in: IE 6.0
//  @ Script by: blueDestiny, never-online
//  @ Updated: 2006-3-22
//  @ Version: 1.0 apha
//  @ Email: blueDestiny [at] 126.com
//  @ Website: <a href="http://www.never-online.net" target="_blank" rel="external"><a href="http://www.never-online.net" target="_blank" rel="external">http://www.never-online.net</a></a>
//  @ Please Hold this item please.
//
//  API
//  @ class: simulateSelect()
//
//  @ object.style(ctlStyle[,selStyle][,unselStyle])
//    ctlStyle: main control combox css class name
//    selStyle: when mouseover or option focus css class name
//    unselStyle: options blur's css class name
//
//  @ object.width=(widthPX)
//    widthPX must be a digit number.
//
//  @ object.height=(heightPX)
//    heightPX must be a digit number.
//
//  @ object.getValue(ctlSelID)
//    ctlSelID is the unique select control ID
//
//  -------------- for the next Version ----------
//  @ object.readOnly = (blnReadOnly)
//    blnReadOnly must be a boolean type or a number type.
//  @ object.addEvent(w, h)
//    w: fire handler's event.
//    h: handler function.
//-------------------------------------------------------------
</pre>
<div class="copyright">
Power By blueDestiny, never-online
<a href="http://www.never-online.net" target="_blank" rel="external">http://www.never-online.net</a>
</div>
</BODY>
</HTML>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

可移动层

Mon, 09 Mar 2009 10:22:43 +0800

几个可以随便移动的层在很多地方还是可以用到的

用层模拟可移动的小窗口
用层模拟可移动的小窗口``` 可用于网站的提示信息哦

HTML代码

<html>
<head>
<title>_xWin</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META NAME="Description" CONTENT="<a href="http://www.xuemu.net" target="_blank" rel="external">http://www.xuemu.net</a>">
<style type='text/css'>

</style>
<script language=JScript>

</script>
<script language='JScript'>

</script>
</head>
<base target="_blank">
<body onselectstart='return false' oncontextmenu='return false' >
<a onclick="ShowHide('1',null);return false;" href="">窗口1</a>
<a onclick="ShowHide('2',null);return false;" href="">窗口2</a>
<a onclick="ShowHide('3',null);return false;" href="">窗口3</a>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

带阴影的可拖动的浮动层

HTML代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyPixbot</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">

</script>
<style type="text/css">

</style>
</head>
<body>
<div id="assist" style="position:absolute; left:15px; top:68px; width:185px; z-index:1;display:none;" class="win" onMouseDown="MM_dragLayer('assist','',0,0,150,18,true,false,-1,-1,-1,-1,15,68,100,'',false,'')">
		<table width="180" border="1" cellpadding="0" cellspacing="0">
				<tr>
						<td class="caption">SeekAssist</td>
						<td width="14" align="center"><a href="#" onclick="with(MM_findObj('assistwin').style)display=display=='none'?'':'none'">%</a></td>
						<td width="14" align="center"><a href="#" onClick="MM_showHideLayers('assist','','hide')">X</a></td>
				</tr>
				<tr id="assistwin">
						<td height="100" colspan="3" bordercolor="#eeeeee"> </td>
				</tr>
  </table>
        <br>
</div>
<script>loadwin('assist')</script>
<div id="rank" style="position:absolute; left:15px; top:194px; width:185px; z-index:1;display:none;" class="win" onMouseDown="MM_dragLayer('rank','',0,0,150,18,true,false,-1,-1,-1,-1,15,194,100,'',false,'')">
		<table width="180" border="1" cellpadding="0" cellspacing="0">
				<tr>
						<td class="caption">SeekRank</td>
						<td width="14" align="center"><a href="#" onclick="with(MM_findObj('rankwin').style)display=display=='none'?'':'none'">%</a></td>
						<td width="14" align="center"><a href="#" onClick="MM_showHideLayers('assist','','inherit','rank','','hide')">X</a></td>
				</tr>
				<tr id="rankwin">
						<td height="100" colspan="3" bordercolor="#eeeeee"> </td>
				</tr>
  </table>
		<br>
</div>
<script>setTimeout("loadwin('rank')",500)</script>
<div id="mycolor" style="position:absolute; left:15px; top:320px; width:185px; z-index:1;display:none;" class="win" onMouseDown="MM_dragLayer('mycolor','',0,0,150,18,true,false,-1,-1,-1,-1,15,320,100,'',false,'')">
		<table width="180" border="1" cellpadding="0" cellspacing="0">
				<tr>
						<td class="caption">MyColor</td>
						<td width="14" align="center"><a href="#" onclick="with(MM_findObj('mycolorwin').style)display=display=='none'?'':'none'">%</a></td>
						<td width="14" align="center"><a href="#" onClick="MM_showHideLayers('mycolor','','hide')">X</a></td>
				</tr>
				<tr id="mycolorwin">
						<td height="100" colspan="3" bordercolor="#eeeeee"><table width="100%" border="0" cellspacing="0" cellpadding="2">
								<tr>
										<td align="center"><a href="#" onclick="cs('#00CCFF','#f6f6f6','#eeeeee')">Default</a></td>
								</tr>
								<tr>
										<td align="center"><a href="#" onclick="cs('red','#eeccee','#eeddee')">StyleSheet#1</a></td>
								</tr>
								<tr>
										<td align="center"><a href="#" onclick="cs('#99ccff','#eeeeee','#ccddff')">StyleSheet#2</a></td>
								</tr>
								<tr>
										<td align="center"><a href="#" onclick="cs('#ff9999','#ffffff','#ffeeff')">StyleSheet#3</a></td>
								</tr>
								<tr>
										<td align="center"><a href="#" onclick="cs('skyblue','#eeeeee','#99ddff')">StyleSheet#4</a></td>
								</tr>
								<tr>
										<td align="center"><a href="#" onclick="cs('#009900','#eeffee','#ddffdd')">StyleSheet#5</a></td>
								</tr>
						</table></td>
				</tr>
  </table>
		<br>
</div>
<script>setTimeout("loadwin('mycolor')",1000)</script>
<div id="results" style="position:absolute; left:204px; top:68px; width:575px; z-index:1;display:none;" class="win" onMouseDown="MM_dragLayer('results','',0,0,400,18,true,false,-1,-1,-1,-1,204,68,50,'',false,'')">
		<table width="570" border="1" cellpadding="0" cellspacing="0">
				<tr>
						<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
										<tr>
												<td class="caption">Results</td>
												<td width="12" class="button"><a href="#" onClick="with(MM_findObj('resultswin').style)display=display=='none'?'':'none'">%</a></td>
												<td width="12" class="button"><a href="#" onClick="MM_showHideLayers('results','','inherit')">X</a></td>
										</tr>
						</table></td>
				</tr>
				<tr>
						<td height="20" bordercolor="#eeeeee"><input name="url" type="text" value="<a href="http://www.google.com/search?q=ezlee" target="_blank" rel="external">http://www.google.com/search?q=ezlee</a>" size="100">
						<a href="#" onclick="mainframe.location=url.value">Search</a></td>
				</tr>
				<tr id="resultswin">
						<td height="318" valign="top" class="navframe"><aiframe name="mainframe" id="mainframe" src="<a href="http://www.google.com/search?q=ezlee" target="_blank" rel="external">http://www.google.com/search?q=ezlee</a>" width="100%" height="100%" frameborder="0" scrolling="auto"><font color="#FF0000">Welcome!</font></aiframe></td>
				</tr>
				<tr>
						<td height="14" class="statusbar">Ready!</td>
		        </tr>
  </table>
		<br>
</div>
<script>setTimeout("loadwin('results')",2000)</script>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

HTML代码

<html>
<head>
<title>DRAG the DIV</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
*{font-size:12px}
.dragTable{
	font-size:12px;
	border-top:1px solid #3366cc;
	margin-bottom: 10px;
	width:100%;
	background-color:#FFFFFF;
}
td{vertical-align:top;}
.dragTR{
	cursor:move;
	color:#7787cc;
	background-color:#e5eef9;
	height:20px;
	padding-left:5px;
	font-weight:bold;
}
#parentTable{
	border-collapse:collapse;
	letter-spacing:25px;
}
</style>
<script defer>
/****JoeLee************E-MAIL:hktx@163.com****QQ:48293707*****11:09 2006-2-9******/
	var Drag={dragged:false,
		ao:null,
		tdiv:null,
dragStart:function(){
	Drag.ao=event.srcElement;
	if((Drag.ao.tagName=="TD")||(Drag.ao.tagName=="TR")){
		Drag.ao=Drag.ao.offsetParent;
		Drag.ao.style.zIndex=100;
	}else
		return;
	Drag.dragged=true;
	Drag.tdiv=document.createElement("div");
	Drag.tdiv.innerHTML=Drag.ao.outerHTML;
	Drag.ao.style.border="1px dashed red";
	Drag.tdiv.style.display="block";
	Drag.tdiv.style.position="absolute";
	Drag.tdiv.style.filter="alpha(opacity=70)";
	Drag.tdiv.style.cursor="move";
	Drag.tdiv.style.border="1px solid #000000";
	Drag.tdiv.style.width=Drag.ao.offsetWidth;
	Drag.tdiv.style.height=Drag.ao.offsetHeight;
	Drag.tdiv.style.top=Drag.getInfo(Drag.ao).top;
	Drag.tdiv.style.left=Drag.getInfo(Drag.ao).left;
	document.body.appendChild(Drag.tdiv);
	Drag.lastX=event.clientX;
	Drag.lastY=event.clientY;
	Drag.lastLeft=Drag.tdiv.style.left;
	Drag.lastTop=Drag.tdiv.style.top;
},
 draging:function(){//重要:判断MOUSE的位置
	if(!Drag.dragged||Drag.ao==null)return;
	var tX=event.clientX;
	var tY=event.clientY;
	Drag.tdiv.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;
	Drag.tdiv.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;
	for(var i=0;i<parentTable.cells.length;i++){
		var parentCell=Drag.getInfo(parentTable.cells[i]);
		if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
			var subTables=parentTable.cells[i].getElementsByTagName("table");
			if(subTables.length==0){
				if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
					parentTable.cells[i].appendChild(Drag.ao);
				}
				break;
			}
			for(var j=0;j<subTables.length;j++){
				var subTable=Drag.getInfo(subTables[j]);
				if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){
					parentTable.cells[i].insertBefore(Drag.ao,subTables[j]);
					break;
				}else{
					parentTable.cells[i].appendChild(Drag.ao);
				}	
			}
		}
	}
}
,
 dragEnd:function(){
	if(!Drag.dragged)return;
	Drag.dragged=false;
	Drag.mm=Drag.repos(150,15);
	Drag.ao.style.borderWidth="0px";
	Drag.ao.style.borderTop="1px solid #3366cc";
	Drag.tdiv.style.borderWidth="0px";
	Drag.ao.style.zIndex=1;
},
getInfo:function(o){//取得坐标
	var to=new Object();
	to.left=to.right=to.top=to.bottom=0;
	var twidth=o.offsetWidth;
	var theight=o.offsetHeight;
	while(o!=document.body){
		to.left+=o.offsetLeft;
		to.top+=o.offsetTop;
		o=o.offsetParent;
	}
		to.right=to.left+twidth;
		to.bottom=to.top+theight;
	return to;
},
repos:function(aa,ab){
	var f=Drag.tdiv.filters.alpha.opacity;
	var tl=parseInt(Drag.getInfo(Drag.tdiv).left);
	var tt=parseInt(Drag.getInfo(Drag.tdiv).top);
	var kl=(tl-Drag.getInfo(Drag.ao).left)/ab;
	var kt=(tt-Drag.getInfo(Drag.ao).top)/ab;
	var kf=f/ab;
	return setInterval(function(){if(ab<1){
							clearInterval(Drag.mm);
							Drag.tdiv.removeNode(true);
							Drag.ao=null;
							return;
						}
					ab--;
					tl-=kl;
					tt-=kt;
					f-=kf;
					Drag.tdiv.style.left=parseInt(tl)+"px";
					Drag.tdiv.style.top=parseInt(tt)+"px";
					Drag.tdiv.filters.alpha.opacity=f;
				}
,aa/ab)
},
 inint:function(){//初始化
	for(var i=0;i<parentTable.cells.length;i++){
		var subTables=parentTable.cells[i].getElementsByTagName("table");
		for(var j=0;j<subTables.length;j++){
			if(subTables[j].className!="dragTable")break;
			subTables[j].rows[0].className="dragTR";
			subTables[j].rows[0].attachEvent("onmousedown",Drag.dragStart);
		}
	}
	document.onmousemove=Drag.draging;
	document.onmouseup=Drag.dragEnd;
}
//end of Object Drag
}
Drag.inint();
function _show(str){
	var w=window.open('','');
	var d=w.document;
	d.open();
	str=str.replace(/=(?!")(.*?)(?!")( |>)/g,"=\"$1\"$2");
	str=str.replace(/(<)(.*?)(>)/g,"<span style='color:red;'><$2></span><br />");
	str=str.replace(/\r/g,"<br />\n");
	d.write(str);
}
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="10" width="100%" height=500 id="parentTable">
<tr >
	<td width="25%" valgin="top">
		<table border=0 class="dragTable" cellspacing="0">
			<tr>
				<td><b>GMAIL</b></td>
			</tr>
			<tr>
				<td>暂时无法显示GMAIL内容</td>
			<tr>
		</table><table border=0 class="dragTable" cellspacing="0">
			<tr>
				<td>新浪体育</td>
			</tr>
			<tr>
				<td>解剖威队独门利器FW28 2万转引擎匹配超级变速器颁奖：辛吉斯欣喜能以冠军起步
 印度搭档创下纪录法新社前瞻冬奥短道速滑：中韩唱主角 美加施冷箭</td>
			<tr>
		</table>
		<table border=0 class="dragTable" cellspacing="0">
			<tr>
				<td>焦点</td>
			</tr>
			<tr>
				<td>京广线中断4小时20临客返汉晚点 中国新闻网-湖北分社 - 所有 235 相关报道 »哈马斯已有总理人选 
                解放日报报业集团 - 所有 489 相关报道 »陈水扁是两岸关系麻烦制造者 武汉晨报 - 所有 179 相关报道 »</td>
			<tr>
		</table>
	</td>
	<td width="25%">
		<table border=0 class="dragTable" cellspacing="0">
			<tr>
				<td>中关村在线</td>
			</tr>
			<tr>
				<td>新年行情速递 双敏板卡低价推荐 终于等到了，映泰6600GT一降降一百 罗技G15游戏键盘热力促销，代购价仅529元 </td>
			<tr>
		</table></td>
	<td width="25%">
		<table border=0 class="dragTable" cellspacing="0">
			<tr>
				<td>网易商业</td>
			</tr>
			<tr>
				<td>上海GDP增幅去年出现回落应对反倾销 中国鞋企联手对抗欧盟尹家绪操盘南方汽车 长安谋求曲线整体境外上市</td>
			<tr>
		</table>		<table border=0 class="dragTable" cellspacing="0">
			<tr>
				<td>黑可天下</td>
			</tr>
			<tr>
				<td>上海GDP增幅去年出现回落应对反倾销 中国鞋企联手对抗欧盟尹家绪操盘南方汽车 长安谋求曲线整体境外上市</td>
			<tr>
		</table>
	</td>
</tr>
</table>
<input type="button" value="SHOW" onClick="_show(document.documentElement.innerHTML)" />
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

可拖动窗口，附带鼠标控制渐变透明，开启关闭功能

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

牧童：

很淡雅的页面

恩恩 新的服务器空间调试好了 下载的一些问题

自己第一个经过W3C认证没出的页面

一种横向产品列表

css定义ulli一行多列

系统后台登陆页面

131个web 2.0样式 for Fireworks

一个软件 企业网站

美化select

可移动层

恩恩新的服务器空间调试好了下载的一些问题

一个软件企业网站