视图层分页显示

在制作分页显示的时候，给出一种样式：

《《 1 2 3 4 》》

<div class=pages>
					<em><a title="总页数" href="javascript:void(0)">Total:${articleListPage.totalSize }</a></em>
					<c:set var="pageBegin" value="${(articleListPage.currentPage-1)-(articleListPage.currentPage-1)%10+1}" scope="page"></c:set>
					<c:set var="pageEnd" value="${(articleListPage.currentPage-1)-(articleListPage.currentPage-1)%10+10}" scope="page" ></c:set>
					<c:if test="${ pageEnd > articleListPage.totalPage}" >
						<c:set var="pageEnd" value="${articleListPage.totalPage}" scope="page" ></c:set>
					</c:if>
					<c:if test="${articleListPage.currentPage > 1}" >
						<span><a title="首页(1)" href="article.do?to=toArticles&page=1&userid=${articleListPage.userid }">«</a></span>
					</c:if>
					<c:if test="${pageBegin > 1}">
						<span><a title="上页(${pageBegin-1})" href="article.do?to=toArticles&page=${articleListPage.previousPage }&userid=${articleListPage.userid }">&lt;</a></span>
					</c:if>
					<c:forEach var="i" begin="${pageBegin}" end="${pageEnd}">
						<c:choose>
							<c:when test="${i==articleListPage.currentPage}">
								<strong><span>${i }</span></strong>
							</c:when>
							<c:otherwise>
								<span><a title="${i }" href="article.do?to=toArticles&page=${i }&userid=${articleListPage.userid }" >${i }</a></span>
							</c:otherwise>
						</c:choose>
					</c:forEach>
					<c:if test="${pageEnd < articleListPage.totalPage}">
						<span><a title="下页(${pageEnd+1})" href="article.do?to=toArticles&page=${articleListPage.nextPage }&userid=${articleListPage.userid }">&gt;</a></span>
					</c:if>
					<c:if test="${articleListPage.currentPage < articleListPage.totalPage}" >
						<span><a title="尾页(${articleListPage.totalPage })" href="article.do?to=toArticles&page=${articleListPage.totalPage }&userid=${articleListPage.userid }">»</a></span>
					</c:if>
				</div>

 

相应的css代码：

/* pages */
.pages {clear:both;MARGIN-TOP: 2px; FONT-SIZE: 12px; COLOR: #b7cde4; LINE-HEIGHT: 1.8}
.pages span {BORDER-RIGHT: #b7cde4 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #b7cde4 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: #b7cde4 1px solid; MARGIN-RIGHT: 4px; PADDING-TOP: 1px; BORDER-BOTTOM: #b7cde4 1px solid}
.pages em {BORDER-RIGHT: #b7cde4 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #b7cde4 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: #b7cde4 1px solid; MARGIN-RIGHT: 4px; PADDING-TOP: 1px; BORDER-BOTTOM: #b7cde4 1px solid}
.pages strong span {PADDING-RIGHT: 5px; PADDING-LEFT: 5px; BACKGROUND: #b7cde4; PADDING-BOTTOM: 0px; COLOR: #fff; PADDING-TOP: 0px; TEXT-DECORATION: none}
.pages a:link {PADDING-RIGHT: 5px; PADDING-LEFT: 5px; BACKGROUND: #b7cde4; PADDING-BOTTOM: 0px; COLOR: #fff; PADDING-TOP: 0px; TEXT-DECORATION: none}
.pages a:visited {PADDING-RIGHT: 5px; PADDING-LEFT: 5px; BACKGROUND: #b7cde4; PADDING-BOTTOM: 0px; COLOR: #fff; PADDING-TOP: 0px; TEXT-DECORATION: none}
.pages a:active {PADDING-RIGHT: 5px; PADDING-LEFT: 5px; BACKGROUND: #b7cde4; PADDING-BOTTOM: 0px; COLOR: #fff; PADDING-TOP: 0px; TEXT-DECORATION: none}
.pages a:hover {BACKGROUND: #ddf4ff; COLOR: #7ff3ff}
.pages strong {BORDER-RIGHT: #e0691a 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #e0691a 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: #e0691a 1px solid; MARGIN-RIGHT: 4px; PADDING-TOP: 1px; BORDER-BOTTOM: #e0691a 1px solid}
.pages strong span {BACKGROUND: #e0691a; MARGIN: 0px; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none}