CSS放大镜效果

时间:2008-10-06 10:43:44  来源:第二电脑网上收集  作者:

  第二电脑网导读:href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><style type="text/css"><!--a { float:left; margin:5px 1px 0 1px; width:20px; height:20px; color:#999; font:12px/20px 宋体; tex...
  正文:

前段时间嗷嗷有发过"好玩的放大镜效果",今天看了下,发现还有简单的方法也能够实现,即利用内外补丁的调整。

有兴趣的可以在琢磨琢磨。

例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/Css">
<!--
a {
 float:left;
 margin:5px 1px 0 1px;
 width:20px;
 height:20px;
 color:#999;
 font:12px/20px 宋体;
 text-align:center;
 text-decoration:none;
 border:1px solid orange;
 }
a:hover {
 position:relative;
 margin:0 -9px 0 -9px;
 padding:0 5px;
 width:30px;
 height:30px;
 font:bold 16px/30px 宋体;
 color:#000;
 border:1px solid black;
 background:#eee;
 }
-->
</style>
<div>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
</div>


CSS放大镜效果》由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Page/css/2008-10-06/1887.html


关键字:

关于《CSS放大镜效果》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td