DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Dreamweaver教程 >> Dreamweaver入門 >> DW實現網頁表格特效
DW實現網頁表格特效
編輯:Dreamweaver入門     
  在我們制作主頁的過程中,用到表格的地方非常多,靈活運用表格技巧可以為我們的網頁增色不少,這裡我就詳細介紹幾中特效表格的制作方法。

  一、彩色虛線表格

<style type="text/css">
<!--
.tab1 {
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: dotted;
border-right-style: dotted;
border-bottom-style: dotted;
border-left-style: dotted;
border-top-color: #00CC66;
border-right-color: #0099CC;
border-bottom-color: #FF0000;
border-left-color: #6699FF;
}
-->
</style>
<table width="200" border="0" cellpadding="2" cellspacing="2" class="tab1">
<tr>
<td><div align="center">虛</div></td>
<td><div align="center">線</div></td>
</tr>
<tr>
<td><div align="center">表</div></td>
<td><div align="center">格</div></td>
</tr>
</table>

  二、鼠標指向單元格變色
 
onmouseout="this.style.backgroundColor=''" 鼠標離開效果onmouseover="this.style.backgroundColor='#FFcccc'"鼠標放上去的效果,
可以修改#FFcccc的值來改變顏色

<table width="200" border="1" cellspacing="0" cellpadding="0">
<tr>
<td onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#FFcccc'"> </td>
</tr>
<tr>
<td onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#FFccaa'"> </td>
</tr>
</table>


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