立 體 感 表 格 的 制 作
單個立體表格效果圖示樣
【立體表格】
【立體表格】
單 個 立 體 表 格 代 碼
<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>
說 明∶將前面的〖單個立體表格的代碼〗替換普通表格代碼中紅色部分就變?yōu)榱Ⅲw表格。效果圖如下(內不帶鏈接):
實際立體表格效果圖
【添加內容】
【添加內容】
【添加內容】
【添加內容】
立 體 表 格 代 碼
<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>
示例一行二列立體表格效果圖
◆ 博 客 制 作 總 導 航 ◆
【表格制作】【代碼大全】【首頁模塊】【制作技巧】【導航鏈接】【生活百科】 示例一列三行立體表格效果圖
制作導航
【表格制作】【代碼大全】【首頁模塊】【制作技巧】【導航鏈接】【生活百科】 --------------------------------
