`
__SuRa丶Rain
  • 浏览: 44249 次
  • 性别: Icon_minigender_1
  • 来自: 火星
社区版块
存档分类
最新评论

div+css 动态分页效果

分页动态divcss漂亮 
阅读更多

业务逻辑就不给了，就给个index.jsp吧

 

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>分页</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<link rel="stylesheet" type="text/css" href="css/styles.css">
  </head>
  <body>
  	
  	<table border="1px" width="200px" align="center">
  		<tr>
  			<td>id</td>
  			<td>name</td>
  		</tr>
  		
  		<s:iterator value="#request.users">
  		<tr>
  			<td>${id}</td>
  			<td>${name}</td>
  		</tr>
  		</s:iterator>
  	</table>
  	
  	
  	<table align="center">
  		<tr>
  			<td>一共有${page}页。 当前是第${offset}页。</td>
  		</tr>
  		<tr>
  			<td>
  				<s:if test="#request.offset>1">
 	 				<a href="ListUsers?page=${offset-2}">上一页</a>
  				</s:if>
  				<s:if test="#request.offset<#request.page">
  					<a href="ListUsers?page=${offset}">下一页</a>
  				</s:if>
  				<a href="ListUsers?page=0">首页</a>
  				<a href="ListUsers?page=${page-1}">末页</a>
  			</td>
  		</tr>
  	</table>

	<br/><br/><br/>

		<div class="green-black">
  			
  			<s:if test="#request.offset>1">
  				<a href="ListUsers?page=0">&lt;&lt;</a>
  			</s:if>
			<s:if test="#request.offset>3">
 	 			<a href="ListUsers?page=${offset-4}">${offset-3}</a>
  			</s:if>
			<s:if test="#request.offset>2">
 	 			<a href="ListUsers?page=${offset-3}">${offset-2}</a>
  			</s:if>
  			<s:if test="#request.offset>1">
 	 			<a href="ListUsers?page=${offset-2}">${offset-1}</a>
  			</s:if>
  			
			<span class="current">${offset}</span>
			
			<s:if test="#request.offset<#request.page">
				<a href="ListUsers?page=${offset}">${offset+1}</a>
  			</s:if>
			<s:if test="#request.offset+1<#request.page">
				<a href="ListUsers?page=${offset+1}">${offset+2}</a>
  			</s:if>
			<s:if test="#request.offset+2<#request.page">
				<a href="ListUsers?page=${offset+2}">${offset+3}</a>
  			</s:if>
			<s:if test="#request.offset+3<#request.page">
				<a href="ListUsers?page=${page-1}">&gt;&gt; </a>
  			</s:if>
			
			<span class="total">共${page}页</span>
		</div>
		
		<br/><br/><br/>
		
		<div class="green-black">
  			
  			<s:if test="#request.offset>1">
  				<a href="ListUsers?page=0">&lt;&lt;</a>
  			</s:if>
			<s:if test="#request.offset>2">
 	 			<a href="ListUsers?page=${offset-3}">${offset-2}</a>
  			</s:if>
  			<s:if test="#request.offset>1">
 	 			<a href="ListUsers?page=${offset-2}">${offset-1}</a>
  			</s:if>
  			
			<span class="current">${offset}</span>
			
			<s:if test="#request.offset<#request.page">
				<a href="ListUsers?page=${offset}">${offset+1}</a>
  			</s:if>
  			
			<s:if test="#request.offset+1<#request.page">
				<a href="ListUsers?page=${offset+1}">${offset+2}</a>
  			</s:if>
  			
			<s:if test="#request.offset+3<#request.page">
				<span>...<span>
				<a href="ListUsers?page=${page-2}">${page-1}</a>
				<a href="ListUsers?page=${page-1}">${page}</a>
			</s:if>
			
			<s:if test="#request.offset<#request.page">
				<a href="ListUsers?page=${page-1}">&gt;&gt; </a>
  			</s:if>
  			
		</div>
		
	</body>
</html>

 

 

css 代码

 

BODY {
	FONT-SIZE: 12px;
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	WIDTH: 60%;
	PADDING-LEFT: 25px;
}

/*CSS green-black style pagination*/
DIV.green-black {
	PADDING-RIGHT: 3px;
	PADDING-LEFT: 3px;
	PADDING-BOTTOM: 3px;
	MARGIN: 3px;
	PADDING-TOP: 3px;
	TEXT-ALIGN: center
}

DIV.green-black A {
	BORDER-RIGHT: #2c2c2c 1px solid;
	PADDING-RIGHT: 5px;
	BORDER-TOP: #2c2c2c 1px solid;
	PADDING-LEFT: 5px;
	BACKGROUND: url(images/pageimage1.gif) #2c2c2c;
	PADDING-BOTTOM: 2px;
	BORDER-LEFT: #2c2c2c 1px solid;
	COLOR: #fff;
	MARGIN-RIGHT: 2px;
	PADDING-TOP: 2px;
	BORDER-BOTTOM: #2c2c2c 1px solid;
	TEXT-DECORATION: none
}

DIV.green-black A:hover {
	BORDER-RIGHT: #aad83e 1px solid;
	BORDER-TOP: #aad83e 1px solid;
	BACKGROUND: url(images/pageimage2.gif) #aad83e;
	BORDER-LEFT: #aad83e 1px solid;
	COLOR: #fff;
	BORDER-BOTTOM: #aad83e 1px solid
}

DIV.green-black A:active {
	BORDER-RIGHT: #aad83e 1px solid;
	BORDER-TOP: #aad83e 1px solid;
	BACKGROUND: url(images/pageimage2.gif) #aad83e;
	BORDER-LEFT: #aad83e 1px solid;
	COLOR: #fff;
	BORDER-BOTTOM: #aad83e 1px solid
}

DIV.green-black SPAN.current {
	BORDER-RIGHT: #aad83e 1px solid;
	PADDING-RIGHT: 5px;
	BORDER-TOP: #aad83e 1px solid;
	PADDING-LEFT: 5px;
	FONT-WEIGHT: bold;
	BACKGROUND: url(images/pageimage2.gif) #aad83e;
	PADDING-BOTTOM: 2px;
	BORDER-LEFT: #aad83e 1px solid;
	COLOR: #fff;
	MARGIN-RIGHT: 2px;
	PADDING-TOP: 2px;
	BORDER-BOTTOM: #aad83e 1px solid
}

DIV.green-black SPAN.total {
	BORDER-RIGHT: #2c2c2c 1px solid;
	PADDING-RIGHT: 5px;
	BORDER-TOP: #2c2c2c 1px solid;
	PADDING-LEFT: 5px;
	BACKGROUND: url(images/pageimage1.gif) #2c2c2c;
	PADDING-BOTTOM: 2px;
	BORDER-LEFT: #2c2c2c 1px solid;
	COLOR: #fff;
	MARGIN-RIGHT: 2px;
	PADDING-TOP: 2px;
	BORDER-BOTTOM: #2c2c2c 1px solid;
	TEXT-DECORATION: none
}

 

 

 

  • 大小: 4.4 KB
分享到：
| struts2 结合 UrlRewrite 进行URL重写
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics