表格特效代码 全集中

来源:百度文库 编辑:神马文学网 时间:2024/03/29 02:23:19
 1. 两种细线表格做法



  源码如下:


 
   
 
表格边线为1,线色为黑,行线色为白。



 
   
 
表格边线为0,间距为1,背景色为黑,行背景色为白。


  2. 立体表格





  源码如下:


 
    it365cn
    it365cn
    it365cn
    it365cn
 
 
    cnbruce
    cnbruce
    cnbruce
    cnbruce
 

表格边线为1,间隔为0,左上为#333333,右下为#efefef,行背景色为#cccccc

  3. 另类圆角表格制作


 




  源码如下:

原图:


 
   
   
   
   
   
   
   
   
   
 
 
   
   
   
 
 
   
   
   
 
 
   
   
   
 

放大


 
   
   
   
   
   
   
   
   
   
 
 
   
   
   
 
 
   
   
   
 
 
   
   
   
 


  4. 虚线边框表格





  源码如下:



 
   
 
www.blueidea.com


虚线直线1



虚线直线2



  5. 分类型表格


 



  源码如下:


item
content



  6. 变色的单元格1,通过a:hover做




  源码如下:



 
   
   
Blueidea
   
.com
 
CNBruce
   
.com


  7. 变色的单元格2,已经做成了CSS,注意还有透明效果

  源码如下:


 



 
    class="bb">

cnbruce
  



  8. 变色的单元格3,通过mouse事件做.有点微软的味道




  源码如下:

bordercolor="#efefef" bgcolor="#efefef">
 
   
 
 
   
 
onMouseOver="this.bgColor=‘#cccccc‘; this.borderColor=‘#000033‘">

Blueidea
onMouseOut="this.bgColor=‘#efefef‘;this.borderColor=‘#efefef‘"; onMouseOver="this.bgColor=‘#cccccc‘; this.borderColor=‘#000033‘">
cnbruce


  9. 透明表格


 
cnbruce


  10. 表格边框显示外阴影



  源码如下:

style="filter:progid:DXImageTransform.Microsoft.Shadow
(Color=#333333,Direction=120,strength=5)">
 
   

www.cnbruce.com
 


  11. VML代码实现的圆角表格
  (1).



  源码如下:




  
   
    VML
   




  (2).



  源码如下:




     

     
       
        VML
         



  (3).




  源码如下:




  
   
    VML