现在的位置: 首页 > web前端 > 正文

DW怎样实现网页表格特效

2020年06月16日 web前端 ⁄ 共 1217字 ⁄ 字号 评论关闭

  在我们制作主页的过程中,用到表格的地方非常多,灵活运用表格技巧可以为我们的网页增色不少。下面学步园小编来讲解下DW怎样实现网页表格特效?

  DW怎样实现网页表格特效

  一、彩色虚线表格

  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>

  DW怎样实现网页表格特效

  二、鼠标指向单元格变色

  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>

  以上就是关于“DW怎样实现网页表格特效”的内容,希望对大家有用。更多资讯请关注学步园。学步园,您学习IT技术的优质平台!

抱歉!评论已关闭.