由于快期末了,老师要检查我们的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的同学能互相帮助,少走弯路,希望大家常来我这里: