40类网站设计常用技巧 _Web前端

40种网站设计常用技巧

1. ? oncontextmenu="window.event.returnValue=false" ? 将彻底屏蔽鼠标右键 ?
? <table ? border ? oncontextmenu=return(false)><td>no</table> ? 可用于Table ?
? ?
? 2. ? <body ? onselectstart="return ? false"> ? 取消选取、防止复制 ?
? ?
? 3. ? onpaste="return ? false" ? 不准粘贴 ?
? ?
? 4. ? oncopy="return ? false;" ? oncut="return ? false;" ? 防止复制 ?
? ?
? 5. ? <link ? rel="Shortcut ? Icon" ? href="favicon.ico"> ? IE地址栏前换成自己的图标 ?
? ?
? 6. ? <link ? rel="Bookmark" ? href="favicon.ico"> ? 可以在收藏夹中显示出你的图标 ?
? ?
? 7. ? <input ? style="ime-mode:disabled"> ? 关闭输入法 ?
? ?
? 8. ? 永远都会带着框架 ?
? <script ? language="JavaScript"></script> ?
? ?
? 9. ? 防止被人frame ?
? <SCRIPT ? LANGUAGE=JAVASCRIPT></SCRIPT> ?
? ?
? 10. ? 网页将不能被另存为 ?
? <noscript><iframe ? src="/blog/*.html>";</iframe></noscript> ? ?
? ?
? 11. ? <input ? type=button ? value=查看网页源代码 ? ?
? onclick="window.location ? = ? "view-source:"+ ? "http://www.williamlong.info""> ?
? ?
? 12.删除时确认 ?
? <a ? href="javascript:if(confirm("确实要删除吗?"))location="boos.asp?&areyou=删除&page=1"">删除</a> ? ?
? ?
? 13. ? 取得控件的绝对位置 ?
? //Javascript ?
? <script ? language="Javascript"> ?
? function ? getIE(e){ ?
? var ? t=e.offsetTop; ?
? var ? l=e.offsetLeft; ?
? while(e=e.offsetParent) ?
? alert("top="+t+"/nleft="+l); ?
? } ?
? </script> ?
? ?
? //VBScript ?
? <script ? language="VBScript"></script> ?
? ?
? 14. ? 光标是停在文本框文字的最后 ?
? <script ? language="javascript"> ?
? function ? cc() ?
? { ?
? var ? e ? = ? event.srcElement; ?
? var ? r ? =e.createTextRange(); ?
? r.moveStart("character",e.value.length); ?
? r.collapse(true); ?
? r.select(); ?
? } ?
? </script> ?
? <input ? type=text ? name=text1 ? value="123" ? onfocus="cc()"> ?
? ?
? 15. ? 判断上一页的来源 ?
? javascript: ?
? document.referrer

16. ? 最小化、最大化、关闭窗口 ?
? <object ? id=hh1 ? classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"> ? ?
? <param ? name="Command" ? value="Minimize"></object> ?
? <object ? id=hh2 ? classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"> ? ?
? <param ? name="Command" ? value="Maximize"></object> ?
? <OBJECT ? id=hh3 ? classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"> ?
? <PARAM ? NAME="Command" ? VALUE="Close"></OBJECT> ?
? <input ? type=button ? value=最小化 ? onclick=hh1.Click()> ?
? <input ? type=button ? value=最大化 ? onclick=hh2.Click()> ?
? <input ? type=button ? value=关闭 ? onclick=hh3.Click()> ?
? 本例适用于IE ?
? ?
? 17.屏蔽功能键Shift,Alt,Ctrl ?
? <script> ?
? function ? look(){ ? ?
? if(event.shiftKey) ? ?
? alert("禁止按Shift键!"); ? //可以换成ALT　CTRL ?
? } ? ?
? document.onkeydown=look; ? ?
? </script> ?
? ?
? 18. ? 网页不会被缓存 ?
? <META ? HTTP-EQUIV="pragma" ? CONTENT="no-cache"> ?
? <META ? HTTP-EQUIV="Cache-Control" ? CONTENT="no-cache, ? must-revalidate"> ?
? <META ? HTTP-EQUIV="expires" ? CONTENT="Wed, ? 26 ? Feb ? 1997 ? 08:21:57 ? GMT"> ?
? 或者<META ? HTTP-EQUIV="expires" ? CONTENT="0"> ?
? ?
? 19.怎样让表单没有凹凸感？ ?
? <input ? type=text ? style="border:1 ? solid ? #000000"> ? ?
? 或 ?
? <input ? type=text ? style="border-left:none; ? border-right:none; ? border-top:none; ? border-bottom: ? ?
? ?
? 1 ? solid ? #000000"></textarea> ?
? ?
? 20.<div><span>&<layer>的区别？ ? ?
? <div>(division)用来定义大段的页面元素，会产生转行 ? ?
? <span>用来定义同一行内的元素，跟<div>的唯一区别是不产生转行 ? ?
? <layer>是ns的标记，ie不支持，相当于<div> ?
? ?
? 21.让弹出窗口总是在最上面: ?
? <body ? onblur="this.focus();"> ?
? ?
? 22.不要滚动条? ? ?
? 让竖条没有: ? ?
? <body ? style="overflow:scroll;overflow-y:hidden"> ? ?
? </body> ? ?
? 让横条没有: ? ?
? <body ? style="overflow:scroll;overflow-x:hidden"> ? ?
? </body> ? ?
? 两个都去掉？更简单了 ? ?
? <body ? scroll="no"> ? ?
? </body> ? ?
? ?
? 23.怎样去掉图片链接点击后，图片周围的虚线？ ?
? <a ? href="#" ? onFocus="this.blur()"><img ? src="/blog/logo.jpg" ? border=0></a> ?
? ?
? 24.电子邮件处理提交表单 ?
? <form ? name="form1" ? method="post" ? action="mailto:****@***.com" ? enctype="text/plain"> ? ?
? <input ? type=submit> ?
? </form> ?
? ?
? 25.在打开的子窗口刷新父窗口的代码里如何写？ ?
? window.opener.location.reload() ?
? ?
? 26.如何设定打开页面的大小 ?
? <body ? onload="top.resizeTo(300,200);"> ?
? 打开页面的位置<body ? onload="top.moveBy(300,200);"> ?
? ?
? 27.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动 ? ?
? <STYLE> ? ?
? body ? ?
? {background-image:url(/blog/logo.gif); ? background-repeat:no-repeat; ? ?
? background-position:center;background-attachment: ? fixed} ? ?
? </STYLE> ? ?
? ?
? 28. ? 检查一段字符串是否全由数字组成 ?
? <script ? language="Javascript"></script> ?
? ?
? 29. ? 获得一个窗口的大小 ?
? document.body.clientWidth; ? document.body.clientHeight ?
? ?
? 30. ? 怎么判断是否是字符 ?
? if ? (/[^/x00-/xff]/g.test(s)) ? alert("含有汉字"); ?
? else ? alert("全是字符"); ?
? ?
? 31.TEXTAREA自适应文字行数的多少 ?
? <textarea ? rows=1 ? name=s1 ? cols=27 ? onpropertychange="this.style.posHeight=this.scrollHeight"> ?
? </textarea> ?
? ?
? 32. ? 日期减去天数等于第二个日期 ?
? <script ? language=Javascript> ?
? function ? cc(dd,dadd) ?
? { ?
? //可以加上错误处理 ?
? var ? a ? = ? new ? Date(dd) ?
? a ? = ? a.valueOf() ?
? a ? = ? a ? - ? dadd ? * ? 24 ? * ? 60 ? * ? 60 ? * ? 1000 ?
? a ? = ? new ? Date(a) ?
? alert(a.getFullYear() ? + ? "年" ? + ? (a.getMonth() ? + ? 1) ? + ? "月" ? + ? a.getDate() ? + ? "日") ?
? } ?
? cc("12/23/2002",2) ?
? </script> ?
? ?
? 33. ? 选择了哪一个Radio ?
? <HTML><script ? language="vbscript"> ?
? function ? checkme() ?
? for ? each ? ob ? in ? radio1 ?
? if ? ob.checked ? then ? window.alert ? ob.value ?
? next ?
? end ? function ?
? </script><BODY> ?
? <INPUT ? name="radio1" ? type="radio" ? value="style" ? checked>Style ?
? <INPUT ? name="radio1" ? type="radio" ? value="barcode">Barcode ?
? <INPUT ? type="button" ? value="check" ? onclick="checkme()"> ?
? </BODY></HTML> ?
? ?
? 34.脚本永不出错 ?
? <SCRIPT ? LANGUAGE="JavaScript"> ? ?
?  ? ?
? </SCRIPT> ?
? ?
? 35.ENTER键可以让光标移到下一个输入框 ?
? <input ? onkeydown="if(event.keyCode==13)event.keyCode=9">

36. ? 检测某个网站的链接速度： ?
? 把如下代码加入<body>区域中: ?
? <script ? language=Javascript> ?
? tim=1 ?
? setInterval("tim++",100) ?
? b=1 ?
? var ? autourl=new ? Array() ?
? autourl[1]="www.njcatv.net" ?
? autourl[2]="javacool.3322.net" ?
? autourl[3]="www.sina.com.cn" ?
? autourl[4]="www.nuaa.edu.cn" ?
? autourl[5]="www.cctv.com" ?
? function ? butt(){ ?
? document.write("<form ? name=autof>") ?
? for(var ? i=1;i<autourl.length;i++) ?
? document.write("<input ? type=text ? name=txt"+i+" ? size=10 ? value="/blog/测试中......>" ? =》<input ? type=text ? ?
? name=url"+i+" ? size=40> ? =》<input ? type=button ? value=GO ? ?
? ?
? onclick=window.open(this.form.url"+i+".value)><br>") ?
? document.write("<input ? type=submit ? value=刷新></form>") ?
? } ?
? butt() ?
? function ? auto(url) ?
? else ?
? ?
? b++ ?
? } ?
? function ? run(){for(var ? i=1;i<autourl.length;i++)document.write("<img ? src=http://"+autourl+"/"+Math.random()+" ? width=1 ? height=1 ? ?
? ?
? onerror=auto("http://"+autourl+"")>")} ?
? run()</script> ?
? ?
? 37. ? 各种样式的光标 ?
? auto ? ：标准光标 ?
? default ? ：标准箭头 ?
? hand ? ：手形光标 ?
? wait ? ：等待光标 ?
? text ? ：I形光标 ?
? vertical-text ? ：水平I形光标 ?
? no-drop ? ：不可拖动光标 ?
? not-allowed ? ：无效光标 ?
? help ? ：?帮助光标 ?
? all-scroll ? ：三角方向标 ?
? move ? ：移动标 ?
? crosshair ? ：十字标 ?
? e-resize ?
? n-resize ?
? nw-resize ?
? w-resize ?
? s-resize ?
? se-resize ?
? sw-resize ?
? ?
? 38.页面进入和退出的特效 ?
? 进入页面<meta ? http-equiv="Page-Enter" ? content="revealTrans(duration=x, ? transition=y)"> ?
? 推出页面<meta ? http-equiv="Page-Exit" ? content="revealTrans(duration=x, ? transition=y)"> ? ? ?
? 这个是页面被载入和调出时的一些特效。duration表示特效的持续时间，以秒为单位。transition表示使用哪种特效，取值为1-23: ?
? 　　0 ? 矩形缩小 ? ?
? 　　1 ? 矩形扩大 ? ?
? 　　2 ? 圆形缩小 ?
? 　　3 ? 圆形扩大 ? ?
? 　　4 ? 下到上刷新 ? ?
? 　　5 ? 上到下刷新 ?
? 　　6 ? 左到右刷新 ? ?
? 　　7 ? 右到左刷新 ? ?
? 　　8 ? 竖百叶窗 ?
? 　　9 ? 横百叶窗 ? ?
? 　　10 ? 错位横百叶窗 ? ?
? 　　11 ? 错位竖百叶窗 ?
? 　　12 ? 点扩散 ? ?
? 　　13 ? 左右到中间刷新 ? ?
? 　　14 ? 中间到左右刷新 ?
? 　　15 ? 中间到上下 ?
? 　　16 ? 上下到中间 ? ?
? 　　17 ? 右下到左上 ?
? 　　18 ? 右上到左下 ? ?
? 　　19 ? 左上到右下 ? ?
? 　　20 ? 左下到右上 ?
? 　　21 ? 横条 ? ?
? 　　22 ? 竖条 ? ?
? 　　23 ? 以上22种随机选择一种 ?
? ?
? 39.在规定时间内跳转 ?
? <META ? http-equiv=V="REFRESH" ? content="5;URL=http://www.williamlong.info"> ? ?
? ?
? 40.网页是否被检索 ?
? <meta ? name="ROBOTS" ? content="属性值"> ?
? 　　其中属性值有以下一些: ?
? 　　属性值为"all": ? 文件将被检索，且页上链接可被查询； ?
? 　　属性值为"none": ? 文件不被检索，而且不查询页上的链接； ?
? 　　属性值为"index": ? 文件将被检索； ?
? 　　属性值为"follow": ? 查询页上的链接； ?
? 　　属性值为"noindex": ? 文件不检索，但可被查询链接； ?
? 　　属性值为"nofollow": ? 文件不被检索，但可查询页上的链接。 ?
? ?
? 最大化窗口？ ?
? <script ? language="JavaScript"> ?
?  ?
? </script> ?
? ?
? ? ?
? ?
? ?
? 解决问题：由于层与下拉框之间的优先级是：下拉框 ? > ? 层，因此在显示的时候，会因为优先级的次序而会出现如上问题。（如果几个元素都是层的话，我们可以通过层的 ? z-index ? 属性来设置）解决办法就是：给层中放一个优先级比下拉框更高的元素（iframe），从而解决此问题！具体解决代码如下： ?
? ?
? <div ? id="menu" ? style="position:absolute; ? visibility:hidden; ? top:20px; ? left:20px; ? width:100px; ? height:200px; ? background-color:#6699cc;"> ?
? <table> ?
? ? ? <tr><td>item ? 1</td></tr> ?
? ? ? <tr><td>item ? 2</td></tr> ?
? ? ? <tr><td>item ? 3</td></tr> ?
? ? ? <tr><td>item ? 4</td></tr> ?
? ? ? <tr><td>item ? 5</td></tr> ?
? ? ? </table> ?
? ? ? <iframe ? src="/blog/javascript:false" ? style="position:absolute; ? visibility:inherit; ? top:0px; ? left:0px; ? width:100px; ? height:200px; ? z-index:-1; ? filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"></iframe> ?
? </div> ?
? ?
? <a ? href="#" ? onclick="document.getElementById('menu').style.visibility='visible'">menu</a> ?
? ?
? <form> ?
? ? ? <select><option>A ? form ? selection ? list</option></select> ?
? </form> ?
? ?
? 输入框也可以做的很漂亮了 ?
? <div ? align="center"><input ? type="hidden" ? name="hao" ? value="yes"> ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 外向数：<input ? ?
? ? ? ? ? ? ? name=answer ? ?
? ? ? ? ? ? ? style="color: ? rgb(255,0,0); ? border-left: ? medium ? none; ? border-right: ? medium ? none; ? border-top: ? medium ? none; ? border-bottom: ? 1px ? solid ? rgb(192,192,192)"> ?
? ? ? ? ? ? ? ? ? ? ? ? ? 　没回答的题数：<input ? ?
? ? ? ? ? ? ? name=unanswer ? id="unanswer" ? ?
? ? ? ? ? ? ? style="color: ? rgb(255,0,0); ? border-left: ? medium ? none; ? border-right: ? medium ? none; ? border-top: ? medium ? none; ? border-bottom: ? 1px ? solid ? rgb(192,192,192)"> ?
? ? ? ? ? ? ? ? ? ? ? ? ? <br> ?
? ? ? ? ? ? ? ? ? ? ? ? ? 总得分: ?
? ? ? ? ? ? ? ? ? ? ? ? ? <input ? ?
? ? ? ? ? ? ? name=score ? id="score" ? ?
? ? ? ? ? ? ? style="color: ? rgb(255,0,0); ? border-left: ? medium ? none; ? border-right: ? medium ? none; ? border-top: ? medium ? none; ? border-bottom: ? 1px ? solid ? rgb(192,192,192)"> ?
? ? ? ? ? ? ? ? ? ? ? ? ? 　结　　　　论: ?
? ? ? ? ? ? ? ? ? ? ? ? ? <input ? ?
? ? ? ? ? ? ? name=xgjg ? id="xgjg" ? ?
? ? ? ? ? ? ? style="color: ? rgb(255,0,0); ? border-left: ? medium ? none; ? border-right: ? medium ? none; ? border-top: ? medium ? none; ? border-bottom: ? 1px ? solid ? rgb(192,192,192)"> ?
? ? ? ? ? ? ? ? ? ? ? ? ? <br> ?
? ? ? ? ? ? ? ? ? ? ? ? ? <br> ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? <input ? onClick=processForm(this.form) ? style="FONT-FAMILY: ? 宋体; ? FONT-SIZE: ? 9pt" ? type=button ? value=查看结果 ? name="button"> ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? <input ? type="reset" ? name="Submit" ? value="重做"> ?
? ? ? ? ? ? ? ? ? ? ? ? ? </div> ?
? 注意：修改<body>为<body ? onload="max.Click()">即为打开最大 ?
? ?
? 化窗口，而如果改为<body ? onload="min.Click()">就变为窗口一打开就最小化 ?
? ?
? <object ? id="min" ? type="application/x-oleobject" ? classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"> ?
? ? ? ? ? ? ? ? ? ? ? ? ? <param ? name="Command" ? value="Minimize"> ?
? ? ? ? ? ? ? ? ? ? ? </object> ? <object ? id="max" ? type="application/x-oleobject" ? classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"> ?
? ? ? ? ? ? ? ? ? ? ? ? ? <param ? name="Command" ? value="Maximize"> ?
? ? ? ? ? ? ? ? ? ? ? </object> ?
? </body> ?
? ?
? 页面自动刷新（说明） ?
? ?
? 当你做网页时，是不是有的时候想让你的网页自动不停刷新，或者过一段时间自动跳转到另外一个你自己设定的页面？其实实现这个效果非常地简单，而且这个效果甚至不能称之为特效。你只要把如下代码加入你的网页中就可以了。 ?
? ?
? 1，页面自动刷新：把如下代码加入<head>区域中<meta ? http-equiv="refresh" ? content="20">,其中20指每隔20秒刷新一次页面. ?
? ?
? 2，页面自动跳转：把如下代码加入<head>区域中<meta ? http-equiv="refresh" ? content="20;url=http://www.williamlong.info">,其中20指隔20秒后跳转到http: //www.williamlong.info页面。 ? ?
? ?
? 页面自动关闭 ?
? ?
? 5000是指时间<body ? onLoad="setTimeout(window.close, ? 5000)"> ? ?
? ?
? 弹出窗口自动关闭 ? ?
? ?
? 10秒后弹出窗口自动关闭 ?
? ?
? 注意：在新的tan.htm的body中要加 ? <onLoad="closeit()"> ?
? head ?
? ?
? <script ? language="JavaScript"> ?
? ?
?  ?
? ?
? </script> ?
? <body>注意：这段代码是在新建文件中的 ?
? <script ? language="JavaScript"> ?
? ?
? ? function ? closeit() ? ?
? ?
? ? </script> ?
? ?
? 这个可不是<iframe>(引用）呀。是直接调用的。以下代码加入<body>区域 ?
? ?
? <object ? type="text/x-scriptlet" ? width="800" ? ? height="1000" ? data="../index.htm"> ?
? </object>