css实现分页栏放大镜效果的案例

发布时间:2020-06-03编辑:脚本学堂
本文讲分页栏放大镜效果实现方法,我以前还真没注意这种效果是怎么实现的,共同学习了。
Html代码
复制代码 代码示例:
1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.<html xmlns="http://www.w3.org/1999/xhtml">
3.<head>
4.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5.<title>无标题文档</title>
6.<style type="text/css">
7.<!--
8.a {
9. float:left;
10. margin:5px 1px 0 1px;
11. width:20px;
12. height:20px;
13. color:#999;
14. font:12px/20px 宋体;
15. text-align:center;
16. text-decoration:none;
17. border:1px solid orange;
18. }
19.a:hover {
20. position:relative;
21. margin:0 -9px 0 -9px;
22. padding:0 5px;
23. width:30px;
24. height:30px;
25. font:bold 16px/30px 宋体;
26. color:#000;
27. border:1px solid black;
28. background:#eee;
29. }
30.-->
31.</style>
32.</head>
33.
34.<body>
35.<div>
36.<a href="#">1</a>
37.<a href="#">2</a>
38.<a href="#">3</a>
39.<a href="#">4</a>
40.<a href="#">5</a>
41.<a href="#">6</a>
42.<a href="#">7</a>
43.<a href="#">8</a>
44.<a href="#">9</a>
45.<a href="#">10</a>
46.</div>
47.</body>
48.</html>