当前位置：网络学院首页 >> 设计教程 >> web标准 >> 一个跟链接图片有关的CSS的效果

一个跟链接图片有关的CSS的效果

来源：中国设计秀作者：子鼠点击：554 加入收藏

关键字：图片有关 CSS

这个有人发邮件问我的一个效果，我想了一下，没有想出什么好的办法，用纯CSS；用自已的办法虽然写出来的，代感觉这样实现实在是惭愧，不合理。真想用FLASH给他作一个同样的效果；

效果我写出来了，CSS还能优化一点点；谁有更好的办法，希望交流一下！

效果要求：

程序代码

效果：
1、如你图示。
2、图片不可点。
3、当鼠标移到链接上后，图片发生变化，移出后变回原来的。

CSS:

程序代码

布局：

程序代码

<div id="ads">
  <div class="block1">
    <ul>
      <li><h3>title</h3></li>
   <li><a href=""><span class="b1"></span>this is title 1.</a></li>
      <li><a href=""><span class="b2"></span>this is title 2.</a></li>
      <li><a href=""><span class="b3"></span>this is title 3.</a></li>
      <li><a href=""><span class="b4"></span>this is title 4.</a></li>
      <li><a href=""><span class="b5"></span>this is title 5.</a></li>
    </ul>
  </div>
</div>

点运行可以查看一下效果！

HTML代码

点击下面的运行，可预览代码效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>img test</title>
<style>
*{ margin:0; padding:0; list-style:none;}
body{ padding:50px; font-size:12px; line-height:1.8; font-family:Verdana, Arial, "宋体"}
#ads{ border:1px solid #CC0000}
.block1{margin:10px;background: url(http://www.zishu.cn/attachments/month_0712/h2007124221631.gif) no-repeat;background-position: left 10px;}
* html .block1{background-position: left 22px;}
*+html .block1{background-position: left 22px;}
.block1 ul{ padding-left:120px;}
.block1 a:active,.block1 a:hover{cursor:pointer}
.block1 a:hover span,.block1 a:active span{z-index:20px; display:block; position:absolute; width:100px; height:100px; margin-left:-120px}
.b1{ background:url(http://www.zishu.cn/attachments/month_0712/n2007124221636.gif); margin-top:-15px;}
.b2{ background:url(http://www.zishu.cn/attachments/month_0712/12007124221641.gif); margin-top:-37px;}
.b3{ background:url(http://www.zishu.cn/attachments/month_0712/j2007124221644.gif); margin-top:-59px;}
.b4{ background:url(http://www.zishu.cn/attachments/month_0712/e2007124221648.gif); margin-top:-81px;}
.b5{ background:url(http://www.zishu.cn/attachments/month_0712/e2007124221652.gif); margin-top:-103px;}
</style>
</head>
<body>
<div id="ads">
  <div class="block1">
    <ul>
      <li><h3>title</h3></li>
   <li><a href=""><span class="b1"></span>this is title 1.</a></li>
      <li><a href=""><span class="b2"></span>this is title 2.</a></li>
      <li><a href=""><span class="b3"></span>this is title 3.</a></li>
      <li><a href=""><span class="b4"></span>this is title 4.</a></li>
      <li><a href=""><span class="b5"></span>this is title 5.</a></li>
    </ul>
  </div>
</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

顶一下

2007-12-11 14:47:20 出处：中国设计秀＿优秀网页欣赏＿精美平面设计欣赏＿设计教程

本文引用地址：http://www.cnwebshow.com/edu/html/article_4130.html

热点文章/相关文章