L1--直角分页标签制作

介绍

 直角分页页码制作

制作流程

• 静态结构页面制作

<div class="page-normal">
　　<span class="page-prev">&lt;</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="#">&gt;</a>
</div>

效果:

<1 2 3 4 5 6 7 ... 199 200 >

---

• 添加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;
}

效果:

< 1 2 3 4 5 6 7 ... 199 200 >

注意问题

• 使用什么标签来制作分页页码

<a>标签 、<span>标签、 <div>标签皆可以

• 使用html实体标签输入"<",">"
• 内联元素设置居中(设置其所在容器的text-align：center即可)
• 修复行内元素之间间隔bug问题
  • 产生原因：换行符，tab（制表符），空格产生空隙
  • 解决方法：1、元素写成一行；2、设置font-size：0.