20150730实战（分页；分页跳转）

分页

一、还原分页样式

display:inline与display:inline-block;

空隙

数字之间的空隙是为什么？【参考boots里面的布局代码】

是因为inline-block！这种表现是符合规范的应该有的表现。

这类间距有时会对布局，或是兼容性处理产生影响，需要去掉它。

（1）移除空格，元素间的留白间距出现的原因是标签段之间的空格，因此去掉HTML的空格，自然间距就没有了。（不推荐，因为这样的方法让代码可读性变得很差）如下：

移除空格（1）

移除空格（2）

移除空格（3）

（2）使用margin负值（不推荐，参考因素太多）（注：在photo5中只有此方法有效了）

margin

margin负值的大小与上下文的字体和文字大小相关，比如对于12像素大小的上下文，Arial字体的margin负值为-3像素，Tahoma和Verdana就是-4像素，而Geneva为-6像素。由于外部环境的不确定性，以及最后一个元素多出的父margin值等问题，这个方法不适合大规模使用。

(3)让闭合标签吃胶囊（不推荐，代码没有规范性）

奇怪的方法

该方法为了兼容IE6，7，最后一个列表的闭合标签不能丢

实验

显然该方法用在嵌套li标签内会出现问题，但是发现了异样的美感。（感觉这个样式还不错）

（4）使用font-size:0

如上

效果如上

可见与li嵌套使用这个方法不是那么有效。这个方法据说可以解决大部分浏览器下的inline-block, 不过还是要具体问题具体分析。

（5）使用letter-spacing

如上

不针对li嵌套。

（6）使用word-spacing

如上

一个是字符间距(letter-spacing)一个是单词间距(word-spacing)，大同小异。据测试，word-spacing的负值只要大到一定程度，其兼容性上的差异就可以被忽略。因为，貌似，word-spacing即使负值很大，也不会发生重叠。

兼容chrome

如果使用Chrome浏览器，可能看到的是间距依旧存在。可以添加display: table;或display:inline-table;让Chrome浏览器也变得乖巧。

（7）其他方法

成品方法（1）

上面展示的是使用letter-spacing和word-spacing去除格栅单元见间隔方法（注意，其针对的是block水平的元素，因此对IE8-浏览器做了hack处理）

成品方法（2）

2、调整分页里字体样式是针对a标签调的，.list-page a{}

二、实现分页效果

1、为什么oPg2 oPg3是not defined?

2、js如果实现页面切换？

三、表格分页跳转

（1）建立新的数组，用于存放图片或者数据