<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS实现的一个漂亮分页按钮样式</title>
<style type="text/css">
.pagination{
overflow:hidden;
margin:0;
padding:10px 10px 6px 10px;
border-top:1px solid #f60;
_zoom:1;
}
.pagination *{
display:inline;
float:left;
margin:0;
padding:0;
font-size:12px;
}
.pagination i{
float:none;
padding-right:1px;
}
.currentPage b{
float:none;
color:#f00;
}
.pagination li{
list-style:none;
margin:0 5px;
}
.pagination li li{
position:relative;
margin:-2px 0 0;
font-family: Arial, Helvetica, sans-serif
}
.firstPage a,.previousPage a,.nextPage a,.lastPage a{
overflow:hidden;
height:0;
text-indent:-9999em;
border-top:8px solid #fff;
border-bottom:8px solid #fff;
}
.pagination li li a{
margin:0 1px;
padding:0 4px;
border:3px double #fff;
+border-color:#eee;
background:#eee;
color:#06f;
text-decoration:none;
}
.pagination li li a:hover{
background:#f60;
border-color:#fff;
+border-color:#f60;
color:#fff;
}
li.firstPage{
margin-left:40px;
border-left:3px solid #06f;
}
.firstPage a,.previousPage a{
border-right:12px solid #06f;
}
.firstPage a:hover,.previousPage a:hover{
border-right-color: #f60;
}
.nextPage a,.lastPage a{
border-left:12px solid #06f;
}
.nextPage a:hover,.lastPage a:hover{
border-left-color:#f60;
}
li.lastPage{
border-right:3px solid #06f;
}
li li.currentState a{
position:relative;
margin:-1px 3px;
padding:1px 4px;
border:3px double #fff;
+border-color:#f60;
background:#f60;
color:#fff;
}
li.currentState,.currentState a,.currentState a:hover{
border-color:#fff #ccc;
cursor:default;
}
</style>
</head>
<body>
<ul class="pagination" title="分页列表">
<li class="totalAnnal">总记录数：<i>3</i></li>
<li class="totalPage">总页数：<i>3</i></li>
<li class="currentPage">当前页：<b>3</b></li>
<li class="firstPage currentState"><a href="javascript:;" title="首页">首页</a></li>
<li class="previousPage currentState"><a href="javascript:;" title="前一页">前一页</a></li>
<li>
<ol>
<li><a title="转到第1页" href="javascript:;">1</a></li>
<li><a title="转到第2页" href="javascript:;">2</a></li>
<li class="currentState" title="当前页"><a href="javascript:;">3</a></li>
<li><a title="转到第4页" href="javascript:;">4</a></li>
<li><a title="转到第5页" href="javascript:;">5</a></li>
<li><a title="转到第6页" href="javascript:;">6</a></li>
<li><a title="转到第7页" href="javascript:;">7</a></li>
<li><a title="转到第8页" href="javascript:;">8</a></li>
<li><a title="转到第9页" href="javascript:;">9</a></li>
</ol>
</li>
<li class="nextPage"><a href="javascript:;" title="后一页">后一页</a></li>
<li class="lastPage"><a href="javascript:;" title="尾页">尾页</a></i>
</ul>
</body>
</html>
分享到：
相关推荐
文件"dedecms 24种漂亮分页代码_阅微草堂.mht"可能是包含这些样例的详细代码，dedecms是一个流行的CMS（内容管理系统），可能这些分页样式是专门为该系统设计的，方便用户快速集成到自己的网站中。而"24分页种样式...
总的来说，这两款漂亮的bootstrap分页样式是通过利用CSS3的高级特性和Bootstrap的可定制性来实现的。开发者可以通过学习这些示例，了解如何自定义Bootstrap组件，提升其网站的用户体验。无论是网页设计师还是前端...
"最实用的漂亮的分页样式"这一主题着重于提升用户体验，通过美观的设计吸引用户并方便他们高效地浏览网页内容。下面我们将详细探讨分页样式的设计原则、常见类型以及实现方法。 1. **设计原则**： - **易用性**：...
以下是一些关于创建漂亮分页样式的知识点： 1. **基本元素**：分页通常包含“上一页”，“下一页”按钮，以及数字链接来表示不同的页面。用户可以通过点击这些元素在内容之间跳转。 2. **清晰的视觉提示**：分页...
在创建分页时，我们通常会使用`<ul>`和`<li>`标签来创建一个无序列表，每个`<li>`代表一个分页按钮。例如： ```html <li><a href="#page1">1</a></li> <li><a href="#page2">2</a></li> <li><a href="#page3">3...
在网页设计中，分页是一种常见的用户界面元素，用于...总的来说，"6款简洁漂亮的CSS3分页样式代码"是一个实用的资源，可以帮助开发者快速为网站添加专业而吸引人的分页设计，同时也是一个学习和实践CSS3技巧的好机会。
总之，实现“漂亮的分页样式 js特效”需要结合JavaScript和CSS，通过动态生成和操作DOM，以及应用各种CSS样式和动画效果，来创建用户友好且视觉吸引人的分页系统。同时，考虑到用户体验和性能优化，合理设计分页逻辑...
20种css分页样式，还是很漂亮的，很喜欢
3. **熊爪足迹分页样式**：这是模仿百度的一种创新设计，将分页按钮设计成熊爪的形状，每一步代表一个页面，用户点击“熊爪印”即可前进或后退。这种设计增加了趣味性和互动性，同时也是一种品牌特色的体现，让用户...
本资源提供了一款“漂亮实用的jQuery分页样式插件代码”，适用于那些希望为网站添加美观、易用的分页功能的开发者。这款插件采用红色主题，具有无刷新的分页效果，并且集成了搜索功能，增强了用户体验。 首先，...
以下是一些关键的CSS知识点，可以从"25种非常漂亮的分页css样式"中学习和应用： 1. **基本结构**：首先，你需要一个HTML结构来承载分页元素。这通常包括`<ul>`列表，其中包含多个`<li>`列表项，每个列表项代表一个...
每个分页样式的实现可能基于HTML、CSS和JavaScript，其中CSS用于样式控制，JavaScript用于实现动态效果和交互。 在实际应用中，你可以根据网站内容的多少和用户行为数据来选择合适的分页样式。例如，如果内容较多，...
CSS在分页样式中的应用主要体现在以下几个方面： - **颜色和背景**：通过调整颜色和背景色，可以改变分页按钮的视觉效果，使其与网站的整体风格相协调。 - **边框和阴影**：设置边框样式和阴影效果，可以增加按钮的...
本文将详细介绍一个使用CSS实现的美观分页效果，其特色是结合了橘黄色和蓝色的配色方案。 首先，让我们解析一下给出的HTML和CSS代码。在HTML部分，`<div id="pagebar">` 是包含所有分页链接的容器。`<a>` 标签被...
2.page.css 这个是24款分页的样式 在模版中使用, 引入 page.css !-PUBLIC-!/Css/page.css" / > <div class="green-black"><{$page}> 如果: 要变更分页的样式, 打开 page.css ,参照修改相对应的 <div class ="xxx">...
"非常漂亮的jquery分页样式"这个主题聚焦于使用jQuery库来实现美观且功能丰富的分页效果。jQuery是一款强大的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax交互，使得开发动态和交互式的网页变得更加...
- "css.css"：这是一个CSS样式表文件，其中包含了24款Web2.0分页样式的具体定义。开发者可以查看此文件，学习如何通过CSS来创建各种分页效果。 - "image1.gif" 和 "image2.gif"：可能是用于分页设计中的图形元素，如...
本文将深入探讨如何使用CSS（层叠样式表）来创建一个美观且功能完备的有序列表分页样式。 首先，我们从给出的代码片段中可以看到，样式定义主要集中在`.pagination`类上，这是一个包含分页元素的容器。`.pagination...
【漂亮的GridView样式】是关于在Web开发中，特别是ASP.NET环境中美化GridView控件的一个主题。GridView控件通常用于展示数据表格式的信息，如数据库查询结果。在这个主题中，作者通过CSS（层叠样式表）来改变...