1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>页码</title> 6 <style> 7 .page { 8 width: 600px; 9 height: 60px; 10 background: lavender; 11 margin: 90px auto; 12 text-align: center; 13 } 14 15 .page a { 16 height: 28px; 17 line-height: 28px; 18 display: inline-block; 19 background: #fff; 20 border: 1px solid darkgrey; 21 text-decoration: none; 22 color: #333; 23 padding: 0 8px 0 9px; 24 } 25 26 .page a:hover { 27 border-color: red; 28 color: red; 29 } 30 31 .page .active{ 32 font-weight: bold; 33 background: #fcf9ea; 34 cursor: text; 35 } 36 37 .page .active:hover{ 38 border-color: #cdcdcd; 39 color: #333; 40 } 41 42 </style> 43 </head> 44 <body> 45 <div class="page"> 46 <a href="#">上一页</a> 47 <a href="#">1</a> 48 <a href="#">2</a> 49 <a href="#">3</a> 50 <a href="#">4</a> 51 <a class="active" href="#">5</a> 52 <a href="#">12</a> 53 <a href="#">76</a> 54 <a href="#">342</a> 55 <a href="#">下一页</a> 56 </div> 57 </body> 58 </html>