TShopping

 找回密碼
 註冊
搜索
查看: 6855|回復: 3

[分享] HTML、JavaScript﹝VBScript﹞與CSS教學

    [複製鏈接]
發表於 2008-9-13 17:46:31 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
HTML、JavaScript﹝VBScript﹞與CSS教學範例連結如下:
http://kueili.xxking.com/kk/new.html

滑鼠游標參考處網址如下:
http://home.kimo.com.tw/a815182/ani/1_index.htm

整個語法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" c />
<title>滑鼠游標範例</title>
<style type="text/css">
<!--
body {cursor:url(http://www.themecool.com.tw/them ... /ccrem0000214.ani);}

body {
        background-image: url();
}
.style1 {
        font-size: 24px;
        font-weight: bold;
        color: #3300CC;
}
-->

</style>

</head>

<body>
<p align="center" class="style1">滑鼠游標套校範例</p>
<table width="709" height="373" border="1" align="center">
  <tr>
    <td valign="top"><img src="img/09.jpg" width="800" height="600" /></td>
  </tr>
</table>
</body>
</html>


PS.注意紅色的那段語法:P

常用CSS語法介紹

1.文字屬性一覽:
  1. color:#999999;  [ 文字色彩 ]
  2. font-family:細明體,serif;  [ 文字字型(由前往後有順序性) ]
  3. font-size:9pt;  [ 文字大小(單位有pt/px/em/%)  ]
  4. font-style:itelic/oblique/normal;  [ 文字樣式:斜體/斜體/正常 ]
  5. font-variant:small-caps/normal;  [ 小寫字體:小寫/正常 ]
  6. letter-spacing:1pt;          [ 字元間距(單位有pt/px/em/%)  ]
  7. line-height:200%;  [ 設定行高(單位有pt/px/em/%)  ]
  8. font-weight:bold/normal;  [ 文字粗細:粗體/正常  ]
  9. vertical-align:top/middle/botton/baseline/super/sub;  [ 文字垂直位置:靠上/置中/靠下/一般位置/上標/下標  ]
  10. text-decoration:line-through/overline/underline/none;  [ 文字效果:加刪除線/加頂線/加底線/正常 ]
  11. text-transform:capitalize/uppercase/lowercase;  [ 英文大小寫:首字大寫/全部大寫/全部小寫 ]
  12. text-align:left/center/right;  [ 文字水平位置:靠左對齊/置中對齊/靠右對齊 ]
複製代碼
2.背景語法:
  1. background-image:url(image/bg.gif);  [ 背景圖片 ]
  2. background-repeat:no-repeat/repeat-x/repeat-y;  [ 不重複排列/水平重複/垂直重複  ]
  3. background-position:90% 90%; [ 背景圖片x與y軸的位置 ]
  4. background-attachment:fixed/scroll;  [ 固定背景/隨捲軸移動  ]
  5. background-color:#F5E2EC;  [ 背景色彩  ]
複製代碼
3.連結屬性語法:
  1. A  [ 所有超連結  ]
  2. A:link  [ 超連結文字格式  ]
  3. A:visited         [ 瀏覽過的連結文字格式  ]
  4. A:active  [ 按下連結的格式 ]
  5. A:hover  [ 滑鼠移至連結  ]

  6. 4.其他屬性:
  7. A.框線設定:
  8. border : 1px dotted #cc3300;  [ 框線粗細/樣式/顏色  ]
  9. 框線樣式還有:
  10. solid:直線
  11. double:雙線
  12. dotted:虛線
  13. groove:凹線
  14. ridge:綾線
  15. insert:立體下凸
  16. outset:立體上凸
  17. dashed:破折線
  18. none:不設定框線
複製代碼
B.滑鼠指標樣式一覽:
  1. cursor:crosshair;  [ 十字型  ]
  2. cursor:s-resize;  [ 箭頭朝下 ]
  3. cursor:move;  [ 十字箭頭  ]
  4. cursor:e-resize;  [ 箭頭朝右 ]
  5. cursor:help;  [ 加一問號  ]
  6. cursor:w-resize;  [ 箭頭朝左 ]
  7. cursor:n-resize;  [ 箭頭朝上 ]
  8. cursor:ne-resize;  [ 箭頭朝右上 ]
  9. scursor:nw-resize;  [ 箭頭朝左上 ]
  10. cursor:text;  [ 文字I型  ]
  11. cursor:se-resize;  [ 箭頭斜右下 ]
  12. cursor:sw-resize;  [ 箭頭斜左下 ]
  13. cursor:wait;  [ 漏斗 ]
  14. cursor:nono;  [ 預設 ]
複製代碼
C.彩色捲軸:
  1. <style type=text/css>
  2. <!--
  3. BODY{
  4. SCROLLBAR-FACE-COLOR:#FFFFFF;  [ 捲軸顏色 ]
  5. SCROLLBAR-HIGHLIGHT-COLOR:#336699;  [ 捲軸左與上內邊框  ]
  6. SCROLLBAR-SHADOW-COLOR:#336699;  [ 捲軸右與下內邊框  ]
  7. SCROLLBAR-3DLIGHT-COLOR:#FFFFFF;  [ 捲軸左與上外邊框 ]
  8. SCROLLBAR-DARKSHADOW-COLOR:#FFFFFF;  [ 捲軸右與下外邊框 ]
  9. SCROLLBAR-ARROW-COL
  10. }
複製代碼
超強鎖右鍵語法

平常鎖右鍵 大家都可以按 Ctrl + C 複製 Ctrl + V 貼上
但是這個語法可以讓你連文字都無法反白起來~

請將下列語法 "取代" <body>
  1. <body ONDRAGSTART="window.event.returnValue=false" onSelectStart="event.returnValue=false" ONCONTEXTMENU="window.event.returnValue=false" >
複製代碼
【貼圖語法】
  1. <img src="您的圖片位置">
複製代碼
【加入連接的語法】
  1. <a href="連接內容">文字或圖片</a>
複製代碼
【斷行】
  1. 輸入<br>即可
複製代碼
【將文字置中】
  1. 輸入<center>文字</center>
複製代碼
【加入背景圖】
  1. <style><!--body {background:url(背景圖的網址); }--></style>
複製代碼
【加入音樂】
  1. <bgsound src="音樂檔的網址" loop="-1">
複製代碼
【於網頁左上打標題】
  1. <script>document.title="網站名稱";</script>
複製代碼
【捲軸變色】
  1. <style type="text/css"> <!-- BODY { scrollbar-face-color:#FF0000; scrollbar-highlight-color:#FF80C0; scrollbar-3dlight-color:#800040; scrollbar-darkshadow-color:#800040; scrollbar-shadow-color:#FF00FF; scrollbar-arrow-color:#FF8080; scrollbar-track-color:#400080; } --> </style>
複製代碼
【去除廣告】
  1. <script language=javascript>window.document.all[5].style.display='none';</script>
複製代碼
【改變連接文字色】
  1. <style TYPE="text/css"> <!- A:link {text-decoration: none; color: #0080c0;}A:visited {text-decoration: none; color: #0080c0;} A:active {text-decoration:none; color: ffffff;background:#0080c0} A:hover {text-decoration: none; color: #oo8oc0;background:#d9e9ee} --></style>
複製代碼
【改變文字顏色】
  1. <style>BODY,TABLE{color:顏色;}</style>
複製代碼
【字的顏色和大小】
  1. <style>BODY,TABLE{color:顏色;font-size:字的大小;}</style> 
複製代碼
【十字游標】
  1. <style>BODY{cursor:crosshair;}</style> 
複製代碼
【游標在連結的地方時才會變十字】
  1. <style>A{cursor:crosshair;}</style>
複製代碼
  1. 十字型 crosshair
  2. 十字箭頭move
  3. 加一問號 help
  4. 箭頭朝上 n-resize     
  5. 箭頭朝下s-resize     
  6. 箭頭朝右 e-resize   
  7. 箭頭朝左 w-resize   
  8. 箭頭朝右上 ne-resize   
  9. 箭頭朝左上 nw-resize  
複製代碼
【留言簿外框(單格)】
  1. <style type="text/css">table{font-size: 文字大小; color: 文字顏色; width: 寬度; border-style: solid; border-width: 框線粗細; border-color: 框線顏色; background-image: url(背景圖網址)}</style>
複製代碼
【留言簿外框(單格)-2】
  1. <style>TABLE{border:粗細線條顏色 solid;background: url(背景圖片);}</style>
複製代碼
【留言簿外框(多格)】
  1. <style>BODY{cursor:crosshair;}TD{border:1 #72A6F3 solid;background:#C2E3F8;}TABLE{border:1 #748DF1;background: url();filter:alpha(opacity=60);}A{cursor:hand;}A:HOVER{color:#FBAEF9;background:#EFCAFD;}A:VISITED{color:#A798F7;background:#EFCAFD;}</style><SCRIPT>document.all[document.images[0].sourceIndex-10].style.display="none";</SCRIPT><bgsound src="http://home.kimo.com.tw/silverblue1116/midi/SEKAI.mid" loop="-1">
複製代碼
JavaScript 實用技巧總彙整

1.表單運用跨視窗傳遞資料
藉由另一個視窗將資料傳回表單並自動關閉視窗
最想學的語言 查詢
  1. <form name="form1" action="">
  2. <input type="text" name="fruit">
  3. <a href="#" onclick="javascriptpen('js/s.html','','width=150,height=160,top=230,left=230')">option</a>
  4. </form>
複製代碼
製作查詢頁面的下拉式選單(另存一個網頁s.html)
  1. <script type="text/javascript">
  2. function choice() {
  3. sel = document.forms[0].elements[0];
  4. opener.document.form1.fruit.value =
  5. sel.options[sel.selectedIndex].text;
  6. self.close();
  7. }
  8. </script>
  9. <form><select onChange="choice()">
  10. <option>select</option>
  11. <option>Korean</option>
  12. <option>Japanese</option>
  13. <option>French</option>
  14. </select></form>
複製代碼
自行修改選擇的主題與項目

2.防止按鈕重複送出內容
我們使用一些程式例如送信.發表留言等..若程式內沒有禁止重複內容的功能,有些主機執行速度比較慢,遇到急性子的訪客可能會多按幾次送出按鈕,而造成重複發信或相同的留言內容,我們可以使用這個JS來防止這樣的情形
  1. .<script type="text/javascript">
  2. <!-- //
  3. function submitform() {
  4. document.formname.button.disabled = true;
  5. submitform = disableButton;
  6. document.formname.submit();
  7. return false;
  8. }
  9. function disableButton() {
  10. alert('In processing');
  11. return false;
  12. }
  13. // -->
  14. </script>
  15. <form name="formname" action="xxx.cgi" method="post">
  16. <button name="button" onClick="submitform()">SUBMIT</button>
  17. </form>
複製代碼
3.實現內置框架高度自動調整
一般內置框架都是固定高度的,內容太長則會顯示捲軸,若將捲軸屬性設為 scrolling="no" ,不會出現捲軸但是過長的內容會被截斷,這教學利用javascript來實現動態調整,不顯示捲軸,可以依內容的長短自動調整高度,看起來就像網頁的一部分,而且這javascript可相容IE/NS/Firefox瀏覽器。
下載JS檔案 放置於網頁目錄下
  1. <script type="text/javascript" src="iframe.js"></script> <iframe id="myTestFrameID" onload="javascript:{dyniframesize('myTestFrameID');}" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" src="home.html" width="100%" height="300"></iframe>
複製代碼
home.html 是內置框架中的網頁
請使用內部連結例如../home.html
用http://的連結方式無法正常顯示

上、下、左、右 固定背景語法

誰說背景圖不可以更變?!
可以依照個人的喜好來變唷!
  1. <STYLE type=text/css>BODY {BACKGROUND: #ffffff url(圖片網址) no-repeat right bottom fixed 100% 100%;}</STYLE>
複製代碼
↑右下固定背景。

  1. <STYLE type=text/css>BODY {BACKGROUND: #ffffff url(圖片網址) no-repeat right top fixed 100% 100%;}</STYLE>
複製代碼
↑右上固定背景。


  1. <style type="text/css">BODY {BACKGROUND: #ffffff url(圖片網址) no-repeat left top fixed 100% 100%;}</style>
複製代碼
↑左上固定背景。

  1. <style type="text/css">BODY {BACKGROUND: #ffffff url(圖片網址) no-repeat left fixed 100% 100%;}</style>
複製代碼
↑左下固定背景。


  1. <style type="text/css">BODY {BACKGROUND: #ffffff url(圖片網址) no-repeat repeat-y left 100% 100%;}</style>
複製代碼
↑左邊並排背景。

  1. <style type="text/css">BODY {BACKGROUND: #ffffff url(圖片網址) no-repeat repeat-y 100% 100%;}</style>
複製代碼
↑右邊並排背景。

  1. <style type="text/css">BODY {BACKGROUND: #ffffff url(圖片網址) no-repeat repeat-x top fixed 100% 100%;}</style>
複製代碼

↑上邊並排背景。

  1. <style type="text/css">BODY {BACKGROUND: #ffffff url(圖片網址) no-repeat repeat-x fixed 100% 100%;}</style>
複製代碼

↑下邊並排背景。

 

臉書網友討論
發表於 2009-3-4 11:22:06 | 顯示全部樓層
= = ......看攏無...............

版主招募中

發表於 2009-3-10 09:29:12 | 顯示全部樓層
還滿齊全的,都是常用的東西,感謝分享!!
這樣以後要用到的時候就不用到處找了:129:


發表於 2012-8-27 12:09:10 | 顯示全部樓層
我惊呆了,好贴啊,很难得的好贴


您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-10 03:41 , Processed in 0.057687 second(s), 17 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表