zoukankan      html  css  js  c++  java
  • 用行内块实现分页样式

    代码

    <style type="text/css">
    *{/*去除默认的距离*/
    	margin: 0;
    	padding: 0;
    }
    .box{text-align: center;} /*让盒子内所有a元素水平居中*/
    
    
    .box a{
    	display: inline-block;
    	 36px;
    	height: 36px;
    	line-height: 36px; /*与height配合实现垂直居中*/
    	text-align: center;
    	border: 1px solid #ccc;
    	background-color: #f7f7f7;
    	text-decoration: none; /*去掉下划线*/
    
    	font-size: 14px;
    }
    
    /*上一页下一页样式*/
    .box .previous,
    .box .next{
    	 85px;
    }
    
    /*选中页样式,省略号样式*/
    .box .current,
    .box .elp{
    	background-color: #fff;
    	border: none;
    }
    
    /*到第几页输入框*/
    .box input{
    	height: 36px;
    	 45px;
    	border: 1px solid #ccc;
    	outline: none; /*选中时的边框*/
    }
    
    .box button{
    	 60px;
    	height: 36px;
    	border: 1px solid #ccc;
    	background-color: #f7f7f7;
    }
    </style>
    <div class="box">
    	<a href="" class="previous">&lt;&lt;上一页</a>
    	<a href="" class="current">1</a>
    	<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="" class="elp">...</a>
    	<a href="" class="next">下一页&gt;&gt;</a>
    	到第 <input type="text">页
    	<button>确定</button>
    </div>
    

    效果:

    1 2 3 4 5 6 7 ... 到第
  • 相关阅读:
    lyft amundsen简单试用
    Prisma 2 is Coming Soon
    amundsen 来自lyft 的开源数据发现平台
    packr 方便的潜入静态资源文件到golang 二进制文件中
    hasura skor 构建安装
    Oracle中删除用户下所有对象的多种方法
    负载均衡----实现配置篇(Nginx)
    【nginx】配置Nginx实现负载均衡
    Vmware ESXi添加共享磁盘
    从Oracle迁移到MySQL的各种坑及自救方案
  • 原文地址:https://www.cnblogs.com/chenxi188/p/13723090.html
Copyright © 2011-2022 走看看