위 그림같이 css3를 이용하여 모바일에서 쓸 수 있는 간단한 paging 처리 방법에 대해서 알아보겠습니다. 
확인은 IE계열을 제외한 곳에서는 보이니 모바일에서는 문제가 없습니다.

css 소스는 다음과 같습니다.

<style type="text/css">
.paging {}
.paging a {border:5px solid #ddd;}
.paging a, .paging em {float:left; display:block; margin:0 3px; border-radius:15px;}
.paging a:hover, .paging em {border:5px solid red}
.paging span {display:none}
</style>

html 태그는 다음과 같습니다.
<div class="paging">
<a href="#"><span>1</span></a><em><span>1</span></em><a href="#"><span>3</span></a><a href="#"><span>4</span></a><a href="#"><span>5</span></a>
</div>

일딴 css에서는 중요한것이 border-radius:15px; 부분이 중요합니다. 즉 border를 곡선으로 만들어 주는 것입니다. 
border값을 줬으면 a태그에 border 속성을 만들어 줍니다. 저는 border:5px solid #ddd로 만들어 줬습니다. 
그리고 선택했을 때, 오버했을 때 값은 border:5px solid red로 해서 구분을 줬습니다. 
또하나, 페이지 처리이기때문에 숫자가 들어가는 것이 추후 소스를 보기 편하기 때문에 .paging span {display:none}으로 해서 화면상에서 숫자는 가리는 것도 중요합니다. 텍스트를 안 가리면 텍스트 기본 속성으로 인해 원하는 화면을 구현 할 수 없습니다.

나머지는 소스가 간단하니 이해 하시는데는 충분하리라고 봅니다.  

정보출처 : http://nk.webmini.net/index.php?mid=textyle&document_srl=306658