CSS样式表实现效果很好的分页效果源代码

然然HYF

然然HYF

2016-02-19 19:42

想不想get新技能酷炫一下,今天图老师小编就跟大家分享个简单的CSS样式表实现效果很好的分页效果源代码教程,一起来看看吧!超容易上手~

  CSS样式表实现效果很好的分页效果,在学习编程过程中由于文章内容比较多或者列表内容比较多,我们都需要分页!那么你想不想要一种好的分页效果呢?这个是我认为比较容易使用,同时编程方面也挺容易实现的分页,就是以10页为基础,然后上十页和下十页,因为很少有人有兴趣会去看10页甚至20页以后的内容。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

!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=utf-8" /
titleCSS Pagination Style Template webjx.com/title
style type="text/css"
!--
 
#tnt_pagination {
  display:block;
  text-align:left;
  height:22px;
  clear:both;
  padding-top:3px;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  font-weight:normal;
}
 
#tnt_pagination a:link, #tnt_pagination a:visited{
  padding:7px;
  padding-top:2px;
  padding-bottom:2px;
  border:1px solid #EBEBEB;
  margin-left:5px;
  text-decoration:none;
  background-color:#F5F5F5;
  color:#0072bc;
  width:22px;
  font-weight:normal;
}
 
#tnt_pagination a:hover {
  background-color:#DDEEFF;
  border:1px solid #BBDDFF;
  color:#0072BC;  
}
 
#tnt_pagination .active_tnt_link {
  padding:7px;
  padding-top:2px;
  padding-bottom:2px;
  border:1px solid #BBDDFF;
  margin-left:5px;
  text-decoration:none;
  background-color:#DDEEFF;
  color:#0072BC;
  cursor:default;
}
 
#tnt_pagination .disabled_tnt_pagination {
  padding:7px;
  padding-top:2px;
  padding-bottom:2px;
  border:1px solid #EBEBEB;
  margin-left:10px;
  text-decoration:none;
  background-color:#F5F5F5;
  color:#D7D7D7;
  cursor:default;
}
--
/style
 
/head
 
body
 
div id="tnt_pagination"
span class="disabled_tnt_pagination"前10页/spana href="#1"1/aa href="#2"2/aa href="#3"3/aspan class="active_tnt_link"4/spana href="#5"5/aa href="#6"6/aa href="#7"7/aa href="#8"8/aa href="#9"9/aa href="#10"10/aa href="#forwaed"后10页/a/div
 
/body
/html

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

CSS样式表实现效果很好的分页效果源代码

Web开发
CSS样式表实现效果很好的分页效果源代码

用css样式表实现首字大写

Web开发
用css样式表实现首字大写

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

关于CSS样式表

Web开发
关于CSS样式表

让样式表CSS代码更加专业规范

Web开发
让样式表CSS代码更加专业规范

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

用CSS层叠样式表完成可以控制的闪烁效果

Web开发
用CSS层叠样式表完成可以控制的闪烁效果

CSS样式表最佳习惯

Web开发
CSS样式表最佳习惯

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

CSS 浏览器的等宽空格

CSS 浏览器的等宽空格

ASP、PHP与javascript根据时段切换CSS皮肤的代码

ASP、PHP与javascript根据时段切换CSS皮肤的代码
下拉加载更多内容 ↓