[color=red]网页中层的一些收藏 [精][荐][/color]

      网站 2005-9-15 2:32
网页中层的一些收藏 [精][荐] [2005-3-22]     
Dreamweaver 中层的相对定位
www.it365cn.com/show.asp?id=246

妙用“相对”实现网页图层位置定位
www.it365cn.com/show.asp?id=211

Dreamweaver里使用层的一些建议
www.it365cn.com/show.asp?id=723

层的相对定位的一种解释，大家一起来完善它
www.blueidea.com/bbs/NewsDetail.asp?id=264936

做主页时到用表格好还是用层好？
www.blueidea.com/bbs/newsdetail.asp?id=24859

有哪位大哥能具体说一下<span>标签的用法，先谢了！
www.blueidea.com/bbs/newsdetail.asp?id=23813

定时消失的层
www.cnbruce.com/blog/showlog.asp?cat_id=5&log_id=278

鼠标移到图片时显示隐含图层 & 拖动图层的应用
www.pconline.com.cn/pcedu/sj/wz/dreamweaver/10111/14968.html

点击按钮出现隐含图层 & 下拉菜单的实现
www.pconline.com.cn/pcedu/sj/wz/dreamweaver/10111/14982.html

如何赋予文字图层特效 & Timeline 的基本应用
www.pconline.com.cn/pcedu/sj/wz/dreamweaver/10111/14992.html

一个比较复杂的Timeline例子
www.pconline.com.cn/pcedu/sj/wz/dreamweaver/10111/15019.html

层拖拽行为不完全解析 I服了YOU 原文

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript">
<!--
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->

function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_dragLayer(objName,x,hL,hT,hW,hH,toFront,dropBack,cU,cD,cL,cR,targL,targT,tol,dropJS,et,dragJS) { //v3.0
//Copyright 1998 Macromedia, Inc. All rights reserved.
var i,j,aLayer,retVal,curDrag=null,NS=(navigator.appName=='Netscape'), curLeft, curTop;
if (!document.all && !document.layers) return false;
retVal = true; if(!NS && event) event.returnvalue = true;
if (MM_dragLayer.arguments.length > 1) {
curDrag = MM_findObj(objName); if (!curDrag) return false;
if (!document.allLayers) { document.allLayers = new Array();
with (document) if (NS) { for (i=0; i<layers.length; i++) allLayers[i]=layers[i];
for (i=0; i<allLayers.length; i++) if (allLayers[i].document && allLayers[i].document.layers)
with (allLayers[i].document) for (j=0; j<layers.length; j++) allLayers[allLayers.length]=layers[j];
} else for (i=0;i<all.length;i++) if (all[i].style&&all[i].style.position) allLayers[allLayers.length]=all[i];}
curDrag.MM_dragOk=true; curDrag.MM_targL=targL; curDrag.MM_targT=targT;
curDrag.MM_tol=Math.pow(tol,2); curDrag.MM_hLeft=hL; curDrag.MM_hTop=hT;
curDrag.MM_hWidth=hW; curDrag.MM_hHeight=hH; curDrag.MM_toFront=toFront;
curDrag.MM_dropBack=dropBack; curDrag.MM_dropJS=dropJS;
curDrag.MM_everyTime=et; curDrag.MM_dragJS=dragJS;
curDrag.MM_oldZ = (NS)?curDrag.zIndex:curDrag.style.zIndex;
curLeft= (NS)?curDrag.left:curDrag.style.pixelLeft; curDrag.MM_startL = curLeft;
curTop = (NS)?curDrag.top:curDrag.style.pixelTop; curDrag.MM_startT = curTop;
curDrag.MM_bL=(cL<0)?null:curLeft-cL; curDrag.MM_bT=(cU<0)?null:curTop -cU;
curDrag.MM_bR=(cR<0)?null:curLeft+cR; curDrag.MM_bB=(cD<0)?null:curTop +cD;
curDrag.MM_LEFTRIGHT=0; curDrag.MM_UPDOWN=0; curDrag.MM_SNAPPED=false; //use in your JS!
document.onmousedown = MM_dragLayer; document.onmouseup = MM_dragLayer;
if (NS) document.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
} else {
var theEvent = ((NS)?objName.type:event.type);
if (theEvent == 'mousedown') {
var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
var maxDragZ=null; document.MM_maxZ = 0;
for (i=0; i<document.allLayers.length; i++) { aLayer = document.allLayers[i];
var aLayerZ = (NS)?aLayer.zIndex:aLayer.style.zIndex;
if (aLayerZ > document.MM_maxZ) document.MM_maxZ = aLayerZ;
var isVisible = (((NS)?aLayer.visibility:aLayer.style.visibility).indexOf('hid') == -1);
if (aLayer.MM_dragOk != null && isVisible) with (aLayer) {
var parentL=0; var parentT=0;
if (!NS) { parentLayer = aLayer.parentElement;
while (parentLayer != null && parentLayer.style.position) {
parentL += parentLayer.offsetLeft; parentT += parentLayer.offsetTop;
parentLayer = parentLayer.parentElement; } }
var tmpX=mouseX-(((NS)?pageX:style.pixelLeft+parentL)+MM_hLeft);
var tmpY=mouseY-(((NS)?pageY:style.pixelTop +parentT)+MM_hTop);
var tmpW = MM_hWidth; if (tmpW <= 0) tmpW += ((NS)?clip.width :offsetWidth);
var tmpH = MM_hHeight; if (tmpH <= 0) tmpH += ((NS)?clip.height:offsetHeight);
if ((0 <= tmpX && tmpX < tmpW && 0 <= tmpY && tmpY < tmpH) && (maxDragZ == null
|| maxDragZ <= aLayerZ)) { curDrag = aLayer; maxDragZ = aLayerZ; } } }
if (curDrag) {
document.onmousemove = MM_dragLayer; if (NS) document.captureEvents(Event.MOUSEMOVE);
curLeft = (NS)?curDrag.left:curDrag.style.pixelLeft;
curTop = (NS)?curDrag.top:curDrag.style.pixelTop;
MM_oldX = mouseX - curLeft; MM_oldY = mouseY - curTop;
document.MM_curDrag = curDrag; curDrag.MM_SNAPPED=false;
if(curDrag.MM_toFront) {
eval('curDrag.'+((NS)?'':'style.')+'zIndex=document.MM_maxZ+1');
if (!curDrag.MM_dropBack) document.MM_maxZ++; }
retVal = false; if(!NS) event.returnvalue = false;
} } else if (theEvent == 'mousemove') {
if (document.MM_curDrag) with (document.MM_curDrag) {
var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
newLeft = mouseX-MM_oldX; newTop = mouseY-MM_oldY;
if (MM_bL!=null) newLeft = Math.max(newLeft,MM_bL);
if (MM_bR!=null) newLeft = Math.min(newLeft,MM_bR);
if (MM_bT!=null) newTop = Math.max(newTop ,MM_bT);
if (MM_bB!=null) newTop = Math.min(newTop ,MM_bB);
MM_LEFTRIGHT = newLeft-MM_startL; MM_UPDOWN = newTop-MM_startT;
if (NS) {left = newLeft; top = newTop;}
else {style.pixelLeft = newLeft; style.pixelTop = newTop;}
if (MM_dragJS) eval(MM_dragJS);
retVal = false; if(!NS) event.returnvalue = false;
} } else if (theEvent == 'mouseup') {
document.onmousemove = null;
if (NS) document.releaseEvents(Event.MOUSEMOVE);
if (NS) document.captureEvents(Event.MOUSEDOWN); //for mac NS
if (document.MM_curDrag) with (document.MM_curDrag) {
if (typeof MM_targL =='number' && typeof MM_targT == 'number' &&
(Math.pow(MM_targL-((NS)?left:style.pixelLeft),2)+
Math.pow(MM_targT-((NS)?top:style.pixelTop),2))<=MM_tol) {
if (NS) {left = MM_targL; top = MM_targT;}
else {style.pixelLeft = MM_targL; style.pixelTop = MM_targT;}
MM_SNAPPED = true; MM_LEFTRIGHT = MM_startL-MM_targL; MM_UPDOWN = MM_startT-MM_targT; }
if (MM_everyTime || MM_SNAPPED) eval(MM_dropJS);
if(MM_dropBack) {if (NS) zIndex = MM_oldZ; else style.zIndex = MM_oldZ;}
retVal = false; if(!NS) event.returnvalue = false; }
document.MM_curDrag = null;
}
if (NS) document.routeEvent(objName);
} return retVal;
}
//-->
</script>
<style type="text/css">
<!--
.5d { font-size: 12px; color: #000000; text-decoration: none; letter-spacing: 2px; word-spacing: 3px}
.d1 { font-size: 12px; color: #FFFFFF; text-decoration: none; background-color: #666666}
-->
</style>
</head>

<body bgcolor="#ffffff" text="#000000" link="#FFCC00" vlink="#FF0000" alink="#FF6600" onLoad="MM_dragLayer('Layer1','',0,0,0,0,true,false,-1,-1,-1,-1,false,false,0,'',false,'');MM_dragLayer('nb1','',0,0,0,0,true,false,25,5,75,75,false,false,0,'',false,'');MM_dragLayer('nc','',0,0,0,0,true,false,-1,-1,-1,-1,160,210,500,'',false,'');MM_dragLayer('nd','',0,0,80,20,true,false,-1,-1,-1,-1,39,327,200,'',false,'');MM_dragLayer('Layer2','',0,0,50,20,true,false,0,150,0,150,111,568,50,'',false,'');MM_dragLayer('Layer4','',0,0,0,0,true,false,0,150,100,50,false,false,0,'',false,'')">
<table width="701" border="0" cellspacing="1" cellpadding="0" bordercolor="#FFFFFF" bgcolor="#FFFFFF" height="1000">
<tr>
<td height="60" valign="top" bgcolor="#0099CC" width="200">
<div id="Layer1" style="position:absolute; width:50; height:50; z-index:1; background-color: #FF0000; layer-background-color: #FF0000; border: 1px none #000000; visibility: visible"><font color="#FFFFFF" size="2">1.</font></div>
<font color="#FFFFFF" size="2">演示１。</font></td>
<td valign="top" class="5d" width="500" height="60"><font color="#FF0000">层拖拽行为不完全解析（Darg
Layer Behaviors）</font>：<br>
<br>
首先我们来看一个层拖拽行为的最基本演示（见右侧）。这里只是指定了一个层（Layer），然后打开行为面板（Behaviors）选择拖拽（Darg
Layer），不做任何设置，点击OK即可。默认的鼠标事件为转载（OnLoad）。从这个演示中我们可以看到，当点击并按住鼠标在层的任何部位时开始实现拖拽，你可以将层拖拽到场景中的任何一个地方。</td>
</tr>
<tr>
<td bgcolor="#0099CC" height="80" valign="top" width="200">
<div id="nb" style="position:absolute; width:200; height:80; z-index:2">
<div id="nb1" style="position:absolute; width:50; height:50; z-index:1; background-color: #FF6600; layer-background-color: #FF6600; border: 1px none #000000; left: 75px; top: 25px"><font size="2">2.</font></div>
<font size="2">演示２。</font></div>
</td>
<td height="80" valign="top" width="500" class="5d">再看左侧的第二个演示。在这个演示中，层的拖动范围是做了限定的。也就是说针对该层的拖拽只在我们指定的范围内有效。拖动范围的设定是在Darg
Layer-Movement（运动）对话框中进行的。在Movement下拉选项中有两个可选项，第一个为默认项Uncontrained（未约束的），第二项Constrained（约束的）就是用来设置可拖动范围的项目。在该项中可以指定针对某层相对于编辑区Up（上）、Down（下）、Left（左）及Right（右）的各个位置。</td>
</tr>
<tr>
<td bgcolor="#0099CC" height="120" width="200" valign="top">
<div id="nc" style="position:absolute; width:50; height:50; z-index:3; background-color: #FF9900; layer-background-color: #FF9900; border: 1px none #000000; left: 160; top: 210"><font size="2">3.</font></div>
<font size="2">演示３。</font></td>
<td height="120" valign="top" class="5d" width="500">第三个演示应用了拖拽行为中的Snap if
Within()pixels of Drop Target（于某范围内贴紧目标）。需要说明的是，该功能只能对绝对定位的层产生效果，因为在设定贴紧目标范围之前必须要取得指定层的坐标，如果该层是相对定位的，也就没有了左边及上边的坐标值。在这种情况下我们就不能获得层的确切坐标。当在层相对定位的情况下获取坐标时DW会自动弹出一个提示框说明无法获得层位置。当我们获取了层的位置后，就可以在()pixels中写如一个数值了，默认的数值为５０像素．这个数值代表了，在距离这个层（获取坐标的层）５０个像素的范围内，拖拽的层在鼠标释放时会自动的帖紧目标．在左面的这个演示里只用到了一个层，如果您想了解到更详细明确的＂帖紧目标＂的概念可以自己动手作一下测试．<br>
</td>
</tr>
<tr>
<td bgcolor="#0099CC" height="100" width="200" valign="top">
<div id="nd" style="position:absolute; width:80; height:50; z-index:7; background-color: #FFCC00; layer-background-color: #FFCC00; border: 1px none #000000; left: 39px; top: 327px">
<table width="80" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td colspan="2" bgcolor="#000000" class="d1"><font size="2" face="宋体">4.拖动这里</font></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</div>
<font size="2">演示４。</font></td>
<td height="100" valign="top" class="5d" width="500">观察左面的演示,我们会得到这样一个结论:拖拽层时触发鼠标事件的范围是可指定的。<br>
触发鼠标事件的有效范围是在Drag Layer－Advancend（条件）-Drag handle（触发拖拽）项目中指定的。在Drag Hanfle选项的下拉列表中有两个可选项，第一个为默认项Entire
layer（全部层），第二项Area Within Layer（层内范围）就是我们用来指定触发鼠标事件的项目。选择这一项，在对话框的左侧就会出现　T－（距离层顶部）　L－（距离层左部）　W－（有效范围的长度）　H－（有效范围的高度）这四个待定数据项。多数的情况下，我们都无须指定T及L的数值，因为除了特殊的需要，我们都不会把触发鼠标事件的有效范围定义在中间或者其他角落这种特殊的位置．</td>
</tr>
<tr>
<td bgcolor="#0099CC" width="200" valign="top">
<table width="200" border="0" cellspacing="1" cellpadding="0" height="200">
<tr bgcolor="#006699">
<td valign="top" class="5d" width="100">完整的演示</td>
<td valign="top" width="100" height="99">&nbsp;</td>
</tr>
<tr bgcolor="#006699">
<td valign="top">&nbsp;</td>
<td valign="top">&nbsp;</td>
</tr>
</table>
</td>
<td width="500" valign="top" class="5d">左面是一个拖拽行为的完整演示．如果你细心的观察会发现，当两个层为重叠状态时点击任意层，受点击的层就会自动的跳到最上面来．这个小功能就是Advancend设置栏中While
Dragging Bring Layer to Front（当拖拽停止时层处于前面）中完成的．其中While Dragging（当拖拽）有个可选项，默认为选择状态含义为＂当拖拽时＂层的位置,如果我们勾选掉这个项目，其含义就转变为＂正常状态下＂层的位置．所谓＂正常状态＂就是指层的索引顺序．再看右面的下拉列表，第一项＂
Leave on Top（留在顶部）＂，顾名思义，它来配合拖拽状态选项的含义就是：当层停止拖拽时，该层的位置留在顶部．第二项＂Restore Z-index（恢复索引顺序）．它的含义是指，保持层的先后顺序，先插入的层就在后插入层的上面，反之亦然．<br>
提示：层的索引顺序我们可以任意指定，只需选中你要改变顺序的层，打开属性面板，你就可以看到Z-index项，在这里你可以输入一个数值，来定义层的先后顺序．<br>
<br>
到这里未止，我们已经把关于拖拽层行为的基本要素有了一个大概的了解．<br>
<br>
在Advancend设置栏中还有两个选项没有讲，因为它是附加在拖拽行为中js事件，脱离了拖拽的范畴，所以就不做详细的介绍了．下面就简单的说一下它们的含义：<br>
一，call javascript：当鼠标开始拖拽时弹出警告．<br>
二，when Dropped call javascript（）only of snapped：仅仅当拖拽放开，位置正确时触发js事件．注意：第二个功能只针对应用了＂贴紧目标＂的层所设．<br>
<br>
以上两个功能因为我的DW被汉化了，所以测试得不到效果．所以在这里特别提醒各位能不用汉化最好就不用．好了，这个关于层拖拽行为的解析到此结束．如果您发现哪里讲的不正确请通知我．<br>
<br>
<br>
<br>
<br>
<br>
<br>
本篇教程俺版权所有了，谁要转载请知会一声儿．谢了先．</td>
</tr>
</table>
<div id="Layer4" style="position:absolute; width:50; height:50; z-index:8; background-color: #33CCFF; layer-background-color: #33CCFF; border: 1px none #000000; left: 111; top: 468px">
<table width="50" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#003399">
<td>2</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</div>
<div id="Layer3" style="position:absolute; width:50; height:50; z-index:6; background-color: #66CCFF; layer-background-color: #66CCFF; border: 1px none #000000; left: 111px; top: 568">
<table width="50" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#66CCFF">
<td><font size="2" color="#000000">目标</font></td>
<td>&nbsp;</td>
</tr>
<tr bgcolor="#66CCFF">
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</div>
<div id="Layer2" style="position:absolute; width:50; height:50; z-index:5; left: 11px; top: 468px; background-color: #66CCFF; layer-background-color: #66CCFF; border: 1px none #000000">
<table width="50" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#3366CC">
<td>1</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</div>
</body>
</html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]




如何使层始终居于顶部1



<style>
body{overflow:hidden;margin:0px}
div{position:absolute}
</style>
<div style="background-color:#3399CC;z-index:100">请问如何使层始终居于顶部</div>
<div style="width:100%;height:100%;overflow:auto"><script>document.write(new Array(100).join('a<br>'))</script></div>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]


如何使层始终居于顶部2


<HTML>
<HEAD>
</HEAD>
<BODY onscroll="oip.style.top=document.body.scrollTop">

<DIV STYLE="border-style:double; border-width:3; position: absolute; width: 171; height: 49; left: 273; top: 0; background-color:#0000FF" id=oip>
　</DIV>
<script>document.write(new Array(100).join('a<br>'))</script>
</BODY>
</HTML>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]



关于层的挡隔问题的探讨 原作者：我佛山人

1.被Flash挡住
设置Flash的参数：<param name="wmode" value="opaque">


<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="468" height="60"><param name="movie" value="http://www.it365cn.com/bbs/cxchina_ad.swf">
<param name="wmode" value="opaque"><param name="quality" value="high"><embed src="http://www.it365cn.com/bbs/cxchina_ad.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="468" height="60"></embed></object>
<div style="position:absolute;left:150;top:50;width:100px;height:50px;background:green">
</div>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]


2.被图片挡住
这个估计是因为图片也放在层中，而图片所在层的Z轴索引值比该层大，所以被挡住，解决办法是更改该层的Z轴索引值至比图片层大。


<div style="position:absolute;left:0;top:20;z-index:2;background:red;width:120px;height:70px">
1<img src="http://www.it365cn.com/bbs/images/mainlogo.gif">
</div>
<div style="position:absolute;left:50;top:50;z-index:2;background:green;width:120px;height:70px">
2<img src="http://www.it365cn.com/bbs/images/mainlogo.gif">
</div>
<div style="position:absolute;left:90;top:80;z-index:2;background:blue;width:120px;height:70px">
3<img src="http://www.it365cn.com/bbs/images/mainlogo.gif">
</div>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]


3.被表单控件挡住
这个目前还没有完美的解决方法，一般都是在设计排版时就尽量避免这种情况，如果是万不得已，就在层经过表单控件时让表单控件隐藏，过后再让它显示：


<button onClick="oSelect.style.display='none';oLayer.style.display='inline'">显示层隐藏下拉选项</button><button onClick="oSelect.style.display='inline';oLayer.style.display='none'">显示下拉选项隐藏层</button>
<div style="position:absolute;left:0;top:50;z-index:2;background:red;width:120px;height:50px">
z-index:1<select id="oSelect"></select>
</div>
<div id="oLayer" style="position:absolute;left:30;top:60;z-index:2;background:green;width:120px;height:70px;display:none">
z-index:2<img src="http://www.it365cn.com/bbs/images/mainlogo.gif">
</div>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]



WINDY2K - Picture Spelling

<style>
*{
FONT-SIZE: 12px;
}
select {
width: 100px; BACKGROUND-COLOR: #eeeeee;
}
div {
padding: 2px;
}
</style>
<script language="javascript1.2">
/*
This following code are designed and writen by Windy_sk <seasonx@163.net>
You can use it freely, but u must held all the copyright items!
*/

var ie = (document.getElementById && document.all);
var ns = (document.getElementById && !document.all);

function GetRndNum(Min,Max){
var Range = Max - Min;
var Rand = Math.random();
return(Min + Math.round(Rand * Range));
}

function PicItem(pic, width, height) {
this.img = new Image();
this.pic = pic;
this.width = width;
this.height = height;
}

var Pic_list = new Array();
var n=0, Pic_cur=0, Clips=3;
Pic_list[n++] = new PicItem("http://www.mbavoice.net/windy/clip/pic0001.jpg", 430, 261);
Pic_list[n++] = new PicItem("http://www.mbavoice.net/windy/clip/pic0002.jpg", 430, 331);
Pic_list[n++] = new PicItem("http://www.mbavoice.net/windy/clip/pic0003.jpg", 430, 378);
Pic_list[n++] = new PicItem("http://www.mbavoice.net/windy/clip/pic0004.jpg", 430, 514);
Pic_list[n++] = new PicItem("http://www.mbavoice.net/windy/clip/pic0005.jpg", 430, 255);
Pic_list[n++] = new PicItem("http://www.mbavoice.net/windy/clip/pic0006.jpg", 430, 450);
Pic_list[n++] = new PicItem("http://www.mbavoice.net/windy/clip/pic0007.jpg", 430, 386);
Pic_list[n++] = new PicItem("http://www.mbavoice.net/windy/clip/pic0008.jpg", 430, 386);
Pic_list[n++] = new PicItem("http://www.mbavoice.net/windy/clip/pic0009.jpg", 430, 441);
Pic_list[n++] = new PicItem("http://www.mbavoice.net/windy/clip/pic0010.jpg", 430, 472);

var Pic_clip_all = new Array();
var Pic_clip = document.createElement("div");
var Layer_cur = null;
var pX = 0 ; pY = 0; Zidx = 1;
Pic_clip.innerHTML = "<img src='' border='0' style='top:0px;left:0px;position:relative' />";
Pic_clip.style.cssText = "background-color:white; cursor:pointer; position:absolute; overflow: hidden; padding:0px; border:1px black solid; zIndex:" + Zidx;

var the_width=100, the_height=100, Clip_num=0;
var Flip_list = ["FlipV", "FlipV FlipH", "FlipH", "",];
var Zwidth = screen.width * 0.8, Zheight = screen.height * 0.8 , Zrate=0;

function ChangeMode(idx) {
for(var i=0; i<Pic_clip_all.length; i++) {
for(var j=0; j<Pic_clip_all[i].length; j++) {
Pic_clip_all[i][j].parentNode.removeChild(Pic_clip_all[i][j]);
}
}
var if_zoom = document.getElementById("zoom").checked;
if(if_zoom) {
the_width = Math.floor(Zwidth *(Zrate>1?1:Zrate)/idx);
the_height = Math.floor(Zheight/(Zrate>1?Zrate:1)/idx);
} else {
the_width = Math.floor(Pic_list[Pic_cur].width/idx);
the_height = Math.floor(Pic_list[Pic_cur].height/idx);
}
Pic_clip_all = new Array(idx);
Clip_num = Math.pow(idx, 2);
for(i=0; i<idx; i++) {
Pic_clip_all[i] = new Array(idx);
for(j=0; j<idx; j++) {
Pic_clip_all[i][j] = Pic_clip.cloneNode(true);
with(Pic_clip_all[i][j].style) {
width = the_width;
height = the_height;
top = GetRndNum(100, 400);
left = GetRndNum(100, 600);
}
with(Pic_clip_all[i][j]) {
if(if_zoom) {
firstChild.width = Math.floor(Zwidth *(Zrate>1?1:Zrate));
firstChild.height = Math.floor(Zheight/(Zrate>1?Zrate:1));
}
id = "clip_" + i + "_" + j;
if(ie) {
onmousedown = new Function("if(this.snap=='yes')return; this.style.zIndex=Zidx++; Layer_cur=this; pX=event.clientX-this.offsetLeft; pY=event.clientY-this.offsetTop;");
oncontextmenu = new Function("event.returnvalue=false; if(this.snap=='yes')return; var flip_idx=(parseInt(this.flip_idx)+1)%4; this.style.filter=Flip_list[flip_idx]; this.flip_idx=flip_idx;");
firstChild.src = Pic_list[Pic_cur].pic;
firstChild.style.pixelLeft = - j * the_width;
firstChild.style.pixelTop = - i * the_height;
Pic_clip_all[i][j].flip_idx = 0;
if(flip.checked) {
var rnd = GetRndNum(0,7);
if(rnd<4) {
style.filter=Flip_list[rnd];
Pic_clip_all[i][j].flip_idx = rnd;
}
}
} else {
onmousedown = function(e){
if(e.target.parentNode.snap=='yes')return;
e.target.parentNode.style.zIndex = Zidx++;
Layer_cur = e.target.parentNode;
if(Layer_cur.snap=="yes") return;
pX=e.clientX-Layer_cur.offsetLeft;
pY=e.clientY-Layer_cur.offsetTop;
};
}
}
document.body.appendChild(Pic_clip_all[i][j]);
if(ns) {
with(Pic_clip_all[i][j].firstChild) {
src = Pic_list[Pic_cur].pic;
style.left = - j * the_width;
style.top = - i * the_height;
style.position = "relative";
}
}
}
}
document.getElementById("Board").innerHTML = "";
BuildTbl(document.getElementById("Board"));
return;
}

function BuildTbl(obj) {
var the_Tbl = document.createElement("table");
the_Tbl.id = "Spl_Board";
the_Tbl.border = 1;
the_Tbl.style.cssText = "padding:0px; border-collapse:collapse;background-color:#000000";
if(document.getElementById("zoom").checked) {
the_Tbl.style.width = Math.floor(Zwidth *(Zrate>1?1:Zrate));
the_Tbl.style.height = Math.floor(Zheight/(Zrate>1?Zrate:1));
} else {
the_Tbl.style.width = Pic_list[Pic_cur].width;
the_Tbl.style.height = Pic_list[Pic_cur].height;
}
for(var i=0; i<Clips; i++) {
var the_row = the_Tbl.insertRow(i);
for(var j=0; j<Clips; j++) {
var the_cell = the_row.insertCell(j);
the_cell.style.width = the_width;
the_cell.style.height = the_height;
the_cell.mark = "clip_" + i + "_" + j;
}
}
obj.appendChild(the_Tbl);
return;
}

function PicAdd(the_pic, pic_width, pic_height) {
the_pic = the_pic.replace(/\\/g,"/");
if(!ie) the_pic = "file:///" + the_pic;
Pic_list[n] = new PicItem(the_pic, pic_width, pic_height);
var the_Sel = document.getElementById("sel").lastChild;
the_Sel.options[the_Sel.options.length] = new Option(Pic_list[n].pic.replace(/^(.*)?\/([^\/]*)$/,"

- + P A

- {logtitle}

      {Class} {publishtime}
{logsummary}
标签集:TAGS:{tags}
我要留言To Comment 阅读全文Read All | 回复Comments({commentcount}) 点击Count({viewcount})

{phototitle}

{phototitle}

  • 点击:Hits:{viewcount}
  • 回复:Comments:{commentcount}
  • 发表:PostTime:{posttime}

{logsummary}

{logtitle}

      {Class} {publishtime}
{logcontent}
标签集:TAGS:{tags}
回复Comments({commentcount}) 点击Count({viewcount})

回复Comments

{commenttime}{commentauthor}

{CommentUrl}
{commentcontent}
"));
the_Sel.selectedIndex = Pic_cur = n++;
PicChg();
}

function PicChg() {
var the_img = "<img ";
the_img += "src='"+Pic_list[Pic_cur].pic+"' ";
Zrate = (Pic_list[Pic_cur].width/Pic_list[Pic_cur].height) / (4/3);
if( Zrate > 1 ) {
the_img += "width='100%' ";
} else {
the_img += "height='100%' ";
}
the_img += "/>";
document.getElementById("show").innerHTML = the_img;
}

function PicSel(obj) {
var the_Sel = document.createElement("select");
the_Sel.id = "Pic_Sel";
for(var i=0; i<n; i++) {
the_Sel.options[i] = new Option(Pic_list[i].pic.replace(/^(.*)?\/([^\/]*)$/,"

- + P A

- {logtitle}

      {Class} {publishtime}
{logsummary}
标签集:TAGS:{tags}
我要留言To Comment 阅读全文Read All | 回复Comments({commentcount}) 点击Count({viewcount})

{phototitle}

{phototitle}

  • 点击:Hits:{viewcount}
  • 回复:Comments:{commentcount}
  • 发表:PostTime:{posttime}

{logsummary}

{logtitle}

      {Class} {publishtime}
{logcontent}
标签集:TAGS:{tags}
回复Comments({commentcount}) 点击Count({viewcount})

回复Comments

{commenttime}{commentauthor}

{CommentUrl}
{commentcontent}
"));
}
the_Sel.onchange = new Function("Pic_cur=this.selectedIndex;PicChg()");
obj.appendChild(the_Sel);
return;
}

function ModeSel(obj) {
var the_Sel = document.createElement("select");
the_Sel.id = "Mode_Sel";
for(var i=3; i<=6; i++) {
the_Sel.options[i-3] = new Option(i + " * " +i);
}
the_Sel.onchange = new Function("Clips=this.selectedIndex+3");
obj.appendChild(the_Sel);
return;
}

function get_Pos(the_obj){
the_top = the_obj.offsetTop - document.body.scrollTop;
the_left = the_obj.offsetLeft - document.body.scrollLeft;
the_obj = the_obj.offsetParent;
while(the_obj){
the_top += the_obj.offsetTop;
the_left += the_obj.offsetLeft;
the_obj = the_obj.offsetParent;
}
this.top = the_top;
this.left = the_left;
}

function isBetween(numMin, numCheck, numMax) {
return (numMin<numCheck && numCheck<numMax);
}

function GetCell(x, y) {
var Spl_Board = document.getElementById("Spl_Board");
for(var i=0; i<Spl_Board.rows.length; i++) {
var the_row = Spl_Board.rows[i];
for(var j=0; j<the_row.cells.length; j++) {
var the_cell = the_row.cells[j];
pos = new get_Pos(the_cell);
if(isBetween(0, y-pos["top"], the_cell.offsetHeight) && isBetween(0, x-pos["left"], the_cell.offsetWidth)) {
return the_cell;
}
}
}
return false;
}

function showTbl(e) {
if(ie) e = event;
var the_tbl = document.getElementById("tbl");
if(the_tbl.style.display == "none") {
the_tbl.style.display = "";
} else {
the_tbl.style.display = "none";
}
return;
}

var Color_list = ["#ffffff","#eeeeee","#dddddd","#cccccc","#bbbbbb","#aaaaaa","#999999","#888888","#777777","#666666","#555555","#444444","#333333","#222222","#111111","#000000"];
var CurIdx = 0;

function flashTbl() {
var Spl_Board = document.getElementById("Spl_Board");
Spl_Board.style.backgroundColor = Color_list[CurIdx++];
if(CurIdx==Color_list.length) {
CurIdx = 0;
} else {
setTimeout("flashTbl()",25);
}
return;
}

window.onload = function() {
PicSel(document.getElementById("sel"));
ModeSel(document.getElementById("mode"));
PicChg();
for(var i=0; i<n; i++) {
Pic_list[i].img.src = Pic_list[i].pic;
}
if(ns) document.getElementById('tbl').style.position="";
}

if(ns) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP)

document.&#111nmousemove = function(e) {
if(ie) e = event;
if(Layer_cur != null) {
var the_top = e.clientY - pY;
var the_left = e.clientX - pX;
Layer_cur.style.top = the_top>0?the_top:0;
Layer_cur.style.left = the_left>0?the_left:0;
if(ie) Layer_cur.setCapture();
}
}

document.onmouseup = function(e){
if(ie) e = event;
if(Layer_cur != null) {
if(Layer_cur.id != "tbl") {
the_cell = GetCell(e.clientX, e.clientY);
if(the_cell) {
if(the_cell.mark == Layer_cur.id) {
Layer_cur.style.position = "static";
if(ie) Layer_cur.style.filter = "";
the_cell.appendChild(Layer_cur);
Layer_cur.snap = "yes";
flashTbl();
Clip_num--;
if(Clip_num == 0) alert("Victory !");
}
}
}
if(ie) Layer_cur.releaseCapture();
Layer_cur = null;
pX = pY = 0;
}
}

document.onkeypress = function(e) {
if(ie) e = event;
var keycode = e.keyCode;
if(keycode == 27){
showTbl();
}
}

document.onselectstart = new Function("return false");

</script>
<body bgcolor="#ffffee">
<div align=center>Please Use <font color="red">Esc</font> or <font color="red" style="cursor:pointer" onclick="showTbl()">click here</font> to show or hide the condition layer !</div>
<br />
<table id="tbl" style="border:black 1px solid; width:220px; position:absolute; top:10px; left:10px; background-color:#ffffee; z-index:9999" align="center">
<tr style="cursor:move; background-color:#cccccc;" onmousedown="Layer_cur=document.getElementById('tbl'); pX=event.clientX-Layer_cur.offsetLeft; pY=event.clientY-Layer_cur.offsetTop;">
<td align="right">
<span style="cursor:pointer; text-align:center; font-family:Webdings;" onclick="var the_tbl=document.getElementById('tbl'); if(this.innerText=='1'){this.innerText='2';the_tbl.rows[2].style.display='none';}else{this.innerText='1';the_tbl.rows[2].style.display=''}">1</span>
<span style="cursor:pointer; text-align:center; font-family:System;" onclick="document.getElementById('tbl').style.display='none'">x</span>&nbsp;
</td>
</tr>
<tr><td align="center" valign="top">
<div id="show" style="text-align:center; width:200px; height:150px; margin:0px; padding: 0px; overflow: hidden"></div>
</td></tr>
<tr><td>
<div align="center">
<div id="sel" >Picture Select: </div><br />
<div id="mode">&nbsp; Mode &nbsp;Select: </div><br />
<div>Add New Pic: &nbsp; &nbsp;<input type="file" title="U can input the full url in the browse box !" style="width:0px;border:0px" onchange="if(ie){document.getElementById('Cimg').src=this.value;}else{PicAdd(this.value,640,480)}" onclick="if(ns)this.blur()"></div><br />
<div align="center"><input type="checkbox" id="flip"><label for="flip"> Flip ( IE only ) </label> <input type="checkbox" id="zoom"><label for="zoom"> Zoom </label></div><br />
<div><input type="button" value="Spelling !" onclick="ChangeMode(Clips)"></div>
</div>
</td></tr>
</table>
<div id="Board" align=center></div>
<img id="Cimg" style="position:absolute; display:none; top:1000px;" onload="this.style.display='';PicAdd(this.src, this.offsetWidth, this.offsetHeight);this.style.display='none'" onerror="if(this.src!=null)alert('Error Occured in Reading!')">
</body>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]



层的 相对和绝对

取自经典论坛forfor的一份帖子中，注意这位朋友好久了，基础蛮扎实的：）

相对 relative
绝对 absolute

相对 是指相对于本来应该在的位置 top left right bottom四值为偏移量
绝对 是指关于"原点"(见下面解释)的位置 top left right bottom四值即关于原点的值

相对 偏移后其本应占据的空间还在
绝对 其在文档中所占空间不再存在 纯粹是一个"飘浮"着的东西

"原点" 为了便于解释而自订的词,若设为absolute的元素的父级元素(包括其"祖父""曾祖父"^_^)有absolute或relative,则以它为参考.若无则以body为"原点"

实例:
1. a1 绝对 距body左上角top:200px;left:200px;
2. 字符"1" a1为absolute 则a1不占用空间 "1"位于body左上角
3. b1 绝对 距body左上角top:50px;left:50px;
4. b2 绝对 距b1左上角top:50px;left:50px;
5. 字符"2" b1为absolute 则b1不占用空间 "2"位于"1"后
6. c1 固定(默认值static) 左边界400px
7. c2 绝对 距body左上角top:70px;left:70px;
8. 字符"3" 在c1下方
9. d1 相对 相对于d1应该在的位置向上偏移80px;
10. 字符"456"在d1原位置的下方


<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<head>
<style>
div{border:1px solid;width:200px;height:200px;}
</style>
</head>
<body>

<div style="position:absolute;top:200px;left:200px;">a1</div>
1
<div style="position:absolute;top:50px;left:50px;">b1
<div style="position:absolute;top:50px;left:50px;">b2</div>
</div>
2
<div style="margin-left:400px;">c1
<div style="position:absolute;top:70px;left:70px;">c2</div>
</div>
3
<div style="position:relative;top:-80px;left:0px;">d1</div>
4
56
</body>
</html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]


还有些重要的东西，也放到这里来吧

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>DW提纲</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<base href="http://www.blueidea.com/bbs/">
<link rel=stylesheet type=text/css href=/css/style.css>
<style>
p { font-size:14px; font-weight:bold}
</style>
</head>

<body>
<table width="95%" border="0" align="center" cellpadding="10" bgcolor="#FFFFFF">
<tr>
<td align="left"><p>一．前言 </p>
<p>二．表格（ TABLE ）篇 </p>
<ul>
<li>如何让字符不会撑大表格 <br>
<a href="http://www.blueidea.com/bbs/newsdetail.asp?id=927177">http://www.blueidea.com/bbs/newsdetail.asp?id=927177 </a></li>
<li>把表格进行到底 <br>
<a href="http://www.blueidea.com/bbs/newsdetail.asp?id=184779">http://www.blueidea.com/bbs/newsdetail.asp?id=184779 </a></li>
<li>表格边框应用魔鬼教程 <br>
<a href="http://www.blueidea.com/bbs/newsdetail.asp?id=186509">http://www.blueidea.com/bbs/newsdetail.asp?id=186509 </a></li>
<li>在网页中做出一根竖的线有几种办法？那种最好哪？ <br>
<a href="http://www.blueidea.com/bbs/newsdetail.asp?id=818">http://www.blueidea.com/bbs/newsdetail.asp?id=818 </a></li>
<li>table border <br>
<a href="http://www.blueidea.com/bbs/newsdetail.asp?id=809">http://www.blueidea.com/bbs/newsdetail.asp?id=809 </a></li>
<li>tbody 的用法？ <br>
<a href="http://www.blueidea.com/bbs/newsdetail.asp?id=740">http://www.blueidea.com/bbs/newsdetail.asp?id=740 </a></li>
<li>表格很少用的一些属性 <br>
<a href="http://www.blueidea.com/bbs/newsdetail.asp?id=24198">http://www.blueidea.com/bbs/newsdetail.asp?id=24198 </a></li>
<li>关于表格背景的问题 <br>
<a href="http://www.blueidea.com/bbs/newsdetail.asp?id=13241">http://www.blueidea.com/bbs/newsdetail.asp?id=13241 </a></li>
<li>如何固定层和表格的大小 <br>
<a href="http://www.blueidea.com/bbs/newsdetail.asp?id=205142">http://www.blueidea.com/bbs/newsdetail.asp?id=205142 </a></li>
<li>园角表格 <br>
<a href="http://www.blueidea.com/bbs/newsdetail.asp?id=186781">http://www.blueidea.com/bbs/newsdetail.asp?id=186781 </a></li>
<li>layer 与 table 的问题 <br>
<a href="http://www.blueidea.com/bbs/newsdetail.asp?id=33894">http://www.blueidea.com/bbs/newsdetail.asp?id=33894 </a></li>
<li>表格的亮边框和暗边框颜色怎么设定 <br>
<a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=230435">http://www.blueidea.com/bbs/NewsDetail.asp?id=230435 </a></li>
<li>表格样式大全 <br>
<a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=242304">http://www.blueidea.com/bbs/NewsDetail.asp?id=242304 </a></li>
</ul>
<p>三．层（ DIV ）篇 </p>
<ul>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=501">层的定位 </a></li>
<li><a href="http://www.blueidea.com/tech/graph/2003/159.asp">&lt;span&gt; 标签的用法 </a></li>
<li><a href="http://www.blueidea.com/tech/graph/2003/706.asp">不同分辨率层的定位另类解决方案 </a></li>
<li><a href="http://www.blueidea.com/tech/graph/2003/720.asp">如何固定层和表格的大小 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=72945">关于相对于绝对定位 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=152921">主页移动背景代码。 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=119386">层拖拽行为不完全解析 </a></li>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=254161">关于层的高度 </a></li>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=264936">层的相对定位的一种解释 </a></li>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=293585">解决
Layer 被 iframe 挡住的问题 </a></li>
</ul>
<p>四．样式表（ CSS ）篇 </p>
<ul>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=645">首页导航渐显的效果是怎么做出来的？ </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=1303">谁遇到过这样的问题 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=1746">图片的边框颜色 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=1484">在同一页面怎么采用不同的
hover 和 link 、 visited </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=5062">如何在表单中改字体的颜色？ </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=215423">一个页面几种连接效果 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=23688">关于字体的老话题！ </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=25904">css
中 link 和 import 的区别 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=15468">用 CSS
改变鼠标箭头 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=192080">25
种出现方式的菜单详解。 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=193636">关于
netscape 对外部样式表支持的重大发现！ </a></li>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=228126">链接文字与下划线如何做到不同颜色 </a></li>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=260250">用
CSS 做文字阴影的问题 </a></li>
</ul>
<p>四．窗口（ WINDOW ）篇 </p>
<ul>
<li>无提示关闭窗口 <br>
<a href="http://www.blueidea.com/bbs/newsdetail.asp?id=815720">http://www.blueidea.com/bbs/newsdetail.asp?id=815720 </a><br>
<a href="http://www.blueidea.com/bbs/newsdetail.asp?id=185536">http://www.blueidea.com/bbs/newsdetail.asp?id=185536 </a><br>
<a href="http://www.blueidea.com/bbs/newsdetail.asp?id=25199">http://www.blueidea.com/bbs/newsdetail.asp?id=25199 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=131271">用
a 窗口来关闭 b 窗口 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=24702">如何将页面设置成满屏显示 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=215942">窗口的拖曳 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=142888">关于子窗口和父窗口的问题 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=152197">个性化的弹出窗口 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=126106">窗口动态
title </a></li>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=243206">Chromeless
Window 效果 </a></li>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=57549">进入页面就窗口全屏 </a></li>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=257065">小窗口大学问
- 玩透弹出窗口 </a></li>
</ul>
<p>五．表单（ FORM ）篇 </p>
<ul>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=1227402">如何更改文件上传框的样式 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=527">怎么用文字联结实现按钮的
SUBMIT 功能？ </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=2127">Form
的位置怎么控制？ </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=4543">怎么用一个图象代替
submit 按钮 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=5062">如何在表单中改字体的颜色？ </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=5795">常用表单格式技巧 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=212218">全选功能是怎么样实现的？ </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=188837">表单如何提交到
EMAIL ？ </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=125600">关于提交表单和弹出页面的相关问题？ </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=156951">一个页面中若有两个表单时，
dw 就会出现黄色的警告符 </a></li>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=242314">用 &lt;SELECT&gt; 的
onchange 是否可以控制层的显示 </a></li>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=230107">怎样在
Dreamweaver 里控制按钮的宽度和高度 </a></li>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=246708">jumpmenu
的 _blank 效果这么做？ </a></li>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=277709">我来现个宝：关于怎样改变多行文本框滚动条的颜色 </a></li>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=285218">禁止在输入框中输入中文 </a></li>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=286230">动态计算还能够输入多少字节的表单 </a></li>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=286237">限制复选框的最大可选数 </a></li>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=302470">请讲讲
ACESSKEY 的使用 ? </a></li>
</ul>
<p>六．框架（ FRAME ）篇 </p>
<ul>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=200184">超级简单实现框架滚动控制。 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=130293">同时刷新两个框架里面的窗口 </a></li>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=253226">有没有办法一次改变框架中的两个页面 </a></li>
</ul>
<p>七．滚动条（ SCROLL BAR ）篇 </p>
<ul>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=201690">有一种精巧的滚动条 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=25492">请问如何在单元格里或层里出现滚动条？ </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=133458">怎么改变滚动条的颜色 </a></li>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=251048">超帅极酷的滚动条！ </a></li>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=263438">爆帅的
ie 滚动条 </a></li>
</ul>
<p>八．排版篇 </p>
<ul>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=223192">真正的文字竖排 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=168012">配色方案 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=14772">利用 &lt;pre&gt; 标签对文本进行精确控制 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=3722">FW3
里面切割的图片做的 HTML 到 DW3 里编辑，怎么保持原样 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=4502">怎样使文字环绕图片显示？ </a></li>
<li>做主页时到用表格好还是用层好？ <br>
<a href="http://www.blueidea.com/bbs/newsdetail.asp?id=133771">http://www.blueidea.com/bbs/newsdetail.asp?id=133771 </a><br>
<a href="http://www.blueidea.com/bbs/newsdetail.asp?id=24859">http://www.blueidea.com/bbs/newsdetail.asp?id=24859 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=10028">关于直线的问题 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=205142">如何固定层和表格的大小 </a></li>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=237121">段落首行缩进 </a></li>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=239525">LIST
与 CSS </a></li>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=248178">自动缩放的字体 </a></li>
</ul>
<p>九．代码基础篇 </p>
<ul>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=837570">判断时间类型的正则表达过程该怎么写？ </a></li>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=844971">抛砖引玉
: 正则的几个基本概念 </a></li>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=844971">正则入门连载！（献给不及格的程序员们） </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=182340">键盘控制页面的代码是多少？如何控制？（高手请
... ） </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=495">no wrap?
白痴问题，快来灌水 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=4613">你了解多少
HTML ？ </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=740">请问＜ tbody
＞的用法？ </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=23972">在 javascript
中 this 的用法 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=24702">如何将页面设置成满屏显示 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=8135">DW 中
HEAD 元素的使用 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=1291">如何实现主页的图标 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=196570">探讨一下
showModelessDialog （） </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=192080">25
种出现方式的菜单详解。 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=173458">关于首字下沉问题如何解决？ </a></li>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=240017">CSS3
W3C Working Draft </a></li>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=246424">TextPopup </a></li>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=272639">到底有几种空链接？ </a></li>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=275363">在页面里禁止选择的那句怎么写来的？ </a></li>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=289308">关于
meta 中的 keyword 属性，谁能讲解一下 </a></li>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=292152">&lt;TITLE&gt;&lt;ALT&gt; 里面如何换行？ </a></li>
</ul>
<p>十． JS 特效篇 </p>
<ul>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=140827">原创教程：图片随机显示技巧 </a></li>
<li>如何用 <a href="http://www.blueidea.com/bbs/newsdetail.asp?id=182340">键盘控制页面？ </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=146">zippy
首页上的浮动菜单是如何作出来的 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=16600">类似
QQ 的好友栏的效果制作 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=202243">滚动和滤镜效果的结合！ </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=15530">网页震动效果 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=175442">如何禁止
ie 的快捷键 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=185675">能在右键菜单中加入其他功能吗？ </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=133477">链接文字的颜色渐变是怎么做的？ </a></li>
<li>实现页面真正 loading... 效果！ <br>
<a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=250202">http://www.blueidea.com/bbs/NewsDetail.asp?id=250202 </a><br>
<a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=266438">http://www.blueidea.com/bbs/NewsDetail.asp?id=266438 </a></li>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=265964">如何做到直接用鼠标拖动页面 </a></li>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=266480">CreatePopup
方法 (method) </a></li>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=281534">slidermenu
的实现 </a></li>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=284848">表格单元格变色的示例 </a></li>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=287500">录制光标轨迹效果！ </a></li>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=268660">每日提示功能是怎么做的？ </a></li>
<li><a href="http://www.blueidea.com/bbs/NewsDetail.asp?id=603197">光标的帖子总结（
Range 的使用） </a></li>
</ul>
<p>十一．多媒体篇 </p>
<ul>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=140827">媒体播放问题 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=140827">网上视频点播
的简单实现 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=140827">Dreamweaver
中的 flash 控制参数设置 </a></li>
<li><a href="http://www.blueidea.com/bbs/newsdetail.asp?id=140827">DW
插件应用 ---- 控制 FLASH 影片 </a></li>
</ul>
<p>十二．后台篇</p>
<ul>
<li><a href="http://www.blueidea.com/tech/program/2003/1014.asp">菜鸟也DW MX做ASP（连载八篇，已有CNBRUCE的DOC文件）</a></li>
<li><a href="http://www.blueidea.com/tech/program/2004/1696.asp">DWMX+ACCESS制作企业新闻系统
（连载八篇）</a></li>
<li><a href="#">DW速做ASP留言本
（连载三长篇，已有CNBRUCE的DOC文件）</a></li>
<li><a href="www.blueidea.com/tech/program/2003/1324.asp">DW后台技巧类：DW+ASP 玩转动态二级菜单，……</a></li>
</ul>
<p>十三．附录 </p>
<ul>
<li>附录 A HTML 语法一览表 </li>
<li>附录 B 色码一览表 </li>
<li>附录 C 对象层次图 </li>
<li>附录 D 对象属性一览表</li>
</ul></td>
</tr>
</table>
</body>
</html>



标签集:TAGS:
回复Comments() 点击Count()

回复Comments

{commenttime}{commentauthor}

{CommentUrl}
{commentcontent}