怎么设定图片超链接,用css样式怎么写?

发布网友发布时间：2022-04-06 11:24

我来回答

共5个回答

懂视网时间：2022-04-06 15:46

这篇文章主要给大家介绍CSS设置动态超链接的方法，有代码有文字说明，比较容易理解，感兴趣的朋友可以参考一下，希望对你有所帮助。

HTML中，超链接是通过标记<a>实现的，具体的地址使用标记<a>的href属性。

<ahref="http://blog.csdn.net/nangeali">ali的博客</a>

默认的情况下，浏览中的超链接统一为蓝色并且有下划线，点击过后的超链接则为紫色，而且也有下划线。

CSS可以设置超链接的各种属性，比如字体、颜色和背景等等，而且，可以通过伪类别制作很多动态效果。

首先，去掉超链接的下划线：

a{ text-decoration:none; }

此时，无论是超链接本身，还是点击过的超链接下划线都去掉了。

CSS的伪类别——Anchor Pseudo Classes，使用伪类别制作动态下过，具体的属性如下：

A:link——超链接的普通样式，正常浏览器中的样式。

A:visited——点击过的超链接的样式。

A:hover——鼠标指针经过超链接上时的样式。

A:active——在超链接上单击时，即当前激活时，超链接的样式。

<html>
 <head>
  <title>   
  </title>
  <style>
   <!--
   a:link{
   color:#005799;
   text-decoration:none;
  }
   a:visited{
   color:#0000;
   text-decoration:none;
  }
   a.hover{
   color:#ffff00;
   text-decoration:underline;
  }
   -->
  </style>
 </head> 
 <body>
  <table width="600px"cellpadding="2" class="chara1" align="center">
   <tr>
    <td><a href="#">首页</a></td>
    <td><a href="#">心情日记</a></td>
    <td><ahref="#">Free</a></td>
    <td><a href="#">一起走到</a></td>
    <td><a href="#">从明天起</a></td>
    <td><a href="#">纸飞机</a></td>
    <td><a href="#">下一站</a></td>
   </tr> 
  </table>
 </body>
</html>

可以看出，超链接本身都是深蓝色，没有下划线，点击过后变成了黑色也没有下划线，当鼠标指针经过时，超链接变成了黄色，而且有下划线。

此外，各种背景、边框和排版的效果都可以加入到超链接的几个伪属性中，当前激活状态a:active，一般显示的情况非常少，很少使用。

当用户单击一个超链接之后，焦点很容易就会转移到其他地方，比如新打开的窗口等，此时，超链接就不是当前激活状态了。

热心网友时间：2022-04-06 12:54

设定图片超链接，用css样式来实现，其实就是给这个图片的块添加超链接，我们可以通过在这个块的前面添加一个a标签来实现，然后填写上你所需要的链接地址就行了，通过代码来理解：
<html>
<head>
<style>
#div1{
width:660px;
height:400px;
border:1px soild #f00;
}

</style>
</head>
<body>
<div id='div1'>
<a href=""><img src='图片地址'></a>
</div>
</body>
</html>

热心网友时间：2022-04-06 14:12

css实现鼠标悬停链接的图片动态改变

实现代码：

……
<style type="text/css">
td#td1 a
{
text-decoration:none;
background:transparent url(/images/1.gif) no-repeat;
display:block;
width:145px;
line-height:25px;
}
td#td1 a:hover
{
background:transparent url(/images/2.gif);
display:block;
width:145px;
height:25px;
}
</style>
……
<TABLE id=nav cellSpacing=0 cellPadding=0 width=150 border=0>
<TBODY>
<TR>
<TD id=td1 width=150 height=30><A href="#"> </A></TD></TR></TBODY></TABLE>

----------------------------------------------

热心网友时间：2022-04-06 15:46

#test a:link,a:visited{background:url(图片地址) no-repeat;display:block｝
#test a:hover{background:url(图片地址) no-repeat;display:block｝

<body>
<a href="#" id="test">连接</a>
</body>

热心网友时间：2022-04-06 17:38