div+css 动态分页效果

__SuRa丶Rain

浏览: 45116 次
性别:
来自: 火星

最近访客更多访客>>

haima2013

qq_23565683

zcjava

zc88226770

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

struts2

分页动态 div css 漂亮

业务逻辑就不给了，就给个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
}

查看图片附件

分享到：

网页版flv 播放器 | struts2 结合 UrlRewrite 进行URL重写

2012-10-29 13:01
浏览 1350
评论(0)
分类:Web前端
查看更多

发表评论

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

相关推荐

免费的防止锁屏小软件，可用于域统一管控下的锁屏机制: 免费的防止锁屏小软件，可用于域统一管控下的锁屏机制

Python代码实现带装饰的圣诞树控制台输出: 内容概要：本文介绍了一段简单的Python代码，用于在控制台中输出一棵带有装饰的圣诞树。具体介绍了代码结构与逻辑，包括如何计算并输出树形的各层，如何加入装饰元素以及打印树干。还提供了示例装饰字典，允许用户自定义圣诞树装饰位置。适用人群：所有对Python编程有一定了解的程序员，尤其是想要学习控制台图形输出的开发者。使用场景及目标：适用于想要掌握如何使用Python代码创建控制台艺术，特别是对于想要增加节日氛围的小项目。目标是帮助开发者理解和实现基本的字符串操作与格式化技巧，同时享受创造乐趣。其他说明：本示例不仅有助于初学者理解基本的字符串处理和循环机制，而且还能激发学习者的编程兴趣，通过调整装饰物的位置和树的大小，可以让输出更加个性化和丰富。

白色大气风格的设计师作品模板下载.zip: 白色大气风格的设计师作品模板下载.zip

电商平台开发需求文档.doc: 电商平台开发需求文档.doc

白色简洁风格的办公室室内设计门户网站模板下载.zip: 白色简洁风格的办公室室内设计门户网站模板下载.zip

VB+access干部档案管理系统(源代码+系统)(20246t).7z: 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于计算机科学与技术等相关专业，更为适合；

VB+ACCESS服装专卖店管理系统设计(源代码+系统+开题报告+答辩PPT)(2024ra).7z: 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于计算机科学与技术等相关专业，更为适合；

(179065812)基于Android stduio的手机银行开发与设计-用于课程设计: 课程设计---基于Android stduio的手机银行开发与设计现今，手机已经成为人们生活和工作的必备品，在手机各种系统中Android系统是人们用的比较多的系统。手机银行也是人们在生活中比较常用的功能之一。本项目基于Android的手机银行开发与设计主要功能有登录注册、转账、转账记录查询、修改及查询个人信息、添加好友、向好友转账的功能。本项目主要用Android Studio 开发，数据库SQLite数据库，和夜神模拟器。基于Android stduio的手机银行开发与设计项目主要功能有登录注册、转账、转账记录查询、修改及查询个人信息、添加好友、向好友转账的功能。。内容来源于网络分享，如有侵权请联系我删除。另外如果没有积分的同学需要下载，请私信我。

白色大气风格的婚礼现场倒计时模板下载.zip: 白色大气风格的婚礼现场倒计时模板下载.zip

轮式移动机器人轨迹跟踪的MATHLAB程序，运用运动学和动力学模型的双闭环控制，借鉴自抗扰控制技术结合了非线性ESO，跟踪效果良好，控制和抗扰效果较优，可分享控制结构图这段程序主要是一个小车的动力: 轮式移动机器人轨迹跟踪的MATHLAB程序，运用运动学和动力学模型的双闭环控制，借鉴自抗扰控制技术结合了非线性ESO，跟踪效果良好，控制和抗扰效果较优，可分享控制结构图。这段程序主要是一个小车的动力学仿真程序，用于模拟小车在参考轨迹下的运动。下面我将对程序进行详细的分析解释。首先，程序开始时使用`clear`、`clc`和`close all`命令来清除工作空间、命令窗口和图形窗口中的内容。接下来，程序定义了一系列参数和变量，用于设置仿真的参数和存储仿真过程中的数据。这些参数包括小车的质量、车宽、驱动轮半径等，还有参考轨迹的振幅和频率，仿真步长，仿真时间等。然后，程序定义了一些元胞数组，用于存储不同阶段的数据。这些数组包括参考轨迹位姿、真实运动轨迹位姿、参考轨迹一阶导数、参考轨迹速度、期望速度、真实速度、控制器输出的控制力矩、控制输入、期望速度与真实速度误差、摩擦值、外界扰动值、总扰动、位姿跟踪误差、扰动观测值等。接下来，程序给这些变量赋初始值，包括小车的初始位姿和速度，初始速度，期望初始速度，控制器输出的控制力矩，扰动观测值等。然后，程序进入一个循环，仿真时间从

vb+ACCESS学生档案管理系统(论文+源代码)(2024ql).7z: 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于计算机科学与技术等相关专业，更为适合；

数据分析-31-疫情数据分析（包含代码和数据）: 这是一份来自开源的全球新冠肺炎数据集，每日时间序列汇总，包括确诊、死亡和治愈。所有数据来自每日病例报告。数据持续更新中。由于数据集中没有美国的治愈数据，所以在统计全球的现有确诊人员和治愈率的时候会有很大误差，代码里面先不做这个处理，期待数据集的完善。

白色大气风格的时装设计公司模板下载.zip: 白色大气风格的时装设计公司模板下载.zip

白色大气风格的商务会议活动模板下载.rar: 白色大气风格的商务会议活动模板下载.rar

vb+access工资管理系统(论文+程序+开题报告+外文翻译+答辩PPT)(2024k3).7z: 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于计算机科学与技术等相关专业，更为适合；

基于微信小程序的学生签到系统设计与实现ssm.zip: 本次开发一套基于微信小程序的生签到系统，有管理员，教师，学生三个角色。管理员功能有个人中心，学生管理，教师管理，签到管理，学生签到管理，班课信息管理，加入班课管理，请假信息管理，审批信息管理，销假信息管理，系统管理。教师和学生都可以在微信端注册和登录，教师可以管理签到信息，管理班课信息，审批请假信息，查看学生签到，查看加入班级，查看审批信息和销假信息。学生可以查看教师发布的学生签到信息，可以自己选择加入班课信息，添加请假信息，查看审批信息，进行销假操作。基于微信小程序的生签到系统服务端用Java开发的网站后台，接收并且处理微信小程序端传入的json数据，数据库用到了MySQL数据库作为数据的存储。

技术资源分享-我的运维人生-《新年的奇妙团聚与希望之旅》: **脚本描述**：本脚本围绕着新年这个充满欢乐与希望的时刻展开。故事发生在一个热闹的小镇，主要角色有在外打拼多年的年轻人小李，他的父母，以及一群充满活力的小镇居民。新年将至，小李踏上回家的旅途，满心期待与家人团聚。在小镇上，大家都在积极筹备新年，贴春联、挂灯笼、准备年夜饭。小李与家人重逢后，一起分享着彼此的故事和喜悦。同时，他们也和小镇居民一起举办了热闹的庆祝活动，在欢声笑语中迎接新年的到来。这个新年不仅让小李重新感受到了家的温暖，也让他对未来充满了信心和希望，他决定和小镇一起成长发展。通过这个脚本，展现新年带给人们的幸福、温暖和对未来的憧憬。

Python 自动办公- Python分类汇总278张Excel表中的数据 Python源码: Python 自动办公- Python分类汇总278张Excel表中的数据

白色创意风格的用户信息登记源码下载.zip: 白色创意风格的用户信息登记源码下载.zip

白色大气的音乐专辑博客整站网站模板下载.zip: 白色大气的音乐专辑博客整站网站模板下载.zip

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

div+css 动态分页效果

评论

发表评论

相关推荐

kindeditor的 jsp 不能上传文件的问题解决方案

struts2 结合 UrlRewrite 进行URL重写

最近访客更多访客>>