欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

tp5 css 分頁樣式

錢衛國2年前8瀏覽0評論

在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文件中定義了。這樣,就可以很方便地實現分頁效果了。