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)建立新的数组,用于存放图片或者数据

最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容