用CSS濾鏡巧制3D按鈕式導航條

來源:互聯網
上載者:User
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>



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。