[Web]常用的40个网站制作技巧[转]

信息来源： http://topic.csdn.net/u/20071114/12/ce2a4f15-3e7c-4f09-b6df-288640842498.html

1.   οncοntextmenu= "window.event.returnValue=false "   将彻底屏蔽鼠标右键 
< table    border   oncontextmenu =return(false) >   < td >  no  </ table >    可用于Table 

2.    < body    onselectstart = "return   false " >    取消选取、防止复制 

3.   οnpaste= "return   false "   不准粘贴 

4.   οncοpy= "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 " >   <!--  
if    (window    ==    top)top.location.href    =     " frames.htm  " ;    // frames.htm为框架网页 
//    --> </script> 

9 .   防止被人frame 
< SCRIPT   LANGUAGE = JAVASCRIPT >   <!--    
if    (top.location    !=    self.location)top.location = self.location; 
//    --> </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 " >   <!--  
function    getIE() 
dim   t,l,a,b 
set   a = document.all.img1 
t = document.all.img1.offsetTop 
l = document.all.img1.offsetLeft 
while    a.tagName  <>   " BODY  "  
set   a    =    a.offsetParent 
t = t + a.offsetTop 
l = l + a.offsetLeft 
wend 
msgbox    " top=  " & t & chr( 13 ) &   " left=  " & l, 64 ,  " 得到控件的位置  "  
end    function  
-->   </ 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 " >   <!--  
function    checkNum(str){ return    str.match( // D/)==null} 
alert(checkNum(  " 1232142141  " )) 
alert(checkNum(  " 123214214a1  " )) 
//    --> </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 " >    
<!--    Hide   
function    killErrors()   {   
return     true ;   
}   
window.onerror    =    killErrors;   
//    -->   
</ 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   

οnclick=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   

οnerrοr=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 " >  
<!--  
self.moveTo( 0 , 0 ) 
self.resizeTo(screen.availWidth,screen.availHeight) 
// --> 
</ 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 " >  

<!--  

var    gt    =    unescape(  ' %3e  ' ); 

var    popup    =     null ; 

var    over    =     " Launch   Pop-up   Navigator  " ; 

popup    =    window.open(  '   ' ,    ' popupnav  ' ,    ' width=225,height=235,resizable=1,scrollbars=auto  ' ); 

if    (popup    !=     null )   { 

if    (popup.opener    ==     null )   { 

popup.opener    =    self;   

} 

popup.location.href    =     ' tan.htm  ' ; 

} 

//    --> 

</ script >  
< body >  注意：这段代码是在新建文件中的 
< script    language = "JavaScript " >  

   function    closeit()   

   </ script >  

这个可不是  < iframe >  (引用）呀。是直接调用的。以下代码加入  < body >  区域 

< object    type = "text/x-scriptlet "    width = "800 "      height = "1000 "    data = "../index.htm " >  
</ object >