DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Dreamweaver教程 >> Dreamweaver相關 >> 用表格巧妙制作導航條按鈕
用表格巧妙制作導航條按鈕
編輯:Dreamweaver相關     

  看到上面的導航條了嗎?你可以點擊一下看看它的效果,請注意,這可是用表格做出來的,你相信嗎?其實代碼很簡單,現在讓我們來看看該怎麼做。

  1.首先創建一個1x6的表格,參數為:border=0 cellspacing=3 cellpadding=0;

  2.在這個表格的每個單元格內分別插入一個表格,寬度和高度設為100%;

  3.建立一個CSS樣式.up和.down;代碼如下:

<style>
.up{
border:4 outset royalblue;color:yellow;background:blue;cursor:hand
}
.down{
border:4 inset royalblue;color:#33ff33;background:blue;cursor:hand
}
</style>

  4.對插入的表格調用樣式和行為,代碼如下:

class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" onclick=window.open("button.htm","_blank")

  注意:鏈接請用onclick,不要用href,因為後者訪問後有虛線框,不美觀。現在存盤看看效果吧!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved