게시판 페이징 css,코딩
페이지 정보
작성자 홈피사랑 작성일14-07-16 11:18 조회7,833회 댓글0건관련링크
본문
게시판 페이징 예제코드
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>홈페이지제작업체 - 홈피사랑 HOMPYLOVE</title>
<link rel="stylesheet" href="css/reset.css" media="all"/>
<style type="text/css">
/* paging */
.paging {position:relative; width:100%; text-align:center; margin-top:10px; }
.paging a{display:inline-block; background:url('./img/btn_bg.gif') no-repeat; color:#353e44; font-size:12px; font-weight:bold; width:26px; height:25px; line-height:27px; vertical-align:middle; margin-right:2px; border:1px solid #c8c8c8;}
.paging a.active{background:url(''); border:1px solid #018fc2; color:#FFFFFF; background-color:#0da2d7;}
.paging .page_btn{font-size:0px; border:1px solid #c8c8c8;}
.paging .btn_first{background:url('./img/btn_first.gif') no-repeat;}
.paging .btn_prev{background:url('./img/btn_prev.gif') no-repeat; margin-right:14px;}
.paging .btn_next{background:url('./img/btn_next.gif') no-repeat; margin-left:14px;}
.paging .btn_end{background:url('./img/btn_end.gif') no-repeat;}
</style>
</head>
<body>
<p class="paging">
<a href="#" class="page_btn btn_first">첫페이지</a>
<a href="#" class="page_btn btn_prev">이전페이지</a>
<a href="#" class="num active">1</a>
<a href="#" class="num">2</a>
<a href="#" class="num">3</a>
<a href="#" class="num">4</a>
<a href="#" class="num">5</a>
<a href="#" class="num">6</a>
<a href="#" class="num">7</a>
<a href="#" class="num">8</a>
<a href="#" class="num">9</a>
<a href="#" class="num">10</a>
<a href="#" class="page_btn btn_next">다음페이지</a>
<a href="#" class="page_btn btn_end">마지막페이지</a>
</p>
</body>
</html>
예제링크
댓글목록
등록된 댓글이 없습니다.
