這次帶給大家網站的分頁思路,製作網站時的分頁效果注意事項有哪些,以下就是實戰案例,一起來看一下。
在製作網站時,很多分頁都是採用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中文網其他相關文章!