當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

40个常用的网站制作技巧

發布時間：2023/11/27 生活经验 45 豆豆

生活随笔收集整理的這篇文章主要介紹了 40个常用的网站制作技巧小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. ? οncοntextmenu= "window.event.returnValue=false " ? 將徹底屏蔽鼠標右鍵
<table ? border ? οncοntextmenu=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 ">  </script>

9. ? 防止被人frame
<SCRIPT ? LANGUAGE=JAVASCRIPT>  </SCRIPT>

10. ? 網頁將不能被另存為
<noscript> <iframe ? src= "/blog/*.html> "; </iframe> </noscript> ?

11. ? <input ? type=button ? value=查看網頁源代碼 ?
οnclick= "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 " ? οnfοcus= "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=最小化 ? οnclick=hh1.Click()>
<input ? type=button ? value=最大化 ? οnclick=hh2.Click()>
<input ? type=button ? value=關閉 ? οnclick=hh3.Click()>
本例適用于IE

17.屏蔽功能鍵Shift,Alt,Ctrl
<script>
function ? look(){ ?
if(event.shiftKey) ?
alert( "禁止按Shift鍵! "); ? //可以換成ALT　CTRL
} ?
document.οnkeydοwn=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 ? οnblur= "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 ? οnlοad= "top.resizeTo(300,200); ">
打開頁面的位置 <body ? οnlοad= "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 " ? οnclick= "checkme() ">
</BODY> </HTML>

34.腳本永不出錯
<SCRIPT ? LANGUAGE= "JavaScript "> ?
 ?
</SCRIPT>

35.ENTER鍵可以讓光標移到下一個輸入框
<input ? οnkeydοwn= "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 ">

</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= "# " ? οnclick= "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 ? οnlοad= "max.Click() "> 即為打開最大

化窗口，而如果改為 <body ? οnlοad= "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>

轉載于:https://www.cnblogs.com/Aioria0622/archive/2007/12/03/981431.html

總結

以上是生活随笔為你收集整理的40个常用的网站制作技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：酒吧常见的洋酒
下一篇： .NET开发不可不知、不可不用的辅助类（

日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

生活经验

40个常用的网站制作技巧

總結