大雀软件园

首页 软件下载 安卓市场 苹果市场 电脑游戏 安卓游戏 文章资讯 驱动下载
技术开发 网页设计 图形图象 数据库 网络媒体 网络安全 站长CLUB 操作系统 媒体动画 安卓相关
当前位置: 首页 -> 网页设计 -> HTML/CSS -> 表格特效代码全集中

表格特效代码全集中

时间: 2021-07-31 作者:daque

  1. 两种细线表格做法

表格特效代码全集中图1

  源码如次:<table width="100%" border="1" bordercolor="#000000">  <tr bordercolor="#ffffff">    <td>表格边线为1,线色为黑,行线色为白。</td>  </tr></table><p><table width="100%" border="0" cellspacing="1" bgcolor="#000000">  <tr>    <td bgcolor="#ffffff">表格边线为0,间距为1,背局面为黑,行背局面为白。</td>  </tr></table>  2. 立身体表面格

  源码如次:<table  border=1 cellspacing=0  width=100% bordercolorlight=#333333 bordercolordark=#efefef>  <tr bgcolor=#cccccc>    <td>it365cn</td>    <td>it365cn</td>    <td>it365cn</td>    <td>it365cn</td>  </tr>  <tr bgcolor=#cccccc>    <td>cnbruce</td>    <td>cnbruce</td>    <td>cnbruce</td>    <td>cnbruce</td>  </tr></table><center>表格边线为1,间隙为0,左上为#333333,右下为#efefef,行背局面为#cccccc

表格特效代码全集中图2

  3. 另类圆角表格创造

表格特效代码全集中图3

  源码如次:原图:<table cellpadding=0 cellspacing=0 border=0 width=282 align=center>  <tr height=1>    <td rowspan=4 width=1></td>    <td rowspan=3 width=1></td>    <td rowspan=2 width=1></td>    <td width=2></td>    <td bgcolor=#43b5c9></td>    <td width=2></td>    <td rowspan=2 width=1></td>    <td rowspan=3 width=1></td>    <td rowspan=4 width=1></td>  </tr>  <tr height=1>    <td bgcolor=#43b5c9></td>    <td bgcolor=#43b5c9></td>    <td bgcolor=#43b5c9></td>  </tr>  <tr height=1>    <td bgcolor=#43b5c9></td>    <td colspan=3 bgcolor=#43b5c9></td>    <td bgcolor=#43b5c9></td>  </tr>  <tr height=2>    <td bgcolor=#43b5c9></td>    <td colspan=5 bgcolor=#43b5c9></td>    <td bgcolor=#43b5c9></td>  </tr></table><p>夸大<table cellpadding=0 cellspacing=0 border=1 width=282 align=center>  <tr height=10>    <td rowspan=4 width=10></td>    <td rowspan=3 width=10></td>    <td rowspan=2 width=10></td>    <td width=20></td>    <td bgcolor=#43b5c9></td>    <td width=20></td>    <td rowspan=2 width=10></td>    <td rowspan=3 width=10></td>    <td rowspan=4 width=10></td>  </tr>  <tr height=10>    <td bgcolor=#43b5c9></td>    <td bgcolor=#43b5c9></td>    <td bgcolor=#43b5c9></td>  </tr>  <tr height=10>    <td bgcolor=#43b5c9></td>    <td colspan=3 bgcolor=#43b5c9></td>    <td bgcolor=#43b5c9></td>  </tr>  <tr height=20>    <td bgcolor=#43b5c9></td>    <td colspan=5 bgcolor=#43b5c9></td>    <td bgcolor=#43b5c9></td>  </tr></table>4. 虚线边框表格  源码如次:<style type="text/css">.tb{border-bottom: #000000 1px dotted;border-top: #000000 1px dotted;border-left:#000000 1px dotted;border-right: #000000 1px dotted;}</style><table width="100%" border="0" cellspacing="0" cellpadding="0">  <tr>    <td class="tb"><center>www.blueidea.com</td>  </tr></table><p>虚线曲线1<hr size=1 style="border:1px dotted #001403;">虚线曲线2<p size=1 style="border:1px dotted #001403;">5. 分典型表格

表格特效代码全集中图4

  源码如次:<fieldset><legend>item</legend>content</fieldset>6. 变色的单位格1,经过a:hover做

表格特效代码全集中图5

  源码如次:<style>a:link,a:visited,a:hover{width:100%;text-decoration:none;font-family:verdana;font-size:10px;color:white}a:hover{background:#0099ff;color:black}td{background:#3366cc;color:white;padding:0px}</style>

表格特效代码全集中图6

<table width=100% cellspacing=1 bgcolor=black >  <tr>    <td><a href="#">blueidea    <td><a href="#">.com  <tr>    <td><a href="#">cnbruce    <td><a href="#">.com</table>7. 变色的单位格2,仍旧做出了css,提防再有通明功效  源码如次:<style type="text/css">.aa{ background-color:#0000ff; color:#ff0000;filter: alpha(opacity=50)}.bb { background-color:#3366cc; color:#ffffff}</style>

表格特效代码全集中图7

<table  width="100%">  <tr>    <td  onmouseover="this.classname='aa'" onmouseout="this.classname='bb'"class="bb"><center><b>cnbruce</td>   </tr></table>8. 变色的单位格3,经过mouse事变做.有点微软的滋味

表格特效代码全集中图8

  源码如次:<table width="100%" border="1" cellpadding="3" cellspacing="0"bordercolor="#efefef" bgcolor="#efefef">  <tr>     <td onmouseout="this.bgcolor='#efefef';this.bordercolor='#efefef'";onmouseover="this.bgcolor='#cccccc'; this.bordercolor='#000033'"><div align="left">blueidea</div></td>  </tr>  <tr>     <td onmouseout="this.bgcolor='#efefef';this.bordercolor='#efefef'"; onmouseover="this.bgcolor='#cccccc'; this.bordercolor='#000033'">cnbruce</td>  </tr></table>9. 通明表格<table bgcolor=#ececec style="filter:alpha(opacity=50)" width=200 height=100 border=0>  <tr><td><center>cnbruce</td></tr></table>10. 表格边框表露外暗影

表格特效代码全集中图9

  源码如次:<table  align=center  width=200  height=100  bgcolor=#f3f3f3style="filter:progid:dximagetransform.microsoft.shadow(color=#333333,direction=120,strength=5)">  <tr>    <td><center>www.cnbruce.com</td>  </tr></table>11. vml代码实行的圆角表格(1).

表格特效代码全集中图10

  源码如次:<html xmlns:v><style>v\:*{behavior:url(#default#vml)}</style><body>   <v:roundrect style="position:relative;width:150;height:240px">    <v:shadow on="t" type="single" color="#b3b3b3" offset="3px,3px"/>    <v:textbox style="font-size:10.2pt;">vml</v:textbox>    </v:roundrect> </body></html>(2).

  源码如次:<html  xmlns:v><style>v\:*{behavior:url(#default#vml)}</style><body>      <v:roundrect  style="position:relative;width:150;height:240px"><v:path  textpathok="true"  />      <v:textpath  on="true"  string="cnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbruce"  />        <v:shadow  on="t"  type="single"  color="#b3b3b3"  offset="3px,3px"/>        <v:textbox  style="font-size:10.2pt;">vml</v:textbox>        </v:roundrect>  </body></html>(3).

表格特效代码全集中图11

  源码如次:<html xmlns:v><style>v\:*{behavior:url(#default#vml)}</style><body>   <v:roundrect style="position:relative;width:150;height:240px" arcsize=0.5>    <v:shadow on="t" type="single" color="#b3b3b3" offset="3px,3px"/>    <v:textbox style="font-size:10.2pt;">vml</v:textbox>    </v:roundrect> </body></html>

热门阅览

最新排行

Copyright © 2019-2021 大雀软件园(www.daque.cn) All Rights Reserved.