L1--直角分页标签制作

时间：2015-02-10 00:31:00 阅读：195 评论：0 收藏：0 [点我收藏+]

标签：

介绍

直角分页页码制作

制作流程

静态结构页面制作

<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.

L1--直角分页标签制作

标签：

原文地址：http://www.cnblogs.com/guDouMaoNing/p/4282677.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行