zoukankan html css js c++ java

前端分页页码静态部分制作

效果：

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>分页页码demo</title>
        <style type="text/css">
            
            /*simple css reset*/
            *{
                margin:0px;
                padding:0px;
            }
            /*分页div面板样式*/
            .page-normal{
                color:#41B883;
                text-align:center;
            }
            /*所有分页页码的共同样式*/
            .page-normal a, .page-normal .page-current{
                border:1px solid #41B883;
                padding:5px 7px;
                text-decoration:none;
            }
            /*未选中的分页页码样式*/
            .page-normal a{
                color:#41B883;
            }
            /* 1. 选中的分页页码样式，即当前所在页面的页码
             * 2. 未选中的分页页码样式的鼠标滑过样式
             */
            .page-normal .page-current, .page-normal a:hover{
                color:#FFF;
                background-color:#41B883;
            }

        </style>
    </head>
    <body>
        
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <!--分页前端静态代码-->
    <div class="page-normal">
        <a href="#">&nbsp;&lt;&nbsp;</a>
        <a href="#">1</a>
        <span>...</span>
        <a href="#">7</a>
        <a href="#">8</a>
        <a href="#">9</a>
        <span class="page-current">10</span>
        <a href="#">11</a>
        <a href="#">12</a>
        <a href="#">13</a>
        <span>...</span>
        <a href="#">200</a>
        <a href="#">&nbsp;&gt;&nbsp;</a>
    </div>        
        
    </body>
</html>

参考资料：

慕课网视频传送门 http://www.imooc.com/learn/15

查看全文

相关阅读:
H5实现魔方游戏
 T-SQL:CTE用法（十）
c# API接收Base64转图片
 T-SQL ：联接查询练习 (杂)
T-SQL：基础练习（杂）
UI5-文档-导航栏
 UI5-文档-4.10-Descriptor for Applications
UI5-文档-4.9-Component Configuration
UI5-文档-4.8-Translatable Texts
UI5-文档-4.7-JSON Model

原文地址：https://www.cnblogs.com/cc11001100/p/6352136.html