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

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

<!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" />
<title>CSS 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页</span><a href="#1">1</a><a href="#2">2</a><a href="#3">3</a><span class="active_tnt_link">4</span><a href="#5">5</a><a href="#6">6</a><a href="#7">7</a><a href="#8">8</a><a href="#9">9</a><a href="#10">10</a><a href="#forwaed">后10页</a></div>
 
</body>
</html>

时间: 2024-08-02 18:06:07

CSS样式表实现分页效果源代码的相关文章

CSS样式表实现文字变图象特效

css|特效|样式表 一段文字,当鼠标在文字上面单击,文字消失,原来文字的地方却立即变成了一张图片,当鼠标在图片上单击,图片又消失,原来的文字又重现了,像变魔术一样,是不是有意思?!这种效果用Dreamweaver的Behavirs 功能也可实现,但那要增加一段Javascript程序,明显增加了不少代码.而用CSS来制作这种效果,增加的代码却要少得多. 原理:利用CSS的属性值可动态改变的特点. 思路:定义一个HTML元素CSS属性的两种属性值,再用一个事件来触发,一旦事件发生,则改变HTML

网页特效之用css样式表实现首字大写

css|大写|特效|网页|网页特效|样式表 css当中有许多平时很少用的属性,但是这些属性有时候被发掘出来以后就会立刻引起一些人的追逐,首字大写就是这样一种效果.最近越来越多的blogger开始在自己的blog中运用这一方法,东西很简单,下面就来给大家介绍一下用:first-letter伪类来实现这种效果的方法: :first-letter版本:CSS2 兼容性:IE5.5+ 语法: Selector : first-letter { sRules } 说明: 设置对象内的第一个字符的样式. 此

用CSS样式表实现文字变图象特效

一段文字,当鼠标在文字上面单击,文字消失,原来文字的地方却立即变成了一张图片,当鼠标在图片上单击,图片又消失,原来的文字又重现了,像变魔术一样,是不是有意思?!这种效果用Dreamweaver的Behavirs 功能也可实现,但那要增加一段Javascript程序,明显增加了不少代码.而用CSS来制作这种效果,增加的代码却要少得多. 原理:利用CSS的属性值可动态改变的特点. 思路:定义一个HTML元素CSS属性的两种属性值,再用一个事件来触发,一旦事件发生,则改变HTML元素的属性值,从而达到

用css样式表实现首字大写

 css当中有许多平时很少用的属性,但是这些属性有时候被发掘出来以后就会立刻引起一些人的追逐,首字大写就是这样一种效果.最近越来越多的blogger开始在自己的blog中运用这一方法,东西很简单,下面就来给大家介绍一下用:first-letter伪类来实现这种效果的方法: :first-letter版本:CSS2 兼容性:IE5.5+ 语法: Selector : first-letter { sRules } 说明: 设置对象内的第一个字符的样式. 此伪对象仅作用于块对象.内联要素要使用该属性

CSS特效图片背景分页效果

提示:您可以先修改部分代码再运行 CSS特效图片背景分页效果 CSS特效图片背景分页效果 提示:您可以先修改部分代码再运行

JS+CSS实现的拖动分页效果实例

  本文实例讲述了JS+CSS实现拖动分页效果的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70

JS+CSS实现的拖动分页效果实例_javascript技巧

本文实例讲述了JS+CSS实现拖动分页效果的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>拖动分页</title> <meta http-equiv=Content-Type content="text/html; charset=utf-8"> <style> body{ border:0px; margin:0px; overflow:hidden; backgrou

css 分页效果制作

css 分页这是本人在给客户开发网站时要用到了,所以我把它拿出来新手们学学,我们这里只是css分页效果而不是用服务器脚本那种分页了,这种只是做出一种漂亮的效果来哦,下面我们先看看效果图片吧. 就是这种效果,像dz论坛一样的分页效果吧,那我是如何实现的呢,我们就来看看源代码与样式吧.  <div class="jogger">             <span class="disabled"> < </span>     

CSS实现分页效果制作实例

CSS实现分页效果制作实例,教程和代码如下:  这个教程要说明的是如何为搜索结果或更长记录列表设计分页.因为经常有人问我这个问题,所以我决定发一个帖子来说明如何用少量的 HTML 和 CSS 代码设计出完美的分页样式. 这个教程也包含有实现Flickr.Digg式的简洁分页样式的HTML/CSS代码,随时可以应用于你的WEB项目中. Update as March 17, 2008: My friends Simone Saveri solved some issuse with IE6 and