页码制作
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>
?
轉載于:https://www.cnblogs.com/miaoxiaojiao/p/7474475.html
總結
- 上一篇: Android Scroller用法
- 下一篇: 泰康人寿信息化三大核心战略:移动优先、数