给大家带来用层摹拟可挪动的小窗口
你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。运转代码以下：
<html><head><title>_xWin</title><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><METANAME="Description"CONTENT="http://www.youthfly.net"><styletype=text/css><!--body{font-size:12px;}a:visited{text-decoration:none;color:slategray;}a:hover{text-decoration:underline;color:slategray;}a:link{text-decoration:none;color:slategray;}--></style><scriptlanguage=JScript><!--//能够打包为js文件;varx0=0,y0=0,x1=0,y1=0;varoffx=6,offy=6;varmoveable=false;varhover=orange,normal=#336699;//color;varindex=10000;//z-index;//入手下手拖动;functionstartDrag(obj){if(event.button==1){//锁定题目栏;obj.setCapture();//界说工具;varwin=obj.parentNode;varsha=win.nextSibling;//纪录鼠标和层地位;x0=event.clientX;y0=event.clientY;x1=parseInt(win.style.left);y1=parseInt(win.style.top);//纪录色彩;normal=obj.style.backgroundColor;//改动作风;obj.style.backgroundColor=hover;win.style.borderColor=hover;obj.nextSibling.style.color=hover;sha.style.left=x1+offx;sha.style.top=y1+offy;moveable=true;}}//拖动;functiondrag(obj){if(moveable){varwin=obj.parentNode;varsha=win.nextSibling;win.style.left=x1+event.clientX-x0;win.style.top=y1+event.clientY-y0;sha.style.left=parseInt(win.style.left)+offx;sha.style.top=parseInt(win.style.top)+offy;}}//中断拖动;functionstopDrag(obj){if(moveable){varwin=obj.parentNode;varsha=win.nextSibling;varmsg=obj.nextSibling;win.style.borderColor=normal;obj.style.backgroundColor=normal;msg.style.color=normal;sha.style.left=obj.parentNode.style.left;sha.style.top=obj.parentNode.style.top;obj.releaseCapture();moveable=false;}}//取得核心;functiongetFocus(obj){if(obj.style.zIndex!=index){index=index+2;varidx=index;obj.style.zIndex=idx;obj.nextSibling.style.zIndex=idx-1;}}//最小化;functionmin(obj){varwin=obj.parentNode.parentNode;varsha=win.nextSibling;vartit=obj.parentNode;varmsg=tit.nextSibling;varflg=msg.style.display=="none";if(flg){win.style.height=parseInt(msg.style.height)+parseInt(tit.style.height)+2*2;sha.style.height=win.style.height;msg.style.display="block";obj.innerHTML="0";}else{win.style.height=parseInt(tit.style.height)+2*2;sha.style.height=win.style.height;obj.innerHTML="2";msg.style.display="none";}}//创立一个工具;functionxWin(id,w,h,l,t,tit,msg){index=index+2;this.id=id;this.width=w;this.height=h;this.left=l;this.top=t;this.zIndex=index;this.title=tit;this.message=msg;this.obj=null;this.bulid=bulid;this.bulid();}//初始化;functionbulid(){varstr=""+"<divid=xMsg"+this.id+""+"style="+"z-index:"+this.zIndex+";"+"width:"+this.width+";"+"height:"+this.height+";"+"left:"+this.left+";"+"top:"+this.top+";"+"background-color:"+normal+";"+"color:"+normal+";"+"font-size:8pt;"+"font-family:Tahoma;"+"position:absolute;"+"cursor:default;"+"border:2pxsolid"+normal+";"+""+">"+"<div"+"style="+"background-color:"+normal+";"+"width:"+(this.width-2*2)+";"+"height:20;"+"color:white;"+""+""+""+"onmousemove=drag(this)"+""+">"+"<spanstyle=width:"+(this.width-2*12-4)+";padding-left:3px;>"+this.title+"</span>"+"<spanstyle=width:12;border-width:0px;color:white;font-family:webdings;>0</span>"+"<spanstyle=width:12;border-width:0px;color:white;font-family:webdings;>r</span>"+"</div>"+"<divstyle="+"width:100%;"+"height:"+(this.height-20-4)+";"+"background-color:white;"+"line-height:14px;"+"word-break:break-all;"+"padding:3px;"+">"+this.message+"</div>"+"</div>"+"<divid=xMsg"+this.id+"bgstyle="+"width:"+this.width+";"+"height:"+this.height+";"+"top:"+this.top+";"+"left:"+this.left+";"+"z-index:"+(this.zIndex-1)+";"+"position:absolute;"+"background-color:black;"
12下一页
在几乎所有的浏览器上都可以使用。15.以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。
给大家带来用层摹拟可挪动的小窗口
一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来。+"filter:alpha(opacity=40);"+"></div>";document.body.insertAdjacentHTML("beforeEnd",str);}//显现埋没窗口functionShowHide(id,dis){varbdisplay=(dis==null)?((document.getElementById("xMsg"+id).style.display=="")?"none":""):disdocument.getElementById("xMsg"+id).style.display=bdisplay;document.getElementById("xMsg"+id+"bg").style.display=bdisplay;}//--></script><scriptlanguage=JScript><!--functioninitialize(){vara=newxWin("1",160,200,200,200,"窗口1","xWin<br>ACoolPopDivWindow<br>Version:1.0<br>2002-8-13");varb=newxWin("2",240,200,100,100,"窗口2","Welcometovisitedmypersonalwebsite:<br><ahref=http://www.youthfly.nettarget=_blank>http://www.youthfly.net</a><br>anducanalsosignmyguestbookat:<br><ahref=http://www...youthfly.net</a><br><br>thx!!!=)...");varc=newxWin("3",200,160,250,50,"窗口3","Copyrightby<ahref=mailto:webmaster#youthfly.net>Wildwind</a>!");ShowHide("1","none");//埋没窗口1}window.onload=initialize;//--></script></head><basetarget="_blank"><bodyonselectstart=returnfalseoncontextmenu=returnfalse><aonclick="ShowHide(1,null);returnfalse;"href="">窗口1</a><aonclick="ShowHide(2,null);returnfalse;"href="">窗口2</a><aonclick="ShowHide(3,null);returnfalse;"href="">窗口3</a></body></html></p></p>上一页12
最新版本html5+css3与2014年10月29日，万维网联盟宣布，经过几乎8年的艰辛努力，该标准规范终于最终制定完成。
给大家带来用层摹拟可挪动的小窗口
学Dreamweaver技术的过程其实是一个增加信心的过程。 技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。 您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。 Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。 Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。 技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。 难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人. 不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。 这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。
页:
[1]