HTML、JavaScript﹝VBScript﹞與CSS教學

woff · 發表於 2008-9-13 17:46:31

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">


</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></style>

複製代碼

【加入音樂】

<bgsound src="音樂檔的網址" loop="-1">

複製代碼

【於網頁左上打標題】

<script>document.title="網站名稱";</script>

複製代碼

【捲軸變色】

<style type="text/css">  </style>

複製代碼

【去除廣告】

<script language=javascript>window.document.all[5].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[document.images[0].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[0].elements[0];
opener.document.form1.fruit.value =
sel.options[sel.selectedIndex].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>

複製代碼

↑下邊並排背景。

ＮＡＳＡ · 發表於 2009-3-4 11:22:06

= = ......看攏無...............

安仔呀 · 發表於 2009-3-10 09:29:12

還滿齊全的，都是常用的東西，感謝分享!!
這樣以後要用到的時候就不用到處找了:129:

20120823 · 發表於 2012-8-27 12:09:10

我惊呆了，好贴啊，很难得的好贴

帳號		自動登錄		找回密碼
密碼				註冊

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