티스토리 페이징 html / css 소스

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">&laquo;</span>
											</a>
										</li>
										<s_paging_rep>
											<li>
												<a ></a>
											</li>
										</s_paging_rep>
										<li>
											<a  class="" aria-label="Next">
												<span aria-hidden="true">&raquo;</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
반응형