網站的分頁思路-js教程-PHP中文網

網站的分頁思路

php中世界最好的语言

發布： 2018-03-12 16:41:10

原創

1116 人瀏覽過

這次帶給大家網站的分頁思路，製作網站時的分頁效果注意事項有哪些，以下就是實戰案例，一起來看一下。

在製作網站時，很多分頁都是採用li的顯示為內嵌，但這樣不利於定義背景，所以最好的方法是讓li顯示為塊加浮動去解決，但這裡有個問題，因為分頁是不固定的，而又要讓其始終居中，ul的寬度就無法去固定，所以按平時常用的margin或是text-align就不起作用了，想讓分頁始終居中，就要按以下的方法去定義。
1.文字居中定義
文字居中始終是要的，所以先給ul外層div一個text-align（文字對齊：居中），也可以給一個「溢位：隱藏（overflow: hidden; ）”，當然也可以定義一下高和寬。
2.ul定義
ul不能定義寬度，我們只能給一個定位，類型為相對（position: relative），置入左為50%（left: 50%），當然也可以給一個浮動。請注意，ul千萬不能用溢位：隱藏（overflow: hidden;），這樣，部分li就無法顯示。
3.li定義
li的定義跟ul差不多，寬度不固定，同樣給一個定位，類型為相對（position: relative），置入右為50%（right: 50%），恰恰和ul相反，這樣定義後li就可以無論分頁多少始終居中了。

<!doctype html><html><head><meta charset="utf-8"><title>by eric zheng</title><style type="text/css">
    *{margin:0; padding: 0;}    ol{list-style: none;}    ol{        height: 32px;        border: solid 1px red;        position: absolute;        left: 50%;
    }    li{        position: relative;        left: -50%;        width: 30px;        height: 30px;        border: solid 1px #ccc;        text-align: center;        line-height: 30px;        font-size: 14px;        margin: 0 5px;        float: left;
    }</style></head><body>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ol></body></html>

登入後複製

我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！