页码制作 - 喵小娇

 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>
posted on 2017-09-04 17:07 喵小娇阅读(328) 评论(0) 收藏举报
刷新页面返回顶部