1.什么标签标签制作分页页码
a 有跳转
2.前一页，后一页，当前页，不可点击，所以不能用a链接
3.前一页，后一页"<",">"用<>代替
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"><</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>></span> 30 </div> 31 </body> 32 </html>
6.代码整理
7.为分页页码加icon:放i里面