`
sanshizi
  • 浏览: 85724 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

分页, 不定宽度, 自动居中代码, 扒自淘宝

 
阅读更多
<html>
<head>
<title>表单验证</title>
<style type="text/css">

.pagination {
    font-family: Tahoma;
    height: 25px;
    left: 50%;
    padding: 30px 0 20px;
    position: relative;
}
.page-bottom {
    left: -50%;
    position: relative;
}
.pagination .page-cur, .pagination .page-crt {
    background-color: #FFEEE5;
    border: 1px solid #FF5500;
    color: #FF5500;
    font-weight: 700;
}
.pagination a, .pagination .page-start, .pagination .page-end {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
}
.pagination a:hover{
    background-color: #FFFFFF;
    border: 1px solid #ff5500;
}
.pagination a, .page-info, .page-start, .page-end, .page-break, .page-skip, .page-cur, .page-crt {
    float: left;
    font-family: Arial,SimSun;
    font-size: 13px;
    height: 23px;
    line-height: 23px;
    margin-right: 5px;
    min-width: 15px;
    overflow: hidden;
    padding: 0 5px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
</style>
</head>
<body>


<div class="pagination">
	<div class="page-bottom">
		<span class="page-cur">1</span>
		<a href="/search?q=%D2%BB3&amp;initiative_id=shopz_20120603&amp;ssid=s5-e&amp;s=40#J_FilterTabBar">2</a>
		<a href="/search?q=%D2%BB3&amp;initiative_id=shopz_20120603&amp;ssid=s5-e&amp;s=80#J_FilterTabBar">3</a>
		<a href="/search?q=%D2%BB3&amp;initiative_id=shopz_20120603&amp;ssid=s5-e&amp;s=120#J_FilterTabBar">4</a>
		<a href="/search?q=%D2%BB3&amp;initiative_id=shopz_20120603&amp;ssid=s5-e&amp;s=160#J_FilterTabBar">5</a>
		<a href="/search?q=%D2%BB3&amp;initiative_id=shopz_20120603&amp;ssid=s5-e&amp;s=200#J_FilterTabBar">6</a>
		<span class="page-break">...</span>
		<a href="/search?q=%D2%BB3&amp;initiative_id=shopz_20120603&amp;ssid=s5-e&amp;s=40#J_FilterTabBar" class="page-next"><span>下一页</span></a>    
		<span class="page-skip">
			<form id="filterPageForm" name="filterPageForm" method="get" action="/search?q=%D2%BB3&amp;initiative_id=shopz_20120603&amp;tab=all" onsubmit="return gotoPage()">
				<input type="hidden" name="q" id="q" value="一3">
				<input type="hidden" name="ssid" id="ssid" value="s5-e">
				共100页 到第<input type="text" title="指定页码" name="jumpto" id="jumpto" size="3" value="2">页
				<button title="指定页码" type="submit">确定</button>
			</form>
		</span>	
	</div>
</div>


</body>
</html>
分享到:
评论

相关推荐

    自适应宽度且居中的分页

    标题“自适应宽度且居中的分页”涉及的是网页设计中的一个重要概念,即如何在不同设备和屏幕尺寸下实现分页导航条的自适应布局,同时保持其在页面中的居中对齐。在这个问题中,我们通常会用到前端开发中的响应式设计...

    分页代码 分页代码 分页代码

    分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码分页代码...

    jQ导出PDF自动分页打印代码.zip

    "jQ导出PDF自动分页打印代码.zip" 提供的是一套基于jQuery和CSS特效的解决方案,旨在帮助开发者高效地完成这项任务。下面我们将详细探讨这个代码包中的关键知识点。 首先,jQuery是一个广泛使用的JavaScript库,它...

    js自动分页代码

    js自动分页代码,可以实现断档打印,非常方便,修改后就可以用于自己的项目了

    PHP内容分页.新闻内容分页代码,分页代码

    PHP内容分页,新闻内容分页代码,分页代码

    文章内容过长自动分页代码

    总的来说,"文章内容过长自动分页代码"涉及到的是服务器端脚本处理长篇文章的分页逻辑,通过数据库操作、页面渲染和用户交互等多个环节实现。ASP文件"ContentAutoPage.asp"很可能是这一功能的具体实现,包含这些关键...

    mybatis 代码生成器 扩展版本,可以自动生成分页查询

    总结起来,MyBatis 代码生成器的扩展版本提供了自动分页查询的功能,它通过自动生成Java代码和SQL语句,帮助开发者快速实现数据库的分页操作,降低了开发复杂度,提高了代码的可维护性。这使得开发团队能够更专注于...

    MyBatis自动分页实现

    MyBatis自动分页实现 MyBatis 是一个流行的持久层框架,它提供...MyBatis 自动分页实现是一个非常有用的功能,它可以简洁地实现分页功能,提高开发效率和代码可读性。但是,需要注意到其缺点,以便更好地使用该功能。

    分页代码 重分页代码

    在这个场景中,"分页代码 重分页代码" 指的是在SSH框架下实现分页功能的代码,并且强调了代码的复用性,即在一个工程中只需要一个公共的分页类。 分页的目的是为了提高用户体验,避免一次性加载大量数据导致页面...

    JS代码实现的自动分页效果

    以上代码首先计算总页数,然后生成一个分页按钮列表,每个按钮点击时会调用`showPage`方法,显示对应页的内容。`showPage`方法通过计算起始和结束索引来截取内容字符串,然后将这部分内容插入到`divContent`中。 ...

    MVC分页 使用 教程与源代码

    而`Mike108Demo05`可能是一个包含MVC项目的源代码文件,其中包含了实现分页的具体示例。通过研究这些源代码,你可以更深入地理解MVC分页的实现细节。 总的来说,MVC分页是提升大型数据集展示效果的重要手段,通过...

    纯JS长文章分页代码

    该部分代码实现了自动分页的功能,通过循环和条件判断找到合适的分隔点,并根据分隔点计算每页的起始位置。 #### 总结 本代码提供了一个较为完整的纯JavaScript文章分页解决方案,涵盖了基本的参数配置、内容获取...

    VUE打印demo,自动分页

    在这个“VUE打印demo,自动分页”项目中,我们将会探讨如何在Vue应用中实现打印功能并配合自动分页,这在开发报表或文档展示等场景中非常常见。 首先,让我们了解Vue.js中的组件化开发。Vue应用由多个可复用的组件...

    JSON自动分页代码.zip

    总结起来,JSON自动分页代码结合layui和nicePage.js,提供了一种高效、便捷的方式来处理和展示JSON数据,尤其适合处理大量数据的Web应用。通过简单的配置和调用,开发者可以快速实现动态、高效的分页效果,极大地...

    js分页代码,分页代码

    - 虽然示例代码中没有完整展示分页逻辑,但从变量命名和注释中可以看出,主要涉及到的内容包括:确定每页显示多少内容、如何根据当前页数显示内容、如何生成分页导航等。 ### 五、扩展知识点 除了基本的分页功能...

    WPF自动分页控件

    本项目标题为“WPF自动分页控件”,是利用Visual Studio 2010和.NET Framework 4.0进行开发的,主要目的是提供一个简便的方式来对数据进行分页显示,减轻UI线程负担,同时允许用户以直观的方式浏览和操作大量数据。...

    MorePages自动分页代码 v2.0 Beta

    "MorePages自动分页代码 v2.0 Beta"是一个用于网页内容分页显示的脚本程序,它能够帮助开发者在网站上实现动态内容的高效管理,尤其适用于文章列表、论坛帖子等大量数据需要分页展示的情况。这个版本是Beta测试版,...

    分页js 实现自动加载分页标签

    用js 自动计算分页格式 自动计算显示个数 避免大量页影响样式

    报表工具FineReport参数控件和报表内容自动居中设置方法

    在实际操作中,用户应当充分利用这些工具和选项,比如参数控件的居中设置、报表内容的居中与自适应宽度调整以及图表的居中设置等,来提升报表的专业性和观赏性,进一步提高工作效率和报表的可读性。对于FineReport的...

    listview自动分页代码

    本篇文章将详细探讨如何在C#中实现ListView控件的自动分页功能。 ListView控件在Windows Forms或WPF应用中广泛使用,它可以显示一列或几列的文本或图像,用户可以通过滚动条浏览内容。然而,当数据量过大时,一次性...

Global site tag (gtag.js) - Google Analytics