<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
<!--
img{border:1px #ccc solid}
a{color:red}
a:hover img{position:relativebottom:10px}
-->
</style>
<body>
<a href="#">文字</a>
<a href="#">文字</a>
<a href="#">文字</a>
<br /><br /><br />
<a href="#"><img src="http://img.baidu.com/img/logo-zhidao.gif" /></a>
<a href="#"><img src="http://img.baidu.com/img/logo-zhidao.gif" /></a>
<a href="#"><img src="http://img.baidu.com/img/logo-zhidao.gif" /></a>
<a href="#"><img src="http://img.baidu.com/img/logo-zhidao.gif" /></a>
<a href="#"><img src="http://img.baidu.com/img/logo-zhidao.gif" /></a>
<br /><br /><br />
<a href="#"><img src="http://www.haomymy.com/img/logo.gif" /></a>
<a href="#"><img src="http://www.haomymy.com/img/logo.gif" /></a>
<a href="#"><img src="http://www.haomymy.com/img/logo.gif" /></a>
</body>
</html>
只改这个hover就可以啊..10px也太大了点.
a:hover img{position:relativetop:1pxleft:1px}
一般有两种方法：
一、通过CSS下划线代码：text-decoration:underline来设置文字下划线。
实例演示如下：
1、实例代码如下：
此时页面效果如下：
2、修改第1步中的txt样式，加入text-decoration:underline。
此时页面效果如下，出现了下划线。
二、通过设置div的border实现效果：
实例演示如下：
在第一种方法的初始代码上，增加border-bottom: 1px solid black、padding-bottom: 10px两个关键样式，如下：
此时页面效果如下：
不要使用绝对定位，这种功能局限性很强，绝对定位就是说不管什么情况，被定位的块都会在页面的一个地方显示，但是要让某块始终位于最下方，LZ已经考虑了它相对与其他块的位置，所以我建议LZ使用相对位置，这是HTML编写的习惯问题，也是页面设计的第一步，要把所要安排的层按照从上到下从左到右的顺序来写，当你写完所有的层以后，剩下的层自然就在最下面了，然后就可以设置相对位置和每个层的大小等具体属性了，如有不懂可以再问。
