這次帶給大家網站的分頁思路，製作網站時的分頁效果注意事項有哪些，以下就是實戰案例，一起來看一下。
在製作網站時，很多分頁都是採用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中文網其它相關文章！
相關閱讀：
以上是網站的分頁思路的詳細內容。更多資訊請關注PHP中文網其他相關文章！
