Html代碼：
示例代碼 [www.mb5u.com]
<div id="info">
<ul>
<li><a href="#" hidefocus="true"><img src="/School/UploadFiles_7810/201603/20160323212938745.gif" alt="A" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="/School/UploadFiles_7810/201603/20160323212938204.gif" alt="B" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="/School/UploadFiles_7810/201603/20160323212938499.gif" alt="C" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="/School/UploadFiles_7810/201603/20160323212938277.gif" alt="D" align="absmiddle" /></a></li>
<li><img src="/School/UploadFiles_7810/201603/20160323212938363.gif" alt="M" align="absmiddle" /></li>
<li><a href="#" hidefocus="true"><img src="/School/UploadFiles_7810/201603/20160323212938316.gif" alt="E" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="/School/UploadFiles_7810/201603/20160323212939227.gif" alt="F" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="/School/UploadFiles_7810/201603/20160323212939757.gif" alt="G" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="/School/UploadFiles_7810/201603/20160323212939784.gif" alt="H" align="absmiddle" /></a></li>
<li><img src="/School/UploadFiles_7810/201603/20160323212938363.gif" alt="M" align="absmiddle" /></li>
<li><a href="#" hidefocus="true"><img src="/School/UploadFiles_7810/201603/20160323212939834.gif" alt="I" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="/School/UploadFiles_7810/201603/20160323212939864.gif" alt="J" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="/School/UploadFiles_7810/201603/20160323212939769.gif" alt="K" align="absmiddle" /></a></li>
<li><a href="#" hidefocus="true"><img src="/School/UploadFiles_7810/201603/20160323212939225.gif" alt="L" align="absmiddle" /></a></li>
</ul>
</div>
加了hidefocus，是為了去掉點擊鏈接時的虛線。
示例代碼 [www.mb5u.com]
hidefocus="true"
CSS代碼：
示例代碼 [www.mb5u.com]
*{ margin:0; padding:0; list-style:none; border:none; line-height:1.8;}
#info{ background:#5F768B; padding:10px;}
#info ul{background:url(http://www.zishu.cn/attachments/month_0706/images/bg.gif) repeat-x left top; padding:2px 10px;height:31px;}
#info li{float:left;padding:2px;}
a:link,a:visited{ background:none;float:left;display:block; padding:4px;}
a:hover{background:url(http://www.zishu.cn/attachments/month_0706/images/on.gif) no-repeat left top; float:left; display:block;}
a:active{background:url(http://www.zishu.cn/attachments/month_0706/images/on2.gif) no-repeat left top; float:left; display:block;}