分页页码的制作

1.什么标签标签制作分页页码

a 有跳转 

2.前一页，后一页，当前页，不可点击，所以不能用a链接

3.前一页，后一页"<",">"用&lt;&gt;代替

4.设置内联元素居中：给所在容器的设置：text-align:center;

5.解决行内元素之间分割样式：制作的时候没有设置间隔，但是有间隔，是因为行内元素的分割bug，产生：行内元素，当行内元素之间有换行符、tab、空格产生空隙

解决办法：1.元素写成一行

              2.font-size:0;

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 <title>练习</title>
 7 <style type="text/css">
 8 .page-normal{color: #ff9600;text-align: center;font-size: 0;}
 9 .page-normal a,.page-current,.page-prev{margin-left: 10px;padding:5px 7px;font-size: 18px;}
10 .page-normal a{border:1px solid #ff9600;color:#ff9600;text-decoration: none;}
11 .page-normal a:hover{background: #ffbe94;}
12 .page-current{border:1px solid #ff6500;color: #ff9600;background: #ffbe94;}
13 .page-prev{border:1px solid #ffe3c6;color: #ffe3c6;}
14 </style>
15 </head>
16 <body>
17     <div class="page-normal">
18         <span class="page-prev">&lt;</span>
19         <span class="page-current">1</span>
20         <a href="#">2</a>
21         <a href="#">3</a>
22         <a href="#">4</a>
23         <a href="#">5</a>
24         <a href="#">6</a>
25         <a href="#">7</a>
26         ...
27         <a href="#">199</a>
28         <a href="#">200</a>
29         <span>&gt;</span>
30     </div>
31 </body>
32 </html>

 

6.代码整理

 7.为分页页码加icon:放i里面

posted on 2015-11-25 14:01  zhangjingyun  阅读(485)  评论(0)  编辑  收藏  举报