代码实例如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<head>
<title>蚂蚁部落</title>
<style type="text/css">
    ul
    {
         list-style:none;
     }
     ul li
     {
          float:left;
          width:22px;
          height:22px;
          margin-left:5px;
     }
     a
     {
         width:20px;
         height:20px;
         display:block;
         text-align:center;
         text-decoration:none;
         background-color:white;
         border:1px solid #666;
     }
     a:hover
     {
        width:40px;
        height:30px;
        border:1px solid #666;
        position:absolute;
        line-height:30px;
        margin:-5px 0 0 -10px;
    }
</style>
</head>
<body>
   <ul>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">6</a></li>
      <li><a href="#">7</a></li>
   </ul>
</body>

</html>

以上代码实现了我们想要的效果，下面简单介绍一下实现的步骤:
一. 使用浮动属性，以便让li元素水平排列。
二.让a元素设置为块级元素，然后设置它们的尺寸。
三.通过使用链接伪类控制当鼠标放在链接之上时使a元素的尺寸变大，并且使用绝对定位，使当前a元素能够覆盖周边的元素。
特别说明:之所以让a元素的背景色设置为白色，是因为默认状态背景是透明的，如果不设置背景色，将会看到两边被遮盖的边框。

CSS如何实现数字分页效果的更多相关文章

  1. PHP自练项目之数字分页效果

    学习要点:1.LIMIT 用法2.各种参数3.超链接调用 第一:先在文件中设置数字分页模块:我的文件是(blog.php) //分页模块 $_page = $_GET['page']; $_pages ...

  2. [刘阳Java]_CSS数字分页效果

    先给出效果图,见下图.下图主要的完成当鼠标放到分页数字的上会呈现一个变大的效果 实现思路: (1). 使用浮动属性,以便让li元素水平排列. (2).将a元素设置为块级元素,然后设置它们的尺寸. (3 ...

  3. PHP自练项目之数字与文字的分页效果在函数中实现

    /** * * @param $_sql * @param $_size */ function _page($_sql,$_size) { //将里面的所有变量取出来,外部可以访问 global $ ...

  4. thinkphp自定义分页效果

    TP自带了一个分页函数,挺方便使用的. 下面是我的使用方法: /*****************分页显示start*************************/ $arr_page=$this ...

  5. 基于vue2.0实现仿百度前端分页效果（二）

    前言 上篇文章中,已经使用vue实现前端分页效果,这篇文章我们单独将分页抽离出来实现一个分页组件 先看实现效果图 代码实现 按照惯例,我们在冻手实现的时候还是先想一想vue实现组件的思路 1.需要提前 ...

  6. 利用ajax实现分页效果

    在网页中看到的分页效果,想一下就点击分页中的内容的时候,然后调用ajax调出对应的数据,正确的显示在相应的标签内. 1.用html实现正确的样式和结构 2.采用jquery中的ajax调出数据. 需要 ...

  7. 你想不到的！CSS 实现的各种球体效果【附在线演示】

    CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现各种球体效果.有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有潜在的性能问题:另外一种是使用 CSS3 ...

  8. 5种风格的 jQuery 分页效果【附代码】

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  9. thinkphp ajax 无刷新分页效果的实现

    思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...

随机推荐

  1. 003. 连接access数据库代码

    1. 前端aspx中的代码 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="De ...

  2. 解决Win10默认占用80端口

    方案1: 以管理员身份运行cmd;输入net stop http;如果提示是否真的需要停止这些服务,则选择“Y”;完成后输入:sc config http start=disabled 方案2: Ct ...

  3. 006 [翻译] Haneke（一个Swfit iOS缓存类）

    Github项目地址:https://github.com/Haneke/HanekeSwift Haneke是一个用swift写成的轻量级iOS类,以简单好用著称(design-decisions- ...

  4. python中保留两位小数

    今天写程序的时候碰到了一个问题关于如何控制浮点数只显示小数点后两位,正常的想法是用round函数,例如 round(a, 2),但是在面对下面的问题时候round就不太好用了 >>> ...

  5. CSS3之Flexbox布局

    CSS3为我们提供了一种可伸缩的灵活的web页面布局方式-flexbox布局,它具有很强大的功能,可以很轻松实现很多复杂布局,在它出现之前,我们经常使用的布局方式是浮动或者固定宽度+百分比来进行布局, ...

  6. tree 查询出数据遍历tree

    $('#tree1').tree({ url:'${contextPath}/pedition/treelistJc.html?editionUid=${ formatEdition.ppmId}', ...

  7. 【性能测试】性能测试总结<三>

    常见性能测试工具: 性能测试工具,从理论上来讲在性能测试过程中使用到的所有工具都可以称其为性能测试工具,通常分为以下几类: 说明: 服务器端性能测试工具:需要支持产生压力和负载,录制和生成脚本,设置和 ...

  8. 【Andorid开发框架学习】之Mina开发之客户端开发

    昨天我们讲到了Mina的基本知识点.如果还有不懂得同学可以看一下我昨天的博客.http://www.cnblogs.com/getherBlog/p/3934927.html今天我着重来讲一下基于Mi ...

  9. 文字对齐之text-align总结

    一.文字对齐总结: 下面是我实际运用中遇到的问题总结: css代码: 效果(段落文字没有对齐): 去掉html中的<p>标签,css样式同样去掉p标签,效果如下(达到预期效果): 为什么在 ...

  10. 剑指offer系列61---数组中的逆序对

    [题目]在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数. * [思路]运用归并排序的思想. * 首先将数组分成两个子数组,统 ...