设置密码

验证码错误,请重新填写

免费建站旅程马上开始

开始建站
建站中

已有帐号?直接登录

首页>森动学院>网站建设教程 > CSS实现放大镜效果
CSS实现放大镜效果
发布时间: 2012-11-12

最近研究了下网页中的放大镜效果,得出一DIV+CSS的代码,现分享出来,供大家参考。

<!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="#" _fcksavedurl="#">1</a> <a href="#" _fcksavedurl="#">2</a> <a href="#" _fcksavedurl="#">3</a> <a href="#" _fcksavedurl="#">4</a> <a href="#" _fcksavedurl="#">5</a>

<a href="#" _fcksavedurl="#">6</a> <a href="#" _fcksavedurl="#">7</a> <a href="#" _fcksavedurl="#">8</a>

<a href="#" _fcksavedurl="#">9</a> <a href="#" _fcksavedurl="#">10</a> </div>