在TP5中,如果我們要實現分頁的樣式,一般采用的是CSS樣式表。這樣可以實現更加靈活多樣的分頁效果,提高頁面的美觀度。
/* 分頁樣式 */ .pagination { margin: 0; padding: 0; list-style: none; } .pagination li { display: inline-block; margin-right: 5px; } .pagination li a, .pagination li span { padding: 6px 10px; display: block; border: 1px solid #ccc; color: #333; text-decoration: none; } .pagination li.active span { color: #fff; background: #428bca; border-color: #3071a9; } .pagination li.disabled span, .pagination li.disabled a { color: #ccc; pointer-events: none; background: #f9f9f9; border-color: #ccc; }
上面的代碼就是一個簡單的分頁樣式,其中包括了分頁欄和各個分頁按鈕的樣式。其中,`.pagination` 表示整個分頁欄的樣式,`.pagination li` 表示每一個分頁按鈕的樣式,`.pagination li.active` 表示當前選中的分頁按鈕的樣式,`.pagination li.disabled` 表示禁用的分頁按鈕的樣式。
使用分頁樣式的方法也很簡單,我們只需要在視圖文件中引入CSS文件,在分頁的HTML代碼中加上CSS樣式即可:
<link rel="stylesheet" type="text/css" href="__CSS__/pagination.css"> <div class="pagination"> <ul> <li class="disabled"><span>«</span></li> <li class="active"><span>1</span></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">»</a></li> </ul> </div>
這里我們假設CSS文件存放的路徑為`__CSS__/pagination.css`,分頁HTML代碼存放在`div.pagination`中,按鈕樣式也在CSS文件中定義了。這樣,就可以很方便地實現分頁效果了。
上一篇html5手機直播代碼
下一篇tp5.0css加載位置