案例-分页按钮（CSS3）

红太狼 2023-10-03 13:52 4阅读 0赞

## 案例-分页按钮（CSS3） ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>案例-分页按钮</title>
        <style>
            li {
        
                float: left;
                width: 30px;
                height: 30px;
                border: 1px solid skyblue;
                text-align: center;
                line-height: 30px;
                list-style: none;
                margin: 10px;
    
                border-radius: 50%;
                /* 圆圈 */
                cursor: pointer;
                /* 鼠标经过的时候变为小手 */
    
                /* 过渡 */
                transition: all 0.4s;
            }
    
            li:hover {
        
                transform: scale(1.2);
            }
        </style>
    </head>
    
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
        </ul>
    </body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，4人围观）

还没有评论，来说两句吧...

相关阅读

相关 Python分页案例

from django.http import HttpResponse from django.http import JsonResponse ...

我不是女神ヾ/ 2024年04月17日 05:28/ 0 赞/ 72 阅读

相关 Jquery 分页案例

Jquery 分页案例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"

Bertha 。/ 2023年08月17日 17:17/ 0 赞/ 133 阅读

相关 iview Page 分页增加确定按钮

vue: <Page id="pageId" show-total show-elevator show-sizer :page-size= "page.pag

﹏ヽ暗。殇╰゛Y/ 2023年06月13日 09:35/ 0 赞/ 20 阅读

相关 HTML+CSS实现鼠标滑过分页按钮时放大效果

利用html+css实现当鼠标滑过分页按钮时，按钮自动放大的效果 <!DOCTYPE html> <html> <head>

小灰灰/ 2022年12月03日 09:22/ 0 赞/ 174 阅读

相关 html css分页特效,js css自定义分页效果

网上看了好多分页插件都不太满意，所以根据网上的一些东西自己做了一个，可以搭配mvc和数据库效果图片 ![aa09ff96e4196cce4c3b78bae2dc51ee.

阳光穿透心脏的1/2处/ 2022年10月06日 10:53/ 0 赞/ 182 阅读

相关网页按钮效果css3,css3按钮效果

/\ Box colors \/ .bg-1 \{ background:\ECEFF1; color:\37474f; \} /\ Common button st

た入场券/ 2022年09月02日 14:53/ 0 赞/ 261 阅读

相关 Page翻页分页css代码，分页div+css代码

css分页代码集合模板如下翻页上下分页按钮效果一 ![20141222110027656][] DIV代码： <table styl

朴灿烈づ我的快乐病毒、/ 2022年08月06日 04:23/ 0 赞/ 252 阅读

相关 django Paginator分页+Boostrap样式快速生成分页按钮

django自带分页功能，方便我们快速调用，更多介绍见[官方文档][Link 1] 1.导入 from django.core.paginator import

约定不等于承诺〃/ 2022年06月02日 06:20/ 0 赞/ 262 阅读

相关简单分页案例

我使用的是索引分页，这里我以ssh框架的分页用例讲解：分页类Page.java 1 public class Pager<T> { 2 priv

缺乏、安全感/ 2021年11月11日 03:24/ 0 赞/ 422 阅读

相关 CSS实现分页条

对于搜索引擎或电子商务网站，常常将信息分页显示，这样可以减少页面大小，进而提高页面的加载速度。分页显示后，就需要通过分页导航来告诉用户要浏览的信息量，方便用户快速跳过一些...

小灰灰/ 2020年04月29日 05:55/ 0 赞/ 1304 阅读