一、还原分页样式
display:inline与display:inline-block;
数字之间的空隙是为什么?【参考boots里面的布局代码】
是因为inline-block!这种表现是符合规范的应该有的表现。
这类间距有时会对布局,或是兼容性处理产生影响,需要去掉它。
(1)移除空格,元素间的留白间距出现的原因是标签段之间的空格,因此去掉HTML的空格,自然间距就没有了。(不推荐,因为这样的方法让代码可读性变得很差)如下:
(2)使用margin负值(不推荐,参考因素太多)(注:在photo5中只有此方法有效了)
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浏览器,可能看到的是间距依旧存在。可以添加display: table;或display:inline-table;让Chrome浏览器也变得乖巧。
(7)其他方法
上面展示的是使用letter-spacing和word-spacing去除格栅单元见间隔方法(注意,其针对的是block水平的元素,因此对IE8-浏览器做了hack处理)
2、调整分页里字体样式是针对a标签调的,.list-page a{}
二、实现分页效果
1、为什么oPg2 oPg3是not defined?
2、js如果实现页面切换?
三、表格分页跳转
(1)建立新的数组,用于存放图片或者数据