类似博客中拖动模块代码
<head>
<title>移动的窗口</title>
<style>
*{font-size:12px}
.dragTable{
font-size:12px;
border-top:1px solid #3366cc;
margin-bottom: 10px;
width:100%;
background-color:#FFFFFF;
}
.dragTR{
cursor:move;
color:#7787cc;
background-color:#e5eef9;
}
td{vertical-align:top;}
#parentTable{
border-collapse:collapse;
letter-spacing:25px;
}
</style>
<script defer>
var draged=false;
tdiv=null;
function dragStart(){
ao=event.srcElement;
if((ao.tagName=="TD")||(ao.tagName=="TR"))ao=ao.offsetParent;
else return;
draged=true;
tdiv=document.createElement("div");
tdiv.innerHTML=ao.outerHTML;
tdiv.style.display="block";
tdiv.style.position="absolute";
tdiv.style.filter="alpha(opacity=70)";
tdiv.style.cursor="move";
tdiv.style.width=ao.offsetWidth;
tdiv.style.height=ao.offsetHeight;
tdiv.style.top=getInfo(ao).top;
tdiv.style.left=getInfo(ao).left;
document.body.appendChild(tdiv);
lastX=event.clientX;
lastY=event.clientY;
lastLeft=tdiv.style.left;
lastTop=tdiv.style.top;
try{
ao.dragDrop();
}catch(e){}
}
function draging(){//重要:判断MOUSE的位置
if(!draged)return;
var tX=event.clientX;
var tY=event.clientY;
tdiv.style.left=parseInt(lastLeft)+tX-lastX;
tdiv.style.top=parseInt(lastTop)+tY-lastY;
for(var i=0;i<parentTable.cells.length;i++){
var parentCell=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(ao);
}
break;
}
for(var j=0;j<subTables.length;j++){
var subTable=getInfo(subTables[j]);
if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){
parentTable.cells[i].insertBefore(ao,subTables[j]);
break;
}else{
parentTable.cells[i].appendChild(ao);
}
}
}
}
}
function dragEnd(){
if(!draged)return;
draged=false;
mm=ff(150,15);
}
function getInfo(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;
}
function ff(aa,ab){//从GOOGLE网站来,用于恢复位置
var ac=parseInt(getInfo(tdiv).left);
var ad=parseInt(getInfo(tdiv).top);
var ae=(ac-getInfo(ao).left)/ab;
var af=(ad-getInfo(ao).top)/ab;
return setInterval(function(){if(ab<1){
clearInterval(mm);
tdiv.removeNode(true);
ao=null;
return
}
ab--;
ac-=ae;
ad-=af;
tdiv.style.left=parseInt(ac)+"px";
tdiv.style.top=parseInt(ad)+"px"
}
,aa/ab)
}
function inint(){//初始化
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",dragStart);
subTables[j].attachEvent("ondrag",draging);
subTables[j].attachEvent("ondragend",dragEnd);
}
}
}
inint();
</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>AJAX</td>
</tr>
<tr>
<td id="div4"></td>
<tr>
</table>
<table border=0 class="dragTable" cellspacing="0">
<tr>
<td>datagrid</td>
</tr>
<tr>
<td id="div5"></td>
<tr>
</table>
<table border=0 class="dragTable" cellspacing="0">
<tr>
<td>asp.net</td>
</tr>
<tr>
<td id="div3"></td>
<tr>
</table></td>
<td width="25%">
<table border=0 class="dragTable" cellspacing="0">
<tr>
<td>C#.net</td>
</tr>
<tr>
<td id="div2" > </td>
<tr>
</table></td>
<td width="25%">
<table border=0 class="dragTable" cellspacing="0" id="td3">
<tr>
<td >javascrip<a href="#" onClick="document.all.td3.style.display='none'" onMouseDown="document.all.imag1.src='Icon2.gif'" onMouseUp="document.all.imag1.src='Icon.gif'" onFocus="this.blur()" ><img src="Icon.gif" width="16" height="14" id="imag1" border="0"></a></td>
</tr>
<tr>
<td id="dv" ><div id="div10" ></div></td>
<tr>
</table>
</td>
</tr>
</table>
</body>
</html>
传统的生成静态页面的方法大家都很清楚，无非就是以下两种：
方案一：
1、每增加/修改一个栏目的信息的时候，就生成一次该栏目（包括父栏目）的页面；
2、每增加/修改一篇文章的时候，就生成一次该文章的页面，还有与其相关的栏目（包括父栏目）的页面。
方案二：
1、管理用户先增加/修改栏目/文章，最后再批量地选择欲更新的栏目/文章生成静态。
那么，不管是方案一还是方案二都有以下几个共同点：
1、所有的静态页面都是由管理员来操作，而前台用户只要浏览即可；
2、当某一个栏目文章很多的时候，生成静态会非常地慢；
3、当批量移动/删除文章的时候，生成静态会非常地慢。
....
因为我也是从这两种方法中走出来的，而我有一个内网数据库系统有80多万数据，我切身的感觉到：如果大量地更新文章的时候，服务器快吃不消了；如果哪天感觉页面不美观了，更改模板的时候需要重新生成，简直是……
也有朋友建议我：将栏目/文章的内容输出到XML文件中，最终html通过asp/asp.net+XML+XSL来输出，如此一来可以避免换模板的烦恼……
但是我还是觉得不满意……
最近想到了一种思路，并初步在拥有80多万数据的内网数据库系统中试运行了，但不知道服务器负载会不会加大？？？
我是如此做的：
1、管理用户每修改一个栏目的信息的时候，就删除该栏目（包括父栏目）对应的静态页面；
2、管理用户每修改一篇文章的时候，就删除该文章对应的静态页面，还有与其相关的栏目（包括父栏目）对应的静态页面；
3、某一个具体的栏目/文章的第一个浏览用户访问时，先判断对应的静态页面是否存在，如果存在，则直接Server.Transfer到静态页面，否则生成静态页面内容后再Server.Transfer过去。
有人会问：这有什么目的？？
其实我也不能正确地回答你如此做是否可行，只是我个人觉得：一来，将管理用户生成静态页面的操作权限留给了第一个访问用户，避免了一段时间内大量地占用服务器资源，恐怕此时别想让网站被流畅的浏览（直到静态页面全部生成，使服务器资源被释放）；二来批量删除页面的效率肯定比批量读取数据库记录并生成静态高很多吧；三来嘛，不用生成全部内容，没人关心的内容就不生成静态，节省空间（玩笑话了）。
Response.Expires = -1是什么意思啊
Response.expires 该属性指定了在浏览器上缓冲存储的页，距过期还有多少时间
1、在Asp页面首部加入Response.Buffer = True Response.ExpiresAbsolute = Now() - 1 Response.Expires = 0 Response.CacheControl = "no-cache" Response.AddHeader "Pragma", "No-Cache"
2、在HtML代码中加入<HEAD><META HTTP-EQUIV="Pragma" CONTENT="no-cache"><META HTTP-EQUIV="Cache-Control" CONTENT="no-cache"><META HTTP-EQUIV="Expires" CONTENT="0"></HEAD>
3、在重新调用原页面的时候在给页面传一个参数Href="****.asp?random()"
4、<body onLoad="javascriptocument.yourFormName.reset()">
5、Content.Response.Cache.SetCacheability(HttpCaxheability,NoCache);
专栏文章将结束关于文本部分的XHTML的讲解。那么这篇主讲的内容涉及链接、标题、插入、删除、上下标、分割线、换行等标签。
网页教学网
我们都知道网页的最大特性是“链接”，是的这个在我们现在看起来习以为常的东西，让我们的生活发生了巨大的变化，是这个小小的标签成就了这个世界上无数的互联网天才。那么让我们看看这个标签的真面目：
<a href="URL" >文本区</a>
，就是这个简单的标签，其实大家都在使用，用Dreamweaver可以很简单的添加链接。但是尽管如此我们还是需要知道A的属性是什么，这样才能更好的利用它。A是个内联标签，也就是说它本身并不会产生分行。他是流于文本之中的无素。那么我们都知道内联元素是不能包含块元素的。那就是说在A中不能包含段落、DIV等这些块级的元素。那么你工作中是否有这样的情况呢？是否在A里加了无数的块级标签呢？那从现在开始改掉这个坏习惯，这样不光可以避免一些没必要的BUG问题，同时也能给GOOGLE等这些搜索引擎一个好印象，多点印象分。当然除此之外振之还推荐在大家伙在A中加入titile属性。例：
<a href="URL" title="这可用以解释或是显示完整的文本内容">文本区</a>
。为什么这么做呢，我这里有这样一篇文章《当标题不能显示完整的时候》，大家可以看一下，这只是加title属性其中一个小小的用处，但是作用非常有效。 网页教学网
链接标签中的href＝“URL”这个URL是个非常强大的东西，当然这不是我们这个专栏的内容，但是也非常推荐读者们可以认真阅读一下相关的知识。我从百度百科中找到了相关文档，请大家点击阅读（站外链接请读者们选择新窗口阅读）。关于链接就暂时只讲这么多，如有什么疑问请通过文后的联系信息与我联系或是在线给我留言。
标题几乎是所有文章都会有的要素，也是我们用以识实与索引文章的重要元素。我们通过标题去感知文章内的核心。那么你知道吗？合理使用标题标签会让你的文章更受关注。我们都知道XHTML给我们提供了h1~h6，六个标题标签，那么我们如何分配这六个标题标签的使用呢？下面给出一些建议：h1，在浏览器中显示最大，那么自然用来表示最大的标题，对于一个网站来说哪个标题才是最大的？是LOGO，我们通常会在网站的最前面先标注这个网站的名称。所以h1就用来放LOGO，当然如果你的网站没有LOGO，只有一个网站名称，那也可以。当然振之是不推荐在大家在h1中放个图片。我们完全可以通过CSS来实现以图换字。并且推荐网页中h1只出现一次。
网页教学网
当h1找到了专用的功能，那么担任内容标是，或是基它标题的重担就要放在另外几个标题标签上了。在余下的几个标题中h5与h6在浏览器默认显示字体是小于正常文本字体的。那么推荐h5与h6只作为免责声明或是版权通告来使用。这样即表明重要性，又不会太过明显影响阅读。对于标题标签的使用尽可能的注意一下他们之间的等级关系。当然标题的使用还是需要根据实际使用来决定。这里只是给出个建议。标题标签是块线元素，但是他并不能再包含块级元素了，只能包含内联的元素，比如链接、图像，换行之类的。记得有个朋友前两天在文章中提到过关于标题的内容，但是写法就有错了，他把链接写在了H1标签的外面，把H1包起来了，这样的写法是不推荐的。也不符合标准思维容易给以后的学习产生不好导向。 网页教学网
我们的文章难免会有错误的地方，那么有错就要改，但是有时候我们需要告诉读者这段是被删除的但是又能让读者看到。那么删除标签的作用就产生了。以前我们会使用<s></s>或是<strike></strike>来得到一个删除线的效果。但是这仅表是一个删除线的效果，语义上没有DEL来得更为明确，所以这里我要告诉大家放弃以前的方式，采用<del></del>这个标签。同样能表达我们需要的效果，并且意义更为直接明确。那么除了删除有时我们还需要对删除的部分作出一些添加与修改。那么时候这个标签就非常有作用了那就是插入标签<ins></ins>。相信不用我说大家也知道如何使用这两个标签，但是千万别忘记了给这两个标签加上两个重要的属性：cite与datetime。解释与时间。解释不用说了，只要用文字注明为什么要删除或是为什么要插入就可以了。但是这个时间需要明确一下格式。严格的格式是：YYYY-MM-DDThh:mm:ssTZD。呵呵与我们平时用的差不多但是有区别，其中T是表示时间段开始的必需字符，而TZD则是表示时区，Z是表是格林威治标准时间。一秀的写法是：2008-03-25T14:26:22Z Webjx.Com
在所有的标签中有两上标签是样式标签，但是却没有被禁用，因为这两个标签所表述的内容很特别，上下标，<sup>上标</sup>,<sub>下标</sub>。
Webjx.Com
这两个标签用得到机率比较小，但是上标应该还是会常用到的，比如温度中的摄氏度的上的小圆圈，当然现有有专业的字符对应“℃”，还有我们常看到书中的脚注上标[1]。
hr，分平分隔线，这个标签与换行标签只要注意标签的写法就可以了<hr /><br />
关于文本部分的标签就讲到这里，当然标签可能还有很多，但是一些不推荐使用的，不常用的，这里就不再推荐，有兴趣的可以搜索一下相关的内空阅读一下即可。下一篇将引入CSS，一点点的美化我们的文档。
网站栏目策划
相对于网站页面及功能规划，网站栏目规划的重要性常被忽略。其实，网站栏目规划对于网站的成败有着非常直接的关系，网站栏目兼具以下两个功能，二者不可或缺。 Webjx.Com
第一、提纲挈领，点题明义。 Webjx.Com
网速越来越快，网络的信息越来越丰富，浏览者却越来越缺乏浏览耐心。打开网站不超过10秒钟，一旦找不到自己所需的信息，网站就会被浏览者毫不客气地关掉。要让浏览者停下匆匆的脚步，就要清晰地给到他们网站内容的“提纲”,也就是网站的栏目。 Webjx.Com
网站栏目的规划，其实也是对网站内容的高度提炼。即使是文字再优美的书籍，如果缺乏清晰的纲要和结构，恐怕也会被淹没在书本的海洋中。网站也是如此，不管网站的内容有多精彩，缺乏准确的栏目提炼，也难以引起浏览者的关注。
网页教学网
因此，网站的栏目规划首先要做到“提纲挈领、点题明义”，用最简练的语言提炼出网站中每一个部分的内容，清晰地告诉浏览者网站在说什么，有哪些信息和功能。 网页教学网
第二、指引迷途，清晰导航
网页教学网
网站的内容越多，浏览者也越容易迷失。除了“提纲”的作用之外，网站栏目还应该为浏览者提供清晰直观的指引，帮助浏览者方便地到达网站的所有页面。
网页教学网
网站栏目的导航作用，通常包括以下四种情况： Webjx.Com
1、全局导航
全局导航可以帮助用户随时去到网站的任何一个栏目。并可以轻松跳转到另一个栏目。通常来说，全局导航的位置是固定的，以减少浏览者查找的时间。
2、路径导航 Webjx.Com
路径导航显示了用户浏览页面的所属栏目及路径，帮助用户访问该页面的上下级栏目，从而更完整地了解网站信息。
3、快捷导航
网页教学网
对于网站的老用户而言，需要快捷地到达所需栏目，快捷导航为这些用户提供直观的栏目链接，减少用户的点击次数和时间，提升浏览效率。 网页教学网
4、相关导航
为了增加用户的停留时间，网站策划者需要充分考虑浏览者的需求，为页面设置相关导航，让浏览者可以方便地去到所关注的相关页面，从而增进对企业的了解，提升合作机率。 Webjx.Com
归根结底，成功的栏目规划，还是基于对用户需求的理解。对于用户和需求理解得越准确，越深入，网站的栏目也就越具吸引力，能够留住越多的潜在客户。 网页教学网
网站页面策划
网站页面是企业网站营销策略的最终表现层，也是用户访问网站的直接接触层。同时，网站页面的规划也最容易让项目团队产生分歧：
网页设计师说：我最知道审美的标准，对于网页设计，我最有发言权；
网站开发者说：网站程序是我开发的，我最知道我的程序要如何呈现给用户； Webjx.Com
企业决策者说：我最了解我的企业和我的客户，我最能判断他们需要怎样的网站；
网站策划者说：网站的定位和规划源自于我，我才是最终的决断者；
每个人说的都没有错，但是每个人却都只看到了问题的一个方面。对于网页设计的评估，最有发言权的当然还是网站的用户，然而用户却无法明确地告诉我们，他们想要的是怎样的网页，停留或者离开网站是他们表达意见的最直接方法。好的网站策划者除了要听取团队中各个角色的意见之外，还要善于从用户的浏览行为中捕捉用户的意见。
除此之外，建议网站策划者在做网页规划时，遵循以下原则： 网页教学网
1、符合客户的行业属性及企业特点。
在客户打开网页的一瞬间，让客户直观地感受到企业所要传递的理念及特征，如网页色彩、图片、布局等等。 网页教学网
2、符合用户的浏览习惯。
Webjx.Com
根据网页内容的重要性进行排序，让用户用最少的眼球移动和鼠标移动，找到所需信息。 Webjx.Com
3、符合用户的使用习惯。
根据网页用户的使用习惯，将用户最常使用的功能放置于醒目的位置，便利于用户的查找及使用。
4、图文搭配，重点突出。
Webjx.Com
用户对于图片的认知程度远高于对文字的认知程度，适当的使用图片可以提高用户的关注度。此外，确立页面的视觉焦点也很重要，过多的干扰元素会让用户不知所措。 网页教学网
5、利于搜索引擎优化 Webjx.Com
减少FLASH和大图片的使用，多用文字及描述，以便于搜索引擎更容易收录网站，让用户更容易找到所需内容。
相关文章
- 有一种方法，可以不打开网站而直接查看到这个网站的源代码.. 这样可以有效地防止误入恶意网站... 在浏览器地址栏输入： view-source:http://...2016-09-20
- <?php require('path.inc.php'); header('content-Type: text/html; charset=utf-8'); $borough_id = intval($_GET['id']); if(!$borough_id){ echo ' ...2016-11-25
- 本文实例讲述了JS基于Mootools实现的个性菜单效果代码。分享给大家供大家参考，具体如下：这里演示基于Mootools做的带动画的垂直型菜单，是一个初学者写的，用来学习Mootools的使用有帮助，下载时请注意要将外部引用的mootools...2015-10-23
- 本文实例讲述了JS+CSS实现分类动态选择及移动功能效果代码。分享给大家供大家参考，具体如下：这是一个类似选项卡功能的选择插件，与普通的TAb区别是加入了动画效果，多用于商品类网站，用作商品分类功能，不过其它网站也可以用，...2015-10-21
- 本文实例讲述了JS实现自定义简单网页软键盘效果。分享给大家供大家参考，具体如下：这是一款自定义的简单点的网页软键盘，没有使用任何控件，仅是为了练习JavaScript编写水平，安全性方面没有过多考虑，有顾虑的可以不用，目的是学...2015-11-08
- php 取除连续空格与换行代码，这些我们都用到str_replace与正则函数 第一种： $content=str_replace("n","",$content); echo $content; 第二种： $content=preg_replac...2016-11-25
- php简单用户登陆程序代码 这些教程很对初学者来讲是很有用的哦，这款就下面这一点点代码了哦。 <center> <p> </p> <p> </p> <form name="form1...2016-11-25
- 公司一些wordpress网站由于下载的插件存在恶意代码，导致整个服务器所有网站PHP文件都存在恶意代码，就写了个简单的脚本清除。恶意代码示例...2015-10-23
- 其实挺简单的就是if(navigator.userAgent.indexOf('UCBrowser') > -1) {alert("uc浏览器");}else｛//不是uc浏览器执行的操作｝如果想测试某个浏览器的特征可以通过如下方法获取JS获取浏览器信息 浏览器代码名称：navigator...2015-11-08
- 本文实例讲述了JS实现双击屏幕滚动效果代码。分享给大家供大家参考，具体如下：这里演示双击滚屏效果代码的实现方法，不知道有觉得有用处的没，现在网上还有很多还在用这个特效的呢，代码分享给大家吧。运行效果截图如下：在线演...2015-10-30
- 一、日期减去天数等于第二个日期function cc(dd,dadd){//可以加上错误处理var a = new Date(dd)a = a.valueOf()a = a - dadd * 24 * 60 * 60 * 1000a = new Date(a)alert(a.getFullYear() + "年" + (a.getMonth() +...2015-11-08
- 微信支付，即便交了保证金，你还是处理测试阶段，不能正式发布。必须到你通过程序测试提交订单、发货通知等数据到微信的系统中，才能申请发布。然后，因为在微信中是通过JS方式调用API，必须在微信后台设置支付授权目录，而且要到...2014-05-31
- 本文实例讲述了PHP常用的小程序代码段。分享给大家供大家参考，具体如下：1.计算两个时间的相差几天$startdate=strtotime("2009-12-09");$enddate=strtotime("2009-12-05");上面的php时间日期函数strtotime已经把字符串...2015-11-24
- 小编分享了一段简单的php中文转拼音的实现代码，代码简单易懂，适合初学php的同学参考学习。 代码如下 复制代码 <?phpfunction Pinyin($_String...2017-07-06
php导出csv格式数据并将数字转换成文本的思路以及代码分享
php导出csv格式数据实现：先定义一个字符串 存储内容，例如 $exportdata = '规则111,规则222,审222,规222,服2222,规则1,规则2,规则3,匹配字符,设置时间,有效期'."/n";然后对需要保存csv的数组进行foreach循环，例如复制代...2014-06-07- ecshop商品无限级分类代码 function cat_options($spec_cat_id, $arr) { static $cat_options = array(); if (isset($cat_options[$spec_cat_id]))...2016-11-25
- 本文介绍了如何延迟javascript代码的加载，加快网页的访问速度。 当一个网站有很多js代码要加载，js代码放置的位置在一定程度上将会影像网页的加载速度，为了让我们的网页加载速度更快，本文总结了一下几个注意点...2013-10-13
- 这篇文章主要介绍了Python运行提示缺少模块问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-05-10
- 这两天在用Perl编写一些监控脚本，其实写代码也是一件挺有意思的事情，就是挺废时间的。而且，由于语法不太熟，基本想到一个东西都要先Google一下看怎么实现。...2020-06-29
- 这篇文章主要介绍了vue项目,代码提交至码云,iconfont的用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-30