2006-11-02

CSS放大镜效果

来源: 蓝色理想 作者:佚名 评论 0 条
 

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

有爱好的可以在琢磨琢磨。

例子:

<!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实现网页布局  
下一篇:CSS超级技巧大放送合集
    评论加载中…
 推荐文章
     

网站首页  -  网站地图 -   站长论坛  -  网站投稿  -    -  网站管理
Copyright © 2008 芜湖站长站 All Rights Reserved 皖ICP备07500611号