分页页码制作

强大源于点滴

这次要实现的HTML分页页码的制作

也就是要做成这样

实现很简单了，div里面很多a标签，然后设置对应的css属性，

代码如下：

<div class="page_normal"><span class="page_prev"><</span><span class="page_current">1</span><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a>...<a href="#">200</a><a href="#">></a></div>

<style type="text/css">.page_normal a{border: 1px solid #ff9600;padding: 5px 7px;color: #ff6500;text-decoration: none;}.page_normal a:hover{border: 1px solid #ff9600;padding: 5px 7px;color: #ff6500;text-decoration: none;background: #ffbe94; } .page_normal{color: #ff6500;text-align: center; }.page_normal .page_current{border: 1px solid #ff9600;padding: 5px 7px;color: #ff6500;text-decoration: none;background: #ffbe94; }.page_normal .page_prev{ border: 1px solid #ffe3c6;;color: #ffe3c6;padding: 5px 7px;}</style>

是不是很简单!但是这么简单的东西还有一些细节需要注意

1.从图里面可以看出来，每个a标签中间都是分开，但是期间我们并没有添加任何margin属性，这是为什么呢？

答：所有的行内标签（比如a，span）都有间隙，产生原因：换行符、tab(制表符)、空格产生空隙。解决方法：1、元素写成一行 2、设置font-size:0

1是不可行的，因为如果写成一行会使代码非常的乱，这样不好不好

2是将父容器（div）设置为font-size:0，然后本身设置font-size，这样就比较合适

.page-normal{color:#ff6500;text-align:center;font-size:0;}.page-normal a,.page-normal .page-current,.page-normal .page-prev{padding:5px 7px;font-size:14px;margin-left:10px;}

2.前一页的图标<>是和html冲突的，这一类东西怎么办呢？

答：运用实体标签，HTML实

体请参考HTML实体标签

3.在页面中参入小的图标，这是在前端那种经常使用的一种方式，把页面上的所有图标画在一张图上，前端攻城狮根据需求切图（常用），但是这里有一种更好的方式：运用background-position属性来显示：

我们现在要实现的是在前一页后一页前边加一个小的图标

 

给的材料是这样的：

实现：

<span class="page-disabled"><i></i>上一页</span>.page-next i,.page-disabled i{cursor:pointer;display:inline-block;width:5px;height:9px;background:url(img/bg_hotsale.gif);}.page-disabled i{background-position:-80px -608px;margin-right:3px;} .page-next i{background-position:-62px -608px;margin-left:3px;}

有人问下边的background-position:-80px -608px;

后面的像素什么意思，80指的是原图中你要的图片在原图中距离x轴的U距离，可以用在ps属性看到

差不多就这些点，完辣↖(^ω^)↗