300x250
이전 다음 타입
<s_paging>
<div class="area_paging area_paging_list">
<span class="inner_paging">
<a class="ico_skin link_prev ">이전</a>
<s_paging_rep>
<a class="link_page"></a>
</s_paging_rep>
<a class="ico_skin link_next ">다음</a>
</span>
</div>
<div class="area_paging area_paging_simple">
<div class="inner_paging">
<a class="link_prev ">
<span class="ico_skin ico_prev"></span>이전
</a>
<a class="link_next ">
다음<span class="ico_skin ico_next"></span>
</a>
</div>
</div>
</s_paging>
숫자 타입
<s_paging>
<div class="page">
<ul class="pagination">
<li>
<a class="" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<s_paging_rep>
<li>
<a ></a>
</li>
</s_paging_rep>
<li>
<a class="" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</div>
</s_paging>
CSS
.paging {padding:10px 38px;line-height:250%;text-align:center}
.paging ul{border:30px;margin:30px;padding:30px;}
.paging a span{border:0;margin:0;padding:10px;font-size:11px;list-style:none}
.paging a span{color: white; border:solid 1px #ddd;margin-right:2px}
.paging .no-more-prev,#paging .more-next{color:GOLD;font-weight:bold;padding:3px 4px}
.paging #prevPage, #paging #nextPage{color:white; font-weight:bold;border:solid 1px #fff}
.paging a span.selected{color:#ff0084;font-weight:bold;padding:4px 6px;border:0 !important}
.paging a:link span,#paging a:visited span{color:grey;padding:3px 6px;text-decoration:none}
.paging a:hover span{color:yellow;border:solid 1px #666666}
300x250
반응형