0


歡迎光臨!! 救國團台中學苑 社會教育研習中心 電腦班隊研習營【網頁設計課程】


目錄選單語法




直立樹狀式選單


將原始碼複製到<HEAD></HEAD>標籤之間

<style type="text/css">
<!--
A:hover{color:#FF0000;background-color:#FFFF80}
A.MainMenu{text-decoration:none;font:10pt;color:#0000FF}
A.SubMenu{text-decoration:none;font-weight:normal;font:10pt;color:#9F40FF}
DIV.SubMenu{margin-left:10pt}
.cdh{color:#1F1F1F;font:10pt}
-->
</style>
<script language="JavaScript">
<!--
var currentMenu = 1;
function ShowSubMenu(id) {
if (document.all["SubMenu" + id].style.display == "")
{
document.all["SubMenu" + id].style.display = "none";
currentMenu = 0;
}
else
{
if (currentMenu != 0) {document.all["SubMenu" + currentMenu].style.display = "none";}
document.all["SubMenu" + id].style.display = "";
currentMenu = id;
}
}
-->
</script>

------------------------------------------------------
在 A:hover{color:#FF0000;background-color:#FFFF80}
中修改游標觸碰時文字的顏色及底色
在 A.MainMenu{text-decoration:none;font:10pt;color:#0000FF}
中修改分類大項的文字大小及顏色
在 A.SubMenu{text-decoration:none;font-weight:normal;font:10pt;color:#9F40FF}
中修改內部連結的文字大小及顏色
在 DIV.SubMenu{margin-left:10pt}
中修改內部連結部份距離視窗左方的距離
在 .cdh{color:#1F1F1F;font:10pt}
中修改細部分類標題的文字大小及顏色(如果沒有可省略)

-------------------------------------------------------

將原始碼複製到網頁中欲呈現特效的位置

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="center">
<a class="MainMenu" href="JavaScript:ShowSubMenu(1)">認識網頁設計</a>
</td>
</tr>
</table>
<div id="SubMenu1" class="SubMenu" style="display:none">
<a class="SubMenu" href="http://wssh0812.myweb.hinet.net/05/002.htm">前言</a><br>
<a class="SubMenu" href="http://wssh0812.myweb.hinet.net/05/002002.htm">基本觀念</a><br>
<a class="SubMenu" href="http://wssh0812.myweb.hinet.net/05/002003.htm">Html語言</a><br>
<a class="SubMenu" href="http://wssh0812.myweb.hinet.net/05/002004.htm">Html基本語法</a><br>
</div>

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="center">
<a class="MainMenu" href="JavaScript:ShowSubMenu(2)">網頁語法介紹</a>
</td>
</tr>
</table>
<div id="SubMenu2" class="SubMenu" style="display:none">
<span class="cdh">基礎語法</span><br>
<a class="SubMenu" href="http://wssh0812.myweb.hinet.net/05/007001.htm">文字特效語法</a><br>
<a class="SubMenu" href="http://wssh0812.myweb.hinet.net/05/007002.htm">跑馬燈特效語法</a><br>
<a class="SubMenu" href="http://wssh0812.myweb.hinet.net/05/007003.htm">游標特效語法</a><br>
<span class="cdh">進階語法</span><br>
<a class="SubMenu" href="http://wssh0812.myweb.hinet.net/05/007004.htm">背景與圖片特效語法</a><br>
<a class="SubMenu" href="http://wssh0812.myweb.hinet.net/05/007005.htm">超連結語法</a><br>
<a class="SubMenu" href="http://wssh0812.myweb.hinet.net/05/007006.htm">視窗特效語法</a><br>
<a class="SubMenu" href="http://wssh0812.myweb.hinet.net/05/007007.htm">計數器語法</a><br>
<a class="SubMenu" href="http://wssh0812.myweb.hinet.net/05/007008.htm">動畫特效語法</a><br>
<a class="SubMenu" href="http://wssh0812.myweb.hinet.net/05/007009.htm">其他特效語法</a><br>
</div>

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="center">
<a class="MainMenu" href="JavaScript:ShowSubMenu(3)">影音動畫好好玩</a>
</td>
</tr>
</table>
<div id="SubMenu3" class="SubMenu" style="display:none">
<span class="cdh">影音館</span><br>
<a class="SubMenu" href="http://wssh0812.myweb.hinet.net/05/009901.htm">照片播放器</a><br>
<a class="SubMenu" href="http://wssh0812.myweb.hinet.net/05/009902.htm">影音播放器</a><br>
<span class="cdh">收藏館</span><br>
<a class="SubMenu" href="http://wssh0812.myweb.hinet.net/05/104.htm">小小動畫區</a><br>
<a class="SubMenu" href="http://wssh0812.myweb.hinet.net/05/103.htm">韓風動畫區</a><br>
<a class="SubMenu" href="http://wssh0812.myweb.hinet.net/05/101.htm">迪士尼動畫區</a><br>
<a class="SubMenu" href="http://wssh0812.myweb.hinet.net/05/102.htm">邊框動畫區</a><br>
</div>
 

-----------------------

在 <href="       "> 中修改連結的網址
如分類大項繁多可自行增加<table border="0" cellpadding="0" cellspacing="0">至</div>之間語法,但編號數字部份不能與其它分類大項編號數字重複
文字部份為細分項目,如不需要可直接省略

 

 


上一頁下一頁 │                                      │ 回首頁 回特效語法  │