學習css中遇到一個問題及解決方案

由於快期末了，老師要檢查我們的jsp作業，所以不得不開始從頭學起jsp；現在剛剛學到css，遇到了一些問題，但在我不斷的嘗試之下，總算解決了，這裡列出一些例子：

有這樣一個例子：

 css樣式表：table.banner{
 background:url(banner1_bg.jpg) repeat-x;
 width:100%;
}
table.links{
 background:url(button1_bg.jpg) repeat-x;
 font-size:12px;
 width:100%;
}
a{
 width:80px; height:32px;
 padding-top:10px;
 text-decoration:none;
 text-align:center;
 background:url(button1.jpg) no-repeat; 
}
a:link{color:#654300;}
a:visited{color:#654300;}
a:hover{
 color:#FFFFFF;
 text-decoration:none;
 background:url(button2.jpg) no-repeat; 
}

其html代碼為：

為了美觀，我這樣寫的

<table cellpadding="0" cellspacing="0" class="links">
 <tr><td><a href="#">首頁導讀</a>
 <a href="#">線上使用者</a>
 <a href="#">查詢網友</a>
 <a href="#">線上好友</a>
 <a href="#">好友名單</a>
 <a href="#">查看訊息</a>
 <a href="#">發送訊息</a></td></tr>
</table>

效果是每個導航條在滑鼠放上去的時候都有一段間隙，但是如果代碼這樣寫：

 

<table cellpadding="0" cellspacing="0" class="links">
 <tr><td><a href="#">首頁導讀</a>
 <a href="#">線上使用者</a><a href="#">查詢網友</a> <a href="#">線上好友</a> <a href="#">好友名單</a><a href="#">查看訊息</a> <a href="#">發送訊息</a></td></tr>
</table>

間隙就可以消失，呵呵，其中還有類似的情況

如： <div  class=" "><img src="#" >

        </div>t映像下面會有一段間隙，消除的方法是：<div class=" "><img src=" #"></div>

有興趣的朋友可以試試，呵呵，希望大家學習jsp的同學能互相協助，少走彎路，希望大家常來我這裡：