fhefh2015
5/20/2016 - 6:57 AM

css分页

css分页

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>居中分页DIV CSS DIVCSS5在线案例演示</title>
    <style>
        a {
            text-decoration: none
        }
        
        .ep-pages {
            padding: 10px 12px;
            clear: both;
            text-align: center;
            font-family: Arial, "\5B8B\4F53", sans-serif;
            font-size: 14px;
            vertical-align: top
        }
        
        .ep-pages a,
        .ep-pages span {
            display: inline-block;
            height: 23px;
            line-height: 23px;
            padding: 0 8px;
            margin: 5px 1px 0 0;
            background: #fff;
            border: 1px solid #e5e5e5;
            overflow: hidden;
            vertical-align: top
        }
        
        .ep-pages a:hover {
            background: #cc1b1b;
            border: 1px solid #cc1b1b;
            text-decoration: none
        }
        
        .ep-pages a,
        .ep-pages a:visited {
            color: #252525
        }
        
        .ep-pages a:hover,
        .ep-pages a:active {
            color: #ffffff
        }
        
        .ep-pages .current {
            background: #cc1b1b;
            border: 1px solid #cc1b1b;
            color: #fff
        }
        
        .ep-pages a.current,
        .ep-pages a.current:visited {
            color: #ffffff
        }
        
        .ep-pages a.current:hover,
        .ep-pages a.current:active {
            color: #ffffff
        }
        
        .ep-pages-ctrl {
            font-family: "\5B8B\4F53", sans-serif;
            font-weight: bold;
            font-size: 16px
        }
        
        .ep-pages-e5e5e5 {
            color: #e5e5e5
        }
        
        .ep-pages-all {
            font-size: 12px;
            vertical-align: top
        }
    </style>
</head>

<body>
    <div class="ep-pages">
        <span class="ep-pages-e5e5e5">首页</span> <span class="ep-pages-ctrl ep-pages-e5e5e5">&lt;</span>
        <a href="#" target="_self" class="current">1</a> <a href="#" target="_self">2</a> <a href="#" target="_self">3</a>
        <span>...</span> <a href="#" target="_self" class="ep-pages-ctrl">&gt;</a> <a href="#" target="_self">尾页</a>
        <a href="#" target="_self" class="ep-pages-all">在本页阅读全文</a>
    </div>

</body>

</html>