CSS分页按钮样式代码-www.codesc.net

转载 2015年07月06日 22:20:40

用CSS实现了一种挺漂亮的分页按钮样式,对美化不在行的可参考下,本样式支持鼠标悬停特效,鼠标移在按钮上的时候,按钮上的文字会变大。

<html>
<head>
<title>CSS分页按钮样式-www.codesc.net</title>
<style type="text/css">  
#nav {
list-style: none;
display: inline;
}
#nav li {
display: inline;
margin-right: 5px;
float: left;
height: 20px;
width: 20px;
}
#nav a {
color: #399;
text-decoration: none;
display: block;
font-size: 14px;
font-family: Geneva, Arial, Helvetica, sans-serif;
border: 1px solid #999;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
}
#nav li a:hover {
font-size: 24px;
line-height: 30px;
height: 30px;
width: 30px;
position: absolute;
z-index: 10;
margin: -5px 0 0 -5px;
font-weight: bold;
color: #CC66FF;
border: 1px dotted #666666;
background: #EEE;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">«</a></li>
<li><a href="/">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="/">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="/">7</a></li>
<li><a href="/">8</a></li>
<li><a href="#">»</a></li>
</ul>
</body>
</html>

 

CSS样式 - 分页按钮样式

HTML 首页 上一页 1
  • wuxinwudai
  • wuxinwudai
  • 2017年03月15日 14:55
  • 1570

Page翻页分页css代码,分页div+css代码

css分页代码集合模板如下 翻页上下分页按钮效果一 DIV代码:   < 1234567...199200 > ...
  • cherry_vicent
  • cherry_vicent
  • 2014年12月22日 10:50
  • 3109

36种漂亮的CSS3网页按钮Button样式

36种漂亮的CSS3网页按钮Button样式 body{  background: #f5faff; } .demo_con{ width: 960px; margin:40px au...
  • alex_0629
  • alex_0629
  • 2014年02月27日 22:36
  • 8261

CSS样式实现选择按钮

CSS样式实现选择按钮表单元素中的选择按钮的原生样式并不好看,在实际项目中需要优化。很多优化的方法都用CSS美化按钮的原生样式,或用图片来代替原生样式。本文描述了使用CSS样式实现方形选择按钮和圆形选...
  • u012780336
  • u012780336
  • 2017年06月29日 18:31
  • 652

(经典)分页组件,3种不同样式的分页效果,数字,按钮,标题搜索等功能

java分页算法组件
  • u014078192
  • u014078192
  • 2014年05月05日 15:50
  • 1527

一个很漂亮的按钮样式 纯css

呵呵,凤凰网上发现的.样式表如下:#comment_buttons input{ margin-left:50px;width:68px;height:21px;color:#054ea8;font-...
  • greenerycn
  • greenerycn
  • 2007年06月17日 22:05
  • 4806

java分页工具代码和html、css分页码样式

工具代码如下: public final class PageUtil { private int perRecords = 10; //每页记录数 private int...
  • u010411264
  • u010411264
  • 2016年11月23日 17:53
  • 1360

bootstrap分页样式

bootstrap分页样式在bootstrap.min.css文件中好像没有包含进来bootstrap.css才有的 .pagination { height: 40px; ...
  • u010363836
  • u010363836
  • 2014年02月09日 00:22
  • 3844

WebApp按钮样式css实例

@media only screen and (max-width: 2560px) { html,body,div,p,dl,dt,dd,ul,ol,li,form,fieldset,button,...
  • tuwei123
  • tuwei123
  • 2015年12月14日 14:38
  • 1155

CSS3翻页按钮

CSS3翻页按钮 用CSS3做出的翻页按钮样式 按钮样式图 ​在CSS当中设定按钮的样式,颜色、阴影、大小、圆角、文字颜色、大小、线性渐变等属性: .butt...
  • limu693992297
  • limu693992297
  • 2016年06月06日 16:26
  • 351
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS分页按钮样式代码-www.codesc.net
举报原因:
原因补充:

(最多只允许输入30个字)