低一度

顶部横幅

CSS实现图文远端链接关联效果

2010-7-9 - diyidu - css应用 - Views

今天再分享一个CSS实例——图文远端链接关联效果。这个效果现在貌似已经开始流行了，我看到不少站都应用了它。感觉还不错哦，一来将图片和文字分开排列，给人很整洁的观感；二来也可以避免因图文搭配不合理所造成的各种错位；另外还很有新鲜感，所以很值得推荐。一起来看实现代码——

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
 <title>CSS实现图文远端链接关联效果 - 低一度博客</title>
 <style type="text/css">
<!--
* {margin: 0; padding: 0;}
body {font: 12px Helvetica, Sans-Serif;}
#page-wrap {width: 600px; margin: 50px auto;}
h1 {font-size: 30px; letter-spacing: -1px; margin: 0 0 20px 0;}
.theme {position: relative;}
a {text-decoration: none; color: #222; display: block; margin: 0 0 0 270px; outline: none; padding: 5px;}
a img {border: 1px solid #ccc;}
a:hover {background: #ffefcd;}
a .name {font: 18px Georgia, Serif;}
a:hover .name {color: #900; font-weight: bold;}
a:hover img {border: 5px solid #222; margin: -4px;}
a .photo {display: block; position: absolute; width: 125px; height: 125px;}
#doogle .photo {top: 0; left: 0;}
#simpleg .photo {top: 0; left: 134px;}
#prower .photo {top: 134px; left: 0;}
#diyidu .photo {top: 134px; left: 134px;}
-->
</style>
</head>

<body>
 <div id="page-wrap">
  <h1>CSS实现图文远端链接关联效果</h1>
  <div class="theme">
            <a href="#toby" id="doogle">
             <span class="name">仿GG主题Doogle</span><br />
             这里是有关仿GG主题Doogle的文字简介。
             <span class="photo">
              <img src="http://www.diyidu.cn/UPLOAD/theme1.jpg" alt="仿GG主题Doogle" />
             </span>
            </a>
   <a href="#tom" id="simpleg">
    <span class="name">绿色系简洁双栏主题SimpleG</span><br />
    这里是有关绿色系简洁双栏主题SimpleG的文字简介。
    <span class="photo">
     <img src="http://www.diyidu.cn/UPLOAD/theme2.jpg" alt="绿色系简洁双栏主题SimpleG" />
    </span>
   </a>
   <a href="#gail" id="prower">
    <span class="name">仿Wp主题“Prower_dyd”</span><br />
    这里是有关仿Wp主题“Prower_dyd”的文字简介。
    <span class="photo">
     <img src="http://www.diyidu.cn/UPLOAD/theme3.jpg" alt="仿Wp主题“Prower_dyd”" />
    </span>
   </a>
   <a href="#padma" id="diyidu">
    <span class="name">zblog主题“diyidu”</span><br />
    这里是有关zblog主题“diyidu”的文字简介。
    <span class="photo">
     <img src="http://www.diyidu.cn/UPLOAD/theme4.jpg" alt="zblog主题diyidu" />
    </span>
   </a>
  </div>
 </div>
</body>
</html>

再看实际演示（单击“运行代码”查看效果）——


提示：您可以先修改部分代码再运行

关键词 // css css应用 css实例
出处：低一度，链接：http://www.diyidu.cn/post/css_photo_link.html

上一篇：新手选购虚拟主机N个注意事项 下一篇：博客暂停更新几日兼谈心情

随机推荐

to "CSS实现图文远端链接关联效果"

  • liu53093
    #1 liu53093 回复该留言 2010-7-9 11:59:06
    看看能不能加到页面里面。
    diyidu 于 2010-7-10 11:01:47 回复
    可以的。
  • 小托
    #2 小托 回复该留言 2010-7-9 12:31:25
    没沙发到，可惜！呜呜…
    diyidu 于 2010-7-10 11:02:39 回复
    你整天讲什么沙发，一点儿意义也没有，不如帮哥提几个建议。
  • mice
    #3 mice 回复该留言 2010-7-9 13:18:17
    这个效果不错，嘿嘿，留个爪子，以后用。
    diyidu 于 2010-7-10 11:03:00 回复
    欢迎。
  • 秦大少
    #4 秦大少 回复该留言 2010-7-9 13:48:21
    wordpress的有没有？
    diyidu 于 2010-7-10 11:03:57 回复
    这只是一个代码实例，只要会用，什么程序都可以融合进去。
  • 天光土木
    #5 天光土木 回复该留言 2010-7-9 17:19:45
    太可惜了！没有抢到沙发。
    diyidu 于 2010-7-10 11:05:42 回复
    下次早点来排队：）
  • Tangboke
    #7 Tangboke 回复该留言 2010-7-9 17:20:52
    谢谢分享，读了。
    diyidu 于 2010-7-10 11:06:54 回复
    不客气，多提意见吧。
  • 网名
    #9 网名 回复该留言 2010-7-9 23:32:24
    想学，就是学不会，知识不够。
    diyidu 于 2010-7-10 11:09:05 回复
    很容易啊，CSS还不简单。
  • 619
    #10 619 回复该留言 2010-7-9 23:41:14
    真漂亮。
    diyidu 于 2010-7-10 11:09:50 回复
    619也学会恭维人啦？兄弟多批评呵。
  • 北屯
    #11 北屯 回复该留言 2010-7-9 23:41:27
    看起来挺舒服的，不错。
    diyidu 于 2010-7-10 11:10:32 回复
    谢谢。常来。
  • 草儿
    #12 草儿 回复该留言 2010-7-9 23:51:10
    看着挺漂亮的。
    diyidu 于 2010-7-10 11:11:02 回复
    这个谈不上漂亮啦：）
  • 集思
    #13 集思 回复该留言 2010-7-10 2:24:39
    这个效果好，但是用的地方不多，明天复制下来研究下，拿来当CSS学习的案例哈！
    diyidu 于 2010-7-10 11:11:40 回复
    我在想，这个肯定有其他的用处。
  • fx200
    #14 fx200 回复该留言 2010-7-10 9:34:02
    谢谢分享，拜读了。
    diyidu 于 2010-7-10 11:12:42 回复
    不客气，多提议吧。
  • myway
    #15 myway 回复该留言 2010-7-10 10:52:13
    OH，NO。看不懂啊。
    diyidu 于 2010-7-10 11:13:21 回复
    不会吧？呵呵。
  • 欧文
    #16 欧文 回复该留言 2010-7-10 10:55:51
    禀报博主，IE6下好像不兼容？
    diyidu 于 2010-7-10 11:14:24 回复
    恩，终于有人提出问题了，感谢！是这样的，不兼容IE6，我找个时间再修正下。
  • 可乐
    #17 可乐 回复该留言 2010-7-10 12:56:06
    好有意思，学习了。
    diyidu 于 2010-7-10 17:00:26 回复
    有意思？汗。
  • joyla
    #18 joyla 回复该留言 2010-7-10 23:07:25
    啊哦，啊哦！我也来看看！分类目录是如何横向排列的！
    周哥 于 2010-7-11 21:57:26 回复
    这个我也不知道，
  • 任鸟飞
    #20 任鸟飞 回复该留言 2010-7-14 19:44:10
    这在IE6中肯定不正常，这么重要的功能，最好应该可以支持大多数浏览器，而国内IE6份额还比较大，应该谨慎使用。
    diyidu 于 2010-7-17 22:11:37 回复
    嗯，也对，我重新在写一个。
  • 疯子
    #21 疯子 回复该留言 2010-7-17 11:23:49
    每次桶哥都提供这么好的东西啊！
    diyidu 于 2010-7-17 22:12:02 回复
    瞎折腾啊：）

Add comment

验证码