您好,欢迎来到12图资源库!分享精神,快乐你我!我们只是素材的搬运工!!
  • 首 页
  • 当前位置:首页 > 网站教程 > 网页设计 >
    DW实现网页表格特效
    时间:2016-07-10 10:03 来源: 作者: 浏览:收藏 挑错 推荐 打印
    在我们制作主页的过程中,用到表格的地方非常多,灵活运用表格技巧可以为我们的网页增色不少,这里我就详细介绍几中特效表格的制作方法。

      一、彩色虚线表格

    <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>

    (责任编辑:12图资源库)