2017.11.16

来源：互联网发布：windows 打开dos 编辑：程序博客网时间：2024/06/05 04:44

分页页码制作

1.&lt <

&gt >

2.行内元素中间有空隙解决方法

3.代码整理

4.省略号

.ellipsis{
font-size:14px;
border:none;
margin-left:8px;

}

<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">        <style>        .page-normal{            color:#ff6500;            text-align:center;            font-size:0;        }        .page-normal a,.page-normal .page-current,.page-normal .page-prev{            padding:5px 7px;            font-size:18px;            margin-left:10px;        }        .page-normal a{            border:1px solid #ff9600;            color:#ff6500;            text-decoration:none;        }        .page-normal a:hover{            border:1px solid #ff6500;            background:#ffbe94;        }        .page-normal .page-current{            border:1px solid #ff6500;            color:#ff6500;            background:#ffbe94;        }        .page-normal .page-prev{            border:1px solid #ffe3c6;            color:#ffe3c6;        }        .page-normal i{            display:inline-block;            width:5px;            height:9px;            background:url(1.gif) no-repeat;        }        .page-prev i{            background-position:-67px -608px;            margin-right:5px        }        .page-next i{            background-position:-74px -608px;            margin-left:5px;        }        .ellipsis{            font-size:14px;            border:none;            margin-left:8px;        }        </style>    </head>    <body>    <div class="page-normal">        <span class="page-prev"><i></i>上一页</span>        <span class="page-current">1</span>        <a href="#">2</a>        <a href="#">3</a>        <a href="#">4</a>        <a href="#">5</a>        <a href="#">6</a>        <a href="#">7</a>        <span class="ellipsis">...</span>        <a href="#">199</a>        <a href="#">200</a>        <span class="page-next"><a href="#">下一页<i></i></a></span>    </div>    </body></html>

阅读全文

0 0