介绍
直角分页页码制作
制作流程
- 静态结构页面制作
<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="#">7</a> ... <a href="#">199</a> <a href="#">200</a> <a href="#">></a> </div>
效果:
- 添加css样式
.page-normal{ text-align: center; color: #ff6500; font-size: 0; } .page-normal a,.page-normal span,.page-normal .page-current,.page-normal .page-prev { font-size: 18px; margin-left:10px; padding: 5px 7px; } .page-normal a { border: 1px solid #ff9600; color: #ff6500; text-decoration: none; cursor: pointer; } .page-normal a:hover { border: 1px solid #ff6500; background: #ffbe94; } .page-normal .page-current { border: 1px solid #ff6500; color: #ff6500; background: #ffbe94;; } .page-normal .page-prev { border: 1px solid #ffe3c6; color: ffe3c6; }
效果:
注意问题
- 使用什么标签来制作分页页码
<a>标签 、<span>标签、 <div>标签皆可以
- 使用html实体标签输入"<",">"
- 内联元素设置居中(设置其所在容器的text-align:center即可)
- 修复行内元素之间间隔bug问题
- 产生原因:换行符,tab(制表符),空格产生空隙
- 解决方法:1、元素写成一行;2、设置font-size:0.