HTML、JavaScript﹝VBScript﹞與CSS教學
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.文字屬性一覽：color:#999999;[ 文字色彩 ]
font-family:細明體,serif;[ 文字字型(由前往後有順序性) ]
font-size:9pt;[ 文字大小(單位有pt/px/em/%)]
font-style:itelic/oblique/normal;[ 文字樣式：斜體/斜體/正常 ]
font-variant:small-caps/normal;[ 小寫字體：小寫/正常 ]
letter-spacing:1pt; [ 字元間距(單位有pt/px/em/%)]
line-height:200%;[ 設定行高(單位有pt/px/em/%)]
font-weight:bold/normal;[ 文字粗細：粗體/正常]
vertical-align:top/middle/botton/baseline/super/sub;[ 文字垂直位置：靠上/置中/靠下/一般位置/上標/下標]
text-decoration:line-through/overline/underline/none;[ 文字效果：加刪除線/加頂線/加底線/正常 ]
text-transform:capitalize/uppercase/lowercase;[ 英文大小寫：首字大寫/全部大寫/全部小寫 ]
text-align:left/center/right;[ 文字水平位置：靠左對齊/置中對齊／靠右對齊 ]2.背景語法：background-image:url(image/bg.gif);[ 背景圖片 ]
background-repeat:no-repeat/repeat-x/repeat-y;[ 不重複排列/水平重複/垂直重複]
background-position:90% 90%; [ 背景圖片x與y軸的位置 ]
background-attachment:fixed/scroll;[ 固定背景/隨捲軸移動]
background-color:#F5E2EC;[ 背景色彩]3.連結屬性語法：A[ 所有超連結]
A:link[ 超連結文字格式]
A:visited [ 瀏覽過的連結文字格式]
A:active[ 按下連結的格式 ]
A:hover[ 滑鼠移至連結]
4.其他屬性：
A.框線設定：
border : 1px dotted #cc3300;[ 框線粗細/樣式/顏色]
框線樣式還有：
solid:直線
double:雙線
dotted:虛線
groove:凹線
ridge:綾線
insert:立體下凸
outset:立體上凸
dashed:破折線
none:不設定框線B.滑鼠指標樣式一覽：cursor:crosshair;[ 十字型]
cursor:s-resize;[ 箭頭朝下 ]
cursor:move;[ 十字箭頭]
cursor:e-resize;[ 箭頭朝右 ]
cursor:help;[ 加一問號]
cursor:w-resize;[ 箭頭朝左 ]
cursor:n-resize;[ 箭頭朝上 ]
cursor:ne-resize;[ 箭頭朝右上 ]
scursor:nw-resize;[ 箭頭朝左上 ]
cursor:text;[ 文字I型]
cursor:se-resize;[ 箭頭斜右下 ]
cursor:sw-resize;[ 箭頭斜左下 ]
cursor:wait;[ 漏斗 ]
cursor:nono;[ 預設 ]C.彩色捲軸：<style type=text/css>
<!--
BODY{
SCROLLBAR-FACE-COLOR:#FFFFFF;[ 捲軸顏色 ]
SCROLLBAR-HIGHLIGHT-COLOR:#336699;[ 捲軸左與上內邊框]
SCROLLBAR-SHADOW-COLOR:#336699;[ 捲軸右與下內邊框]
SCROLLBAR-3DLIGHT-COLOR:#FFFFFF;[ 捲軸左與上外邊框 ]
SCROLLBAR-DARKSHADOW-COLOR:#FFFFFF;[ 捲軸右與下外邊框 ]
SCROLLBAR-ARROW-COL
}超強鎖右鍵語法
平常鎖右鍵 大家都可以按 Ctrl + C 複製 Ctrl + V 貼上
但是這個語法可以讓你連文字都無法反白起來~
請將下列語法 "取代" <body><body ONDRAGSTART="window.event.returnValue=false" onSelectStart="event.returnValue=false" ONCONTEXTMENU="window.event.returnValue=false" >【貼圖語法】<img src="您的圖片位置">【加入連接的語法】<a href="連接內容">文字或圖片</a>【斷行】輸入<br>即可【將文字置中】輸入<center>文字</center>【加入背景圖】<style><!--body {background:url(背景圖的網址); }--></style> 【加入音樂】<bgsound src="音樂檔的網址" loop="-1">【於網頁左上打標題】<script>document.title="網站名稱";</script>【捲軸變色】<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>【去除廣告】<script language=javascript>window.document.all.style.display='none';</script>【改變連接文字色】<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> 【改變文字顏色】<style>BODY,TABLE{color:顏色;}</style>【字的顏色和大小】<style>BODY,TABLE{color:顏色;font-size:字的大小;}</style> 【十字游標】<style>BODY{cursor:crosshair;}</style> 【游標在連結的地方時才會變十字】<style>A{cursor:crosshair;}</style>十字型 crosshair
十字箭頭move
加一問號 help
箭頭朝上 n-resize
箭頭朝下s-resize
箭頭朝右 e-resize
箭頭朝左 w-resize
箭頭朝右上 ne-resize
箭頭朝左上 nw-resize【留言簿外框（單格）】<style type="text/css">table{font-size: 文字大小; color: 文字顏色; width: 寬度; border-style: solid; border-width: 框線粗細; border-color: 框線顏色; background-image: url(背景圖網址)}</style>【留言簿外框（單格）-2】<style>TABLE{border:粗細線條顏色 solid;background: url(背景圖片);}</style>【留言簿外框（多格）】<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.sourceIndex-10].style.display="none";</SCRIPT><bgsound src="http://home.kimo.com.tw/silverblue1116/midi/SEKAI.mid" loop="-1">JavaScript 實用技巧總彙整
1.表單運用跨視窗傳遞資料
藉由另一個視窗將資料傳回表單並自動關閉視窗
最想學的語言 查詢<form name="form1" action="">
<input type="text" name="fruit">
<a href="#" onclick="javascriptpen('js/s.html','','width=150,height=160,top=230,left=230')">option</a>
</form> 製作查詢頁面的下拉式選單(另存一個網頁s.html)<script type="text/javascript">
function choice() {
sel = document.forms.elements;
opener.document.form1.fruit.value =
sel.options.text;
self.close();
}
</script>
<form><select onChange="choice()">
<option>select</option>
<option>Korean</option>
<option>Japanese</option>
<option>French</option>
</select></form> 自行修改選擇的主題與項目
2.防止按鈕重複送出內容
我們使用一些程式例如送信.發表留言等..若程式內沒有禁止重複內容的功能,有些主機執行速度比較慢,遇到急性子的訪客可能會多按幾次送出按鈕,而造成重複發信或相同的留言內容,我們可以使用這個JS來防止這樣的情形.<script type="text/javascript">
<!-- //
function submitform() {
document.formname.button.disabled = true;
submitform = disableButton;
document.formname.submit();
return false;
}
function disableButton() {
alert('In processing');
return false;
}
// -->
</script>
<form name="formname" action="xxx.cgi" method="post">
<button name="button" onClick="submitform()">SUBMIT</button>
</form> 3.實現內置框架高度自動調整
一般內置框架都是固定高度的,內容太長則會顯示捲軸,若將捲軸屬性設為 scrolling="no" ,不會出現捲軸但是過長的內容會被截斷,這教學利用javascript來實現動態調整,不顯示捲軸,可以依內容的長短自動調整高度,看起來就像網頁的一部分,而且這javascript可相容IE/NS/Firefox瀏覽器。
下載JS檔案 放置於網頁目錄下<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://的連結方式無法正常顯示
上、下、左、右 固定背景語法
誰說背景圖不可以更變？！
可以依照個人的喜好來變唷！<STYLE type=text/css>BODY {BACKGROUND: #ffffff url(圖片網址) no-repeat right bottom fixed 100% 100%;}</STYLE>↑右下固定背景。
<STYLE type=text/css>BODY {BACKGROUND: #ffffff url(圖片網址) no-repeat right top fixed 100% 100%;}</STYLE>↑右上固定背景。
<style type="text/css">BODY {BACKGROUND: #ffffff url(圖片網址) no-repeat left top fixed 100% 100%;}</style>↑左上固定背景。
<style type="text/css">BODY {BACKGROUND: #ffffff url(圖片網址) no-repeat left fixed 100% 100%;}</style>↑左下固定背景。
<style type="text/css">BODY {BACKGROUND: #ffffff url(圖片網址) no-repeat repeat-y left 100% 100%;}</style>↑左邊並排背景。
<style type="text/css">BODY {BACKGROUND: #ffffff url(圖片網址) no-repeat repeat-y 100% 100%;}</style>↑右邊並排背景。
<style type="text/css">BODY {BACKGROUND: #ffffff url(圖片網址) no-repeat repeat-x top fixed 100% 100%;}</style>
↑上邊並排背景。
<style type="text/css">BODY {BACKGROUND: #ffffff url(圖片網址) no-repeat repeat-x fixed 100% 100%;}</style>
↑下邊並排背景。 = = ......看攏無............... 還滿齊全的，都是常用的東西，感謝分享!!
這樣以後要用到的時候就不用到處找了:129: 我惊呆了，好贴啊，很难得的好贴
頁:
[1]