以下是 图片布局实例特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,图片特效,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为图片布局实例，属于站长常用代码" />
<title>图片布局实例</title>
<link href="css/jeremy_zevin_2.css" rel="stylesheet" type="text/css">
</head>
<body>
<table border="0">
<tr>
<!-- start -->
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" id="thumbTable">
<tr>
<td class="imageNum">1</td>
<td width="7"><img src="images/spacer.gif" width="7" height="19"></td>
</tr>
<tr>
<td colspan="2"><img src="images/thumb_top2.gif" width="90" height="11"></td>
</tr>
<tr>
<td valign="top" class="middle"> <div align="center"> <a href="#"><img src="images/port/web/web_1_sm.gif" border="0"></a></div></td>
<td width="7" valign="top"><img src="images/spacer.gif" width="7" height="19"></td>
</tr>
<tr>
<td colspan="2"><img src="images/thumb_bott.gif" width="90" height="20"></td>
</tr>
<tr>
<td class="middleText"><a href="#">York College</a></td>
<td> </td>
</tr>
</table>
</td>
<!-- end -->
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" id="thumbTable">
<tr>
<td class="imageNum">2</td>
<td width="7"><img src="images/spacer.gif" width="7" height="19"></td>
</tr>
<tr>
<td colspan="2"><img src="images/thumb_top2.gif" width="90" height="11"></td>
</tr>
<tr>
<td valign="top" class="middle"> <div align="center"> <a href="#"><img src="images/port/web/web_2_sm.gif" border="0"></a></div></td>
<td width="7" valign="top"><img src="images/spacer.gif" width="7" height="19"></td>
</tr>
<tr>
<td colspan="2"><img src="images/thumb_bott.gif" width="90" height="20"></td>
</tr>
<tr>
<td class="middleText"><a href="#">Holy Family University</a></td>
<td> </td>
</tr>
</table>
</td>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" id="thumbTable">
<tr>
<td class="imageNum">3</td>
<td width="7"><img src="images/spacer.gif" width="7" height="19"></td>
</tr>
<tr>
<td colspan="2"><img src="images/thumb_top2.gif" width="90" height="11"></td>
</tr>
<tr>
<td valign="top" class="middle"> <div align="center"> <a href="#"><img src="images/port/web/web_3_sm.gif" border="0"></a></div></td>
<td width="7" valign="top"><img src="images/spacer.gif" width="7" height="19"></td>
</tr>
<tr>
<td colspan="2"><img src="images/thumb_bott.gif" width="90" height="20"></td>
</tr>
<tr>
<td class="middleText"><a href="#">Energy Solutions...</a></td>
<td> </td>
</tr>
</table>
</td>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" id="thumbTable">
<tr>
<td class="imageNum">4</td>
<td width="7"><img src="images/spacer.gif" width="7" height="19"></td>
</tr>
<tr>
<td colspan="2"><img src="images/thumb_top2.gif" width="90" height="11"></td>
</tr>
<tr>
<td valign="top" class="middle"> <div align="center"> <a href="#"><img src="images/port/web/web_4_sm.gif" border="0"></a></div></td>
<td width="7" valign="top"><img src="images/spacer.gif" width="7" height="19"></td>
</tr>
<tr>
<td colspan="2"><img src="images/thumb_bott.gif" width="90" height="20"></td>
</tr>
<tr>
<td class="middleText"><a href="#">See Spot Stay</a></td>
<td> </td>
</tr>
</table>
</td>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" id="thumbTable">
<tr>
<td class="imageNum">5</td>
<td width="7"><img src="images/spacer.gif" width="7" height="19"></td>
</tr>
<tr>
<td colspan="2"><img src="images/thumb_top2.gif" width="90" height="11"></td>
</tr>
<tr>
<td valign="top" class="middle"> <div align="center"> <a href="#"><img src="images/port/web/web_5_sm.gif" border="0"></a></div></td>
<td width="7" valign="top"><img src="images/spacer.gif" width="7" height="19"></td>
</tr>
<tr>
<td colspan="2"><img src="images/thumb_bott.gif" width="90" height="20"></td>
</tr>
<tr>
<td class="middleText"><a href="#">Monmouth University</a></td>
<td> </td>
</tr>
</table>
</td>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" id="thumbTable">
<tr>
<td class="imageNum">6</td>
<td width="7"><img src="images/spacer.gif" width="7" height="19"></td>
</tr>
<tr>
<td colspan="2"><img src="images/thumb_top2.gif" width="90" height="11"></td>
</tr>
<tr>
<td valign="top" class="middle"> <div align="center"> <a href="#"><img src="images/port/web/web_6_sm.gif" border="0"></a></div></td>
<td width="7" valign="top"><img src="images/spacer.gif" width="7" height="19"></td>
</tr>
<tr>
<td colspan="2"><img src="images/thumb_bott.gif" width="90" height="20"></td>
</tr>
<tr>
<td class="middleText"><a href="#">Bethany Bible College</a></td>
<td> </td>
</tr>
</table>
</td>
<tr>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" id="thumbTable">
<tr>
<td class="imageNum">7</td>
<td width="7"><img src="images/spacer.gif" width="7" height="19"></td>
</tr>
<tr>
<td colspan="2"><img src="images/thumb_top2.gif" width="90" height="11"></td>
</tr>
<tr>
<td valign="top" class="middle"> <div align="center"> <a href="#"><img src="images/port/web/web_7_sm.gif" border="0"></a></div></td>
<td width="7" valign="top"><img src="images/spacer.gif" width="7" height="19"></td>
</tr>
<tr>
<td colspan="2"><img src="images/thumb_bott.gif" width="90" height="20"></td>
</tr>
<tr>
<td class="middleText"><a href="#">Zevin Photography</a></td>
<td> </td>
</tr>
</table>
</td>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" id="thumbTable">
<tr>
<td class="imageNum">8</td>
<td width="7"><img src="images/spacer.gif" width="7" height="19"></td>
</tr>
<tr>
<td colspan="2"><img src="images/thumb_top2.gif" width="90" height="11"></td>
</tr>
<tr>
<td valign="top" class="middle"> <div align="center"> <a href="#"><img src="images/port/web/web_8_sm.gif" border="0"></a></div></td>
<td width="7" valign="top"><img src="images/spacer.gif" width="7" height="19"></td>
</tr>
<tr>
<td colspan="2"><img src="images/thumb_bott.gif" width="90" height="20"></td>
</tr>
<tr>
<td class="middleText"><a href="#">the Plough & the Stars...</a></td>
<td> </td>
</tr>
</table>
</td>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" id="thumbTable">
<tr>
<td class="imageNum">9</td>
<td width="7"><img src="images/spacer.gif" width="7" height="19"></td>
</tr>
<tr>
<td colspan="2"><img src="images/thumb_top2.gif" width="90" height="11"></td>
</tr>
<tr>
<td valign="top" class="middle"> <div align="center"> <a href="#"><img src="images/port/web/web_9_sm.gif" border="0"></a></div></td>
<td width="7" valign="top"><img src="images/spacer.gif" width="7" height="19"></td>
</tr>
<tr>
<td colspan="2"><img src="images/thumb_bott.gif" width="90" height="20"></td>
</tr>
<tr>
<td class="middleText"><a href="#">Mandoline Website</a></td>
<td> </td>
</tr>
</table>
</td>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" id="thumbTable">
<tr>
<td class="imageNum">10</td>
<td width="7"><img src="images/spacer.gif" width="7" height="19"></td>
</tr>
<tr>
<td colspan="2"><img src="images/thumb_top2.gif" width="90" height="11"></td>
</tr>
<tr>
<td valign="top" class="middle"> <div align="center"> <a href="#"><img src="images/port/web/web_10_sm.gif" border="0"></a></div></td>
<td width="7" valign="top"><img src="images/spacer.gif" width="7" height="19"></td>
</tr>
<tr>
<td colspan="2"><img src="images/thumb_bott.gif" width="90" height="20"></td>
</tr>
<tr>
<td class="middleText"><a href="#">InnaPhase Website</a></td>
<td> </td>
</tr>
</table>
</td>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" id="thumbTable">
<tr>
<td class="imageNum">11</td>
<td width="7"><img src="images/spacer.gif" width="7" height="19"></td>
</tr>
<tr>
<td colspan="2"><img src="images/thumb_top2.gif" width="90" height="11"></td>
</tr>
<tr>
<td valign="top" class="middle"> <div align="center"> <a href="#"><img src="images/port/web/web_11_sm.gif" border="0"></a></div></td>
<td width="7" valign="top"><img src="images/spacer.gif" width="7" height="19"></td>
</tr>
<tr>
<td colspan="2"><img src="images/thumb_bott.gif" width="90" height="20"></td>
</tr>
<tr>
<td class="middleText"><a href="#">Sailing the Med Blog</a></td>
<td> </td>
</tr>
</table>
</td>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" id="thumbTable">
<tr>
<td class="imageNum">12</td>
<td width="7"><img src="images/spacer.gif" width="7" height="19"></td>
</tr>
<tr>
<td colspan="2"><img src="images/thumb_top2.gif" width="90" height="11"></td>
</tr>
<tr>
<td valign="top" class="middle"> <div align="center"> <a href="#"><img src="images/port/web/web_12_sm.gif" border="0"></a></div></td>
<td width="7" valign="top"><img src="images/spacer.gif" width="7" height="19"></td>
</tr>
<tr>
<td colspan="2"><img src="images/thumb_bott.gif" width="90" height="20"></td>
</tr>
<tr>
<td class="middleText"><a href="#">AppLabs</a></td>
<td> </td>
</tr>
</table>
</td>
<tr>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" id="thumbTable">
<tr>
<td class="imageNum">13</td>
<td width="7"><img src="images/spacer.gif" width="7" height="19"></td>
</tr>
<tr>
<td colspan="2"><img src="images/thumb_top2.gif" width="90" height="11"></td>
</tr>
<tr>
<td valign="top" class="middle"> <div align="center"> <a href="#"><img src="images/port/web/web_13_sm.gif" border="0"></a></div></td>
<td width="7" valign="top"><img src="images/spacer.gif" width="7" height="19"></td>
</tr>
<tr>
<td colspan="2"><img src="images/thumb_bott.gif" width="90" height="20"></td>
</tr>
<tr>
<td class="middleText"><a href="#">The Print Center</a></td>
<td> </td>
</tr>
</table>
</td>
<!-- start -->
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" id="thumbTable">
<tr>
<td class="imageNum">14</td>
<td width="7"><img src="images/spacer.gif" width="7" height="19"></td>
</tr>
<tr>
<td colspan="2"><img src="images/thumb_top2.gif" width="90" height="11"></td>
</tr>
<tr>
<td valign="top" class="middle"> <div align="center"> <a href="#"><img src="images/port/web/web_14_sm.gif" border="0"></a></div></td>
<td width="7" valign="top"><img src="images/spacer.gif" width="7" height="19"></td>
</tr>
<tr>
<td colspan="2"><img src="images/thumb_bott.gif" width="90" height="20"></td>
</tr>
<tr>
<td class="middleText"><a href="#">FRS Website</a></td>
<td> </td>
</tr>
</table>
</td>
<!-- end -->
<!-- start -->
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" id="thumbTable">
<tr>
<td class="imageNum">15</td>
<td width="7"><img src="images/spacer.gif" width="7" height="19"></td>
</tr>
<tr>
<td colspan="2"><img src="images/thumb_top2.gif" width="90" height="11"></td>
</tr>
<tr>
<td valign="top" class="middle"> <div align="center"> <a href="#"><img src="images/port/web/web_15_sm.gif" border="0"></a></div></td>
<td width="7" valign="top"><img src="images/spacer.gif" width="7" height="19"></td>
</tr>
<tr>
<td colspan="2"><img src="images/thumb_bott.gif" width="90" height="20"></td>
</tr>
<tr>
<td class="middleText"><a href="#">JuniorNet Website</a></td>
<td> </td>
</tr>
</table>
</td>
<!-- end -->
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" id="thumbTable">
<tr>
<td class="imageNum">16</td>
<td width="7"><img src="images/spacer.gif" width="7" height="19"></td>
</tr>
<tr>
<td colspan="2"><img src="images/thumb_top2.gif" width="90" height="11"></td>
</tr>
<tr>
<td valign="top" class="middle"> <div align="center"> <a href="#"><img src="images/port/web/web_16_sm.gif" border="0"></a></div></td>
<td width="7" valign="top"><img src="images/spacer.gif" width="7" height="19"></td>
</tr>
<tr>
<td colspan="2"><img src="images/thumb_bott.gif" width="90" height="20"></td>
</tr>
<tr>
<td class="middleText"><a href="#">OGIS</a></td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
CSS代码(jeremy_zevin_2.css):
body{background-attachment:scroll;background-color:#FFFFFF;background-repeat:repeat-x;}
#thumbTable{width:90px;}
#thumbTable .imageNum{font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;color:#FFFFFF;text-align:center;height:19px;padding-top:5px;background-image:url(../images/thumb_top.gif);background-repeat:no-repeat;}
#thumbTable .middle{background-image:url(../images/thumb_mid.gif);background-repeat:repeat-y;text-align:center;}
#thumbTable .middleText{font-family:Arial,Helvetica,sans-serif;font-size:10px;color:#707070;text-align:center;padding-right:13px;padding-left:13px;padding-bottom:7px;}
#thumbTable a{font-family:Arial,Helvetica,sans-serif;font-size:10px;color:#707070;text-decoration:none;}
#thumbTable a:hover{text-decoration:underline;}
分享到QQ
分享到微博
微信扫一扫
