`

分页栏放大镜效果

    博客分类:
  • HTML
 
阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<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>
</head>

<body>
<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>
</body>
</html>
 
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics