[HTML/CSS]간단한 페이징 css

HTML

 

	첫 페이지
	이전 페이지
	1
	2
	3
	4
	99
	다음 페이지
	마지막 페이지

css

 
.pagination{margin-top:20px;white-space: nowrap; text-align: center; height: 37px; line-height:37px;}
.pagination a{display:inline-block; border:1px solid #f7f7f7; height:35px; width:35px;  vertical-align:middle; text-align:center; text-decoration:none; font-size:15px; color:#898989;background:#f7f7f7;}
.pagination .on{color:#fff; font-weight:bold; background:#333;}
.pagination .prev,.pagination .next{height:35px; width:35px; border:1px solid #ebebeb;overflow:hidden;position:relative; font-size:0;}
.pagination .prev.end,.pagination .next.end{height:35px; width:35px; font-size:0;}
.pagination .prev{background:#ebebeb url("") no-repeat center center; margin-right:11px;}
.pagination .prev.end{background:#ebebeb url("") no-repeat center center; margin-right:4px; border-right:0;}
.pagination .next{background:#ebebeb url("") no-repeat center center; margin-left:12px;}
.pagination .next.end{background:#ebebeb url("") no-repeat center center; margin-left:4px; border-left:0;}

예제

첫 페이지 이전 페이지 1 2 3 4 99 다음 페이지 마지막 페이지