Question

我为我的网页创建了分页，但现在希望看起来像Apple一样好看。我不是那么多CSS专家。

以下是我的代码：

<div class="my pagination">
    <span class="previous_page">← Previous</span>
    <em class="current">1</em>
    <a rel="next" href="">2</a>
    <a href="">3</a>
    <a href="">4</a>
    <a href="">5</a>
    <a href="">6</a>
    <a href="">7</a>
    <a href="">8</a>
    <a href="">9</a>
    <a href="">10</a>
    <a class="next_page"  href="">Next →</a>
</div>

，如下所示：

←上一页1 2 3 4 5 6 7 8 9 10下一页→

Answer 1

我以前做过。

这是CSS

.apple_pagination {
  background: #f1f1f1;
  border: 1px solid #e5e5e5;
  text-align: center;
  padding: 1em;
  cursor: default; }
  .apple_pagination a, .apple_pagination span {
    padding: 0.2em 0.3em; }
  .apple_pagination .disabled {
    color: #aaaaaa; }
  .apple_pagination .current {
    font-style: normal;
    font-weight: bold;
    background-color: #bebebe;
    display: inline-block;
    width: 1.4em;
    height: 1.4em;
    line-height: 1.5;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
    text-shadow: rgba(255, 255, 255, 0.8) 1px 1px 1px; }
  .apple_pagination a {
    text-decoration: none;
    color: black; }
    .apple_pagination a:hover, .apple_pagination a:focus {
      text-decoration: underline; }

<强> JSFiddel

需要Apple风格分页 - CSS + HTML不是任何jquery

1 个答案: