logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

立体感表格制作

 昵称604703 2010-05-13


立 体 感 表 格 的 制 作

 

 


单个立体表格效果图示样

 

【立体表格】

 

【立体表格】

 

单 个 立 体 表 格 代 码

<TABLE style="FILTER: progid:DXImageTransform.Microsoft.Shadow  (Color=#000000,Direction=120,strength=5)" width=100 align=center bgColor=#dddddd>
<TBODY>
<TR>
<TD align=middle><FONT color=#008080>【添加内容】</FONT></TD></TR></TBODY></TABLE>

 

说 明∶调整红色数值120为分别为220、320、420时会改变阴影不同方向,调整黄色数值5可改变阴影长度,bgColor=#dddddd为表格北景颜色 Color=#000000为阴影颜色按需要调换。

 

普通表格效果图

 

【普通表格】 【普通表格】
【普通表格】 【普通表格】

 

普 通 表 格 代 码

<TABLE style="FILTER: alpha(opacity=70)" width=225 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid" cellSpacing=2 cellPadding=0 width=225 border=1>
<TBODY>
<TR>
<TD align=middle><FONT color=#008080>【普通表格】</FONT></TD>
<TD align=middle><FONT color=#008080>【普通表格】</FONT></TD></TR>
<TR>
<TD align=middle><FONT color=#008080>【普通表格】</FONT></TD>
<TD align=middle><FONT color=#008080>【普通表格】</FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

 

说 明∶将前面的〖单个立体表格的代码〗替换普通表格代码中红色部分就变为立体表格。效果图如下(内不带链接):

 

实际立体表格效果图

 

【添加内容】
【添加内容】
【添加内容】
【添加内容】

 

立 体 表 格 代 码

<TABLE style="FILTER: alpha(opacity=70)" width=225 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid" cellSpacing=2 cellPadding=0 width=225 border=0>
<TBODY>
<TR>
<TD></TD>
<TD align=middle>
<TABLE style="FILTER: progid:DXImageTransform.Microsoft.Shadow  (Color=#000000,Direction=120,strength=5)" width=100 align=center bgColor=#dddddd>
<TBODY>
<TR>
<TD align=middle><FONT color=#008080>【添加内容】</FONT></TD></TR></TBODY></TABLE></TD>
<TD></TD>
<TD align=middle>
<TABLE style="FILTER: progid:DXImageTransform.Microsoft.Shadow  (Color=#000000,Direction=120,strength=5)" width=100 align=center bgColor=#dddddd>
<TBODY>
<TR>
<TD align=middle><FONT color=#008080>【添加内容】</FONT></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD></TD>
<TD align=middle>
<TABLE style="FILTER: progid:DXImageTransform.Microsoft.Shadow  (Color=#000000,Direction=120,strength=5)" width=100 align=center bgColor=#dddddd>
<TBODY>
<TR>
<TD align=middle><FONT color=#008080>【添加内容】</FONT></TD></TR></TBODY></TABLE></TD>
<TD></TD>
<TD align=middle>
<TABLE style="FILTER: progid:DXImageTransform.Microsoft.Shadow  (Color=#000000,Direction=120,strength=5)" width=100 align=center bgColor=#dddddd>
<TBODY>
<TR>
<TD align=middle><FONT color=#008080>【添加内容】</FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE>

 

含有链接立体表格效果图

 

【表格制作】
【代码大全】
【首页模块】
【制作技巧】
【导航链接】
【生活百科】

 

带 链 接 立 体 表 格 代 码

<TABLE style="FILTER: alpha(opacity=70)" width=225 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid" cellSpacing=2 cellPadding=0 width=225 border=0>
<TBODY>
<TR>
<TD align=middle>
<TABLE style="FILTER: progid:DXImageTransform.Microsoft.Shadow  (Color=#000000,Direction=120,strength=5)" width=100 align=center bgColor=#dddddd>
<TBODY>
<TR>
<TD align=middle><A href="链接网址" target=_blank><FONT color=#008080>【添加内容】</FONT></A></TD></TR></TBODY></TABLE></TD>
<TD align=middle>
<TABLE style="FILTER: progid:DXImageTransform.Microsoft.Shadow  (Color=#000000,Direction=120,strength=5)" width=100 align=center bgColor=#dddddd>
<TBODY>
<TR>
<TD align=middle><A href="链接网址" target=_blank><FONT color=#008080>【添加内容】</FONT></A></TD></TR></TBODY></TABLE></TD></TR> <TR>
<TD align=middle>
<TABLE style="FILTER: progid:DXImageTransform.Microsoft.Shadow  (Color=#000000,Direction=120,strength=5)" width=100 align=center bgColor=#dddddd>
<TBODY>
<TR>
<TD align=middle><A href="链接网址" target=_blank><FONT color=#008080>【添加内容】</FONT></A></TD></TR></TBODY></TABLE></TD>
<TD align=middle>
<TABLE style="FILTER: progid:DXImageTransform.Microsoft.Shadow  (Color=#000000,Direction=120,strength=5)" width=100 align=center bgColor=#dddddd>
<TBODY>
<TR>
<TD align=middle><A href="链接网址" target=_blank><FONT color=#008080>【添加内容】</FONT></A></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

 

示例一行二列立体表格效果图

 

◆ 博 客 制 作 总 导 航 ◆
【表格制作】
【代码大全】
【首页模块】
【制作技巧】
【导航链接】
【生活百科】

 

示例一列三行立体表格效果图

 

制作导航
【表格制作】
【代码大全】
【首页模块】
【制作技巧】
【导航链接】
【生活百科】

 

--------------------------------

 

 

 

 

 

 

 

 

 

 

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 昵称604703 > 《代码》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多