css|按鈕|導航|濾鏡
平面的導航條看多了，想不想做個3D的，當然製作的方法很多，真是仁者見仁，智者見智。我試著做了個按鈕式的，效果還不錯，每一個功能表項目看起來都是一個個的按鈕，製作方法也不複雜，並且大小隻有幾k，算瘦小的了。你只要有點html和CSS的基礎知識就夠了。
下面我們開始製作：
第一步：
用Dreamweaver建立一個3x1的表格，寬度為70px，不設高度值，邊框設為0，間距（cellspacing）為2。
第二步：
在上面已經建立好的表格的儲存格中分別插入一個1x1的表格，高度值和寬度值均設為100%，邊框和間距都設為0，並在每個表格中填上菜單名稱。
代碼是：
<table width="70" border="0" cellpadding="0" cellspacing="2">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" height="100%">
<tr>
<td >互動學校</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" height="100%">
<tr>
<td>市場專家</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" height="100%">
<tr>
<td>資訊中心</td>
</tr>
</table> |
第三步：
現在我們建立兩個CSS樣式分別取名為up和down，代碼如下：
.up{
border:3 outset royalblue;color:yellow;font:12px;text-align:center;background:blue;cursor:hand
} |
說明：邊界為3，採用outset即突起樣式，顏色為royalblue，字型顏色為黃色，字型大小為12px，置中對齊，背景顏色為blue，滑鼠式樣為手型。
.down{
border:3 inset royalblue;color:#33ff33;font:12px;text-align:center;background:blue;cursor:hand;position: relative; left: 1px; top: 1px
} |
說明：邊界樣式為inset即內凹，字型顏色為#33ff33，position: relative; left: 1px; top: 1px可以產生1個像素的位移，這樣按鈕按下去時效果好些。
第四步：
對第二步所做的表格添加樣式和行為，即在table標籤後加上下列代碼：
| class=up onclick=window.open("http://www.ccidnet.com/school/web","_blank") |
說明：在通常以及滑鼠彈起和移出時採用up樣式，在滑鼠按下時採用down樣式，連結採用onclick，不要用a，因為後者在訪問後會留下難看的虛線框。
另外，你還可以再加點修飾，如CSS濾鏡等，不過切忌太花哨，否則反而效果不好！
為了方便你學習，下面提供了全部的代碼，你可以把它們複製到寫字板，產生一個txt檔案，然後把副檔名該成htm，就可以用IE直接開啟了！
<html>
<head>
<title>3D按鈕式導航條</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
body{text-align:center;background:#ffffff}
.up{
border:3 outset royalblue;color:yellow;font:12px;text-align:center;background:blue;cursor:hand
}
.down{
border:3 inset royalblue;color:#33ff33;font:12px;text-align:center;background:blue;cursor:hand;position: relative; left: 1px; top: 1px; clip:rect( )
}
</style>
</head>
<body>
<table width="700" border="0" cellspacing="2" cellpadding="0">
<tr>
<td width="10%">
<table width="100%" border="0" height="100%" class=up onclick=window.open("http://www.ccidnet.com/news","_blank") cellpadding="0" cellspacing="0">
<tr>
<td>資訊中心</td>
</tr>
</table>
</td>
<td width="10%">
<table width="100%" border="0" height="100%" class=up cellpadding="0" cellspacing="0">
<tr>
<td>技術天地</td>
</tr>
</table>
</td>
<td width="10%">
<table width="100%" border="0" height="100%" class=up cellpadding="0" cellspacing="0">
<tr>
<td>軟體特供</td>
</tr>
</table>
</td>
<td width="10%">
<table width="100%" border="0" height="100%" class=up cellpadding="0" cellspacing="0">
<tr>
<td>IT財經</td>
</tr>
</table>
</td>
<td width="10%">
<table width="100%" border="0" height="100%" class=up cellpadding="0" cellspacing="0">
<tr>
<td>市場專家</td>
</tr>
</table>
</td>
<td width="10%">
<table width="100%" border="0" height="100%" class=up cellpadding="0" cellspacing="0">
<tr>
<td>互動學校</td>
</tr>
</table>
</td>
<td width="10%">
<table width="100%" border="0" height="100%" class=up cellpadding="0" cellspacing="0">
<tr>
<td>DIY專區</td>
</tr>
</table>
</td>
<td width="10%">
<table width="100%" border="0" height="100%" class=up cellpadding="0" cellspacing="0">
<tr>
<td>媒體全文</td>
</tr>
</table>
</td>
<td width="10%">
<table width="100%" border="0" height="100%" class=up cellpadding="0" cellspacing="0">
<tr>
<td>IT羅盤</td>
</tr>
</table>
</td>
<td width="10%">
<table width="100%" border="0" height="100%" class=up cellpadding="0" cellspacing="0">
<tr>
<td>IT人才</td>
</tr>
</table>
</td>
</tr>
</table> <p> </p>
<table width="70" border="0" cellpadding="0" cellspacing="2">
<tr>
<td>
<table width="100%" border="0" height="100%" class=up onClick=window.open("http://www.ccidnet.com/news","_blank") cellpadding="0" cellspacing="0">
<tr>
<td>資訊中心</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" height="100%" class=up cellpadding="0" cellspacing="0">
<tr>
<td>技術天地</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" height="100%" class=up cellpadding="0" cellspacing="0">
<tr>
<td>軟體特供</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" height="100%" class=up cellpadding="0" cellspacing="0">
<tr>
<td>IT財經</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" height="100%" class=up cellpadding="0" cellspacing="0">
<tr>
<td>市場專家</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" height="100%" class=up cellpadding="0" cellspacing="0">
<tr>
<td>互動學校</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" height="100%" class=up cellpadding="0" cellspacing="0">
<tr>
<td>DIY專區</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" height="100%" class=up cellpadding="0" cellspacing="0">
<tr>
<td>媒體全文</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" height="100%" class=up cellpadding="0" cellspacing="0">
<tr>
<td>IT羅盤</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" height="100%" class=up cellpadding="0" cellspacing="0">
<tr>
<td>IT人才</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html> |
