페이징 css

<!-- 페이징 -->
<div class="pagination"><span class="firstPage">첫페이지</span> <span class="preBlock">이전</span> <a href="#" title="1페이지 이동">1</a> <a href="#" title="2페이지 이동">2</a> <a href="#" title="3페이지 이동">3</a> <a href="#" title="4페이지 이동">4</a> <strong>5</strong> <span class="nextBlock">다음</span> <span class="lastPage">마지막페이지</span> </div>
<!-- //페이징 -->

 

 

/* **************************************** *
 * pagination
 * **************************************** */
.pagination { padding: 15px 0; text-align: center; font-size: 0; }
.pagination span, .pagination a, .pagination strong { display: inline-block; margin: 0 10px 0 0; position: relative; line-height: 30px; border-radius: 10px; font-size: 16px; }
.pagination strong { width: 30px; height: 30px; color: #ffffff; border: 1px solid #222222; background-color: #222222; }
.pagination a { width: 30px; height: 30px; border: 1px solid #e4e4e4; background-color: #ffffff; border-radius: 10px; }
.pagination a:hover { color: inherit; }
.pagination .firstPage, .pagination .preBlock, .pagination .nextBlock, .pagination .lastPage { display: inline-block; width: 30px; height: 30px; border: 1px solid #e4e4e4; text-indent: -9999px; }
.pagination .firstPage { background: #fff url(../images/style/page_first.png) no-repeat 50% 50%; }
.pagination .preBlock { background: #fff url(../images/style/page_prev.png) no-repeat 50% 50%; }
.pagination .nextBlock { background: #fff url(../images/style/page_next.png) no-repeat 50% 50%; }
.pagination .lastPage { background: #fff url(../images/style/page_last.png) no-repeat 50% 50%; }

 

 

 

page_first.png

0.00MB

page_last.png

0.00MB

page_next.png

0.00MB

page_prev.png

0.00MB