css超链接问题
怎么让超链接一个图片一个超链接；
代码如下：
<style type="text/css">
body { fontsize: 12px; color:#000000;} /*定义字体为12像素，颜色为黑色*/
body { background-color:#0033CC;} /*定义网页背景为蓝色*/
.menu {padding:0 0 0 32px; /*定义菜单导航横条*/
margin:0; /*定义菜单导航横条*/
list-style:none; /*定义菜单导航横条*/
height:40px; /*定义菜单导航横条高度为40像素*/
background:#66FFFF url(0.png) /*定义菜单导航横条颜色为天蓝色*/
repeat-x; /*定义菜单导航横条*/
position:relative /*定义菜单导航横条*/
font-family:Arial, Helvetica, sans-serif; /*定义菜单导航横条*/
margin-top:50px; /*定义菜单导航横条*/
}
.menu li.top{ display:block; /*定义菜单导航横条*/
float:left; /*定义菜单导航横条*/
position:relative; /*定义菜单导航横条*/
}.menu li a.top_link {display:block; /*定义菜单导航横条*/
float:left; /*定义菜单导航横条*/
height:40px; /*定义菜单导航横条高度为40像素*/
line-height:33px; /*定义菜单导航横条*/
color:#66FFFF; /*定义菜单导航横条颜色为蓝*/
text-decoration:none; /*定义菜单导航横条*/
font-size:12px; /*定义菜单导航横条字体为12像素*/
font-weight:bold; /*定义菜单导航横条*/
padding:0 0 0 12px; /*定义菜单导航横条*/
cursor:pointer; /*定义菜单导航横条*/
}
.menu a.top_link span{float:left; /*定义菜单导航横条*/
font-weight:bold; /*定义菜单导航横条*/
display:block; /*定义菜单导航横条*/
padding:0 24px 0 12px; /*定义菜单导航横条*/
height:45px; /*定义菜单导航横条*/
}
.menu li a.top_link:hover {color:#000000;
background: url(0.png)} /*定义菜单导航横条*/
.menu li a.top_link:hover span{
background: url(0.png);} /*定义菜单导航横条图片*/
.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hiver ul ul
{position:relative; /*定义菜单导航横条*/
left:-9999px; /*定义菜单导航横条*/
top:-9999px; /*定义菜单导航横条*/
width:0; /*定义菜单导航横条*/
height:0; /*定义菜单导航横条*/
margin:0; /*定义菜单导航横条*/
padding:0; /*定义菜单导航横条*/
list-style:none; /*定义菜单导航横条*/
}
</style>
<!--定义菜单导航横条-->
<ul class="menu">
<li class="top"><a href="grdt" class="top_blank" target="_blank"><span>个人动态</span></a></li>
<li class="top"><a href="bjdt" class="top_blank" target="_blank"><span>班级动态</span></a></li>
<li class="top"><a href="xxdt" class="top_blank" target="_blank"><span>学校动态</span></a></li>
<li class="top"><a href="login" class="top_blank" target="_blank"><span>登录</span></a></li>
<li class="top"><a href="flies" class="top_blank" target="_blank"><span>文件下载与预览</span></a></li>
<li class="top"><a href="grjj" class="top_blank" target="_blank"><span>个人简介</span></a></li>
<li class="top"><a href="bjjj" class="top_blank" target="_blank"><span>班级简介</span></a></li>
<li class="top"><a href="xxjj" class="top_blank" target="_blank"><span>学校简介</span></a></li>
<li class="top"><a href="tgsc" class="top_blank" target="_blank"><span>提供素材</span></a></li>
<li class="top"><a href="feedback" class="top_blank" target="_blank"><span>建议与反馈</span></a></li>
图片：
由于超链接有四种不同的状态，css用伪类来标识它们。
(1) :link：设置a对象在未被访问前的样式表属性。
(2) :visited：设置a对象在其链接地址已被访问过时的样式表属性。
(3) :hover：设置对象在其鼠标悬停时的样式表属性。
(4) :active：设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性。
定义超链接的样式：
定义超链接样式的一般格式是：
选择符:伪类名 { 样式表 }
css中关于超链接的四个属性正确顺序为：
a:link {}
a:visited {}
a:hover {}
a:active {}
伪类名字对大小写不敏感，但在定义顺序上有要求。:hover必须被置于:link和:visited之后才是有效的，:active必须被置于:hover之后才是有效的。
如果没有指定伪类，则默认为 :link。
超链接默认情况下是始总有下滑线的，如果要去掉下划线，则需要添加样式
text-decoration: none;例子：
a:link { color:#dd3409;text-decoration:none; font-size:13px; }/**//* 超链接的样式 */ a:visited { color:#9f301d;text-decoration:none; }
a:visited:hover { color:#9f301d;text-decoration:underline; }
a:hover { color:#dd3409;text-decoration:underline; }
a:active { color:#ff3300;text-decoration:underline; }