先给出效果图，见下图。下图主要的完成当鼠标放到分页数字的上会呈现一个变大的效果

实现思路：

（1）. 使用浮动属性，以便让li元素水平排列。

（2）.将a元素设置为块级元素，然后设置它们的尺寸。

（3）.使用链接伪类控制当鼠标放在链接之上使a元素尺寸变大；使用绝对定位，使a元素能够覆盖周边的元素。 特别说明:a元素的背景色设置为白色，因为默认状态背景是透明的，否则将会看到两边被遮盖的边框。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            ul {

                list-style: none;

            }

            ul li {

                float: left;

                width: 22px;

                height: 22px;

                margin-left: 5px;

            }

            a {

                display: block;

                width: 20px;

                height: 20px;

                text-align: center;

                text-decoration: none;

                background-color: white;

                border: 1px solid #666;

            }

            a:hover {

                width: 40px;

                height: 30px;

                border: 1px solid #666;

                position: relative;

                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>

        </ul>

    </body>

</html>

[刘阳Java]_CSS数字分页效果的更多相关文章

  1. [刘阳Java]_CSS鼠标悬停

    小白在学习前端技术时候,一定会在刚开始的时候学习CSS2和CSS3的相关知识.这篇内容给大家介绍一个CSS鼠标悬停的效果.大家可以先看下面的效果图,然后我们在说一下实现的效果要求吧 上图效果非常简单和 ...

  2. [刘阳Java]_CSS图片画廊

    图片画廊也是一种比较经典的案例.本节文章主要简单给大家介绍了CSS2实现图片画廊,采取的实现思路 ul放置图片 li标签里面嵌套a标签 a标签里面嵌套两个图片的标签 通过简单的伪类来实现图片预览效果 ...

  3. [刘阳Java]_CSS普通菜单制作

    简单给大家介绍一下CSS普通菜单制作,先看图 功能很简单 UL制作菜单 鼠标进入LI的CSS伪类,实现菜单弹出效果 源码如下 <!DOCTYPE html> <html> &l ...

  4. [刘阳Java]_CSS菜单侧边栏制作

    再来写一个菜单侧边栏的制作,先看截图 源代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF- ...

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

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

  6. [刘阳Java]_纯CSS代码实现内容过滤效果

    继续我们技术专题课,我们今天给大家带来的是一个比较酷炫的"纯CSS代码实现内容过滤效果",没有加入任何JS的效果.全部都是应用CSS3的新增选择器来实现的.先看效果截图 实现思路 ...

  7. [刘阳Java]_eayui-pagination分页组件_第5讲

    分页组件也是很基本的应用,这里我只给出一段简单的代码 关键注意一点:分页组件可以在上面添加buttons按钮,或者自定义分页组件的外观.这些内容需要自行的查看EasyUI的API文档 <!DOC ...

  8. [刘阳Java]_MySQL数据优化总结_查询备忘录

    数据库优化是在后端开发中必备技能,今天写一篇MySQL数据优化的总结,供大家看看 一.MySQL数据库优化分类 我们通过一个图片形式来看看数据优化一些策略问题 不难看出,优化有两条路可以选择:硬件与技 ...

  9. [刘阳Java]_第一个Java程序_第7讲

    1. 其实第一个Java程序是很简单,但是当自己编写第一个Java程序时候需要注意如下几个内容: 理解Java程序的运行环境 校验你的Java环境变量是否能够运行你所写的第一个Java程序 理解Jav ...

随机推荐

  1. 换硬盘，装win10系统小记

    国庆在家给女朋友的电脑换了1T的固态,重装了系统,特此记录一下,方便后续有需要时查看. win10 激活问题 由于以前的系统就是正版 win10,即使重新装机也会自动激活,不需要做什么额外的步骤. 微 ...

  2. 开源软硬一体OpenCV AI Kit（OAK）

    开源软硬一体OpenCV AI Kit(OAK) OpenCV 涵盖图像处理和计算机视觉方面的很多通用算法,是非常有力的研究工具之一,且稳居开发者最喜爱的 AI 工具/框架榜首. 1.会不会被USA禁 ...

  3. CVPR2020：点云三维目标跟踪的点对盒网络（P2B）

    CVPR2020:点云三维目标跟踪的点对盒网络(P2B) P2B: Point-to-Box Network for 3D Object Tracking in Point Clouds 代码:htt ...

  4. MongoDB学习笔记01：入门

    MongoDB简介 MongoDB是一个开源.高性能.无模式的文档型数据库,当初的设计就是用于简化开发和方便扩展,是NoSQL数据库产品中的一种.是最 像关系型数据库(MySQL)的非关系型数据库. ...

  5. 【NX二次开发】拉伸面、拉伸封闭曲线成片体UF_MODL_create_extrusion

    用那几个拉伸,不能将封闭的曲线拉伸成片体,用UF_MODL_create_extrusion函数是可以的,下面是例子. 帮助上说拉伸片体不能有拔模角度,应该是错误的,下面是一个封闭曲线带拔模角度拉伸片 ...

  6. 07：JS（03）

    BOM与DOM操作 # 截至目前为止 我们虽然已经学会了js语法 但是你会发现跟浏览器和html文件还是一点关系没有 """ BOM 浏览器对象模型 Browser Ob ...

  7. 撸了几天的sofa-tracer之后，我悟了！

    什么是分布式链路跟踪 简而言之,在分布式系统下,用于跟踪链路而衍生出的一项技术. 应用场景如下: 应用A,B,C,D,E 以一个层级关系依赖, 当用户向 应用A 发起请求,但是返回了个异常,为了排查这 ...

  8. 使用echarts时，鼠标首次移入屏幕会闪动，全屏会出现滚动条

    原因: 在echarts图表中出现tooltip时,画布的父标签(即:echarts.init()的标签)的有时宽高都会发生变化,导致相对布局的div可能大小发生变化(画布大小却不变),导致页面闪动. ...

  9. 面试侃集合 | DelayQueue篇

    面试官:好久不见啊,上次我们聊完了PriorityBlockingQueue,今天我们再来聊聊和它相关的DelayQueue吧. Hydra:就知道你前面肯定给我挖了坑,DelayQueue也是一个无 ...

  10. Java基准性能测试--JMH使用介绍

    JMH是什么 JMH是Java Microbenchmark Harness的简称,一个针对Java做基准测试的工具,是由开发JVM的那群人开发的.想准确的对一段代码做基准性能测试并不容易,因为JVM ...