Paginacion con css , 10 ejemplos de menus

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.styleSelector').click(function(){
            $('.styledTarget').attr('id',$(this).attr('title'));
        });
    });
</script>


<style type="text/css" media="screen">

a {
   text-decoration:none;
}
#ejemplo1, #ejemplo2, #ejemplo3, #ejemplo4, #ejemplo5, #ejemplo6, #ejemplo7, #ejemplo8, #ejemplo9, #ejemplo10 {
   margin:0 0 20px 0;
}

.btm {
   background-color:#333;
   overflow:hidden;
   padding:5px 30px;
}
.btm img{float:right;}
.btm a{font-weight:bold; color:#e0ffc0;}
.btm a:hover{color:#FF6;}


#ejemplo1, #ejemplo2, #ejemplo3, #ejemplo4, #ejemplo5, #ejemplo6, #ejemplo7, #ejemplo8, #ejemplo9, #ejemplo10 {
   margin:0 0 50px 0;
}

/*EJEMPLO1*/
#ejemplo1 .wp-pagenavi {
   background-color:#333;
   overflow:hidden;
   color:#FFF;
   text-align:center;
   padding:0 0 5px 0;
}
#ejemplo1 .wp-pagenavi span.pages {
   display:none;
}
#ejemplo1 .wp-pagenavi a, #ejemplo1 .wp-pagenavi span {
   padding:3px 10px;
   margin:3px 3px 0 3px;
   display:inline-block;
   line-height:14px;
}
#ejemplo1 .wp-pagenavi a {
   border-width:1px;
   border-style:solid;
}
#ejemplo1 .wp-pagenavi a:link, #ejemplo1 .wp-pagenavi a:visited {
   color:#CCC;
   border-color:#222;
}
#ejemplo1 .wp-pagenavi a:hover {
   color:#fff;
   border-color:#666;
   background-color:#444;
}
#ejemplo1 .wp-pagenavi span.current {
   font-weight:bold;
   background-color:#FFF;
   color:#333;
   padding-top:7px;
   line-height:16px;
   margin-top:0;
   -webkit-border-bottom-right-radius: 3px;
   -webkit-border-bottom-left-radius: 3px;
   -moz-border-radius-bottomright: 3px;
   -moz-border-radius-bottomleft: 3px;
}
/*EJEMPLO2*/
#ejemplo2 div.wp-pagenavi {
   text-align:right;
   padding:5px 10px;
   overflow:hidden;
}
#ejemplo2 div.wp-pagenavi a, #ejemplo2 div.wp-pagenavi span.pages, #ejemplo2 div.wp-pagenavi span.current {
   -webkit-border-radius: 3px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   -moz-border-radius: 3px;
   display:inline-block;
}
#ejemplo2 div.wp-pagenavi a, #ejemplo2 div.wp-pagenavi a:link, #ejemplo2 div.wp-pagenavi a:visited, #ejemplo2 div.wp-pagenavi a:active {
   padding:4px 8px;
   margin:0 2px;
}
#ejemplo2 div.wp-pagenavi a:hover {
   background-color:#7BA4E7;
   color:#FFF;
}
#ejemplo2 div.wp-pagenavi span.pages {
   line-height:normal;
   padding:4px 8px;
   font-weight:bold;
   float:left;
   color:#314572;
   background:#EEE;
   border:1px solid #CCC;
   margin:2px 0 0 0;
}
#ejemplo2 div.wp-pagenavi .page {
   padding:4px 8px;
}
#ejemplo2 div.wp-pagenavi span.current {
   padding: 4px 8px;
   margin: 2px;
   font-weight: bold;
   background-color:#5c7ca2;
   color:#FFF;
}
#ejemplo2 div.wp-pagenavi span.extend {
   padding: 2px 4px;
   margin: 2px;
   background:none;
}
/*EJEMPLO3*/
#ejemplo3 div.wp-pagenavi {
   text-align:center;
   padding:10px 0;
   overflow:hidden;
   font-size:15px;
   border-top:1px dashed #CCC;
}
#ejemplo3 div.wp-pagenavi a, #ejemplo3 div.wp-pagenavi span.pages, #ejemplo3 div.wp-pagenavi span.current {
   padding:4px 8px;
   display:inline-block;
   border-width:1px;
   border-style:dashed;
}
#ejemplo3 div.wp-pagenavi a, #ejemplo3 div.wp-pagenavi a:link, #ejemplo3 div.wp-pagenavi a:visited, #ejemplo3 div.wp-pagenavi a:active {
   border-color:#CCC;
   color:#999;
}
#ejemplo3 div.wp-pagenavi a:hover {
   border-color:#000;
   background-color:#eee;
   color:#000;
}
#ejemplo3 div.wp-pagenavi span.pages, #ejemplo3 div.wp-pagenavi span.extend {
   display:none;
}
#ejemplo3 div.wp-pagenavi .page {
   padding:4px 8px;
}
#ejemplo3 div.wp-pagenavi span.current {
   font-weight: bold;
   background-color:#CCC;
   border-color:#333;
   color:#000;
}
/*EJEMPLO4*/
#ejemplo4 div.wp-pagenavi {
   text-align:center;
   font-size:13px;
   padding:10px 0;
   overflow:hidden;
   background-color:#FFF;
}
#ejemplo4 div.wp-pagenavi a, #ejemplo4 div.wp-pagenavi span.pages, #ejemplo4 div.wp-pagenavi span.current {
   padding:2px 6px;
   display:inline-block;
   border-width:1px;
   border-style:solid;
}
#ejemplo4 div.wp-pagenavi a, #ejemplo4 div.wp-pagenavi a:link, #ejemplo4 div.wp-pagenavi a:visited, #ejemplo4 div.wp-pagenavi a:active {
   border-color:#DDD;
   color:#0063dc;
}
#ejemplo4 div.wp-pagenavi a:hover {
   border-color:#036;
   background-color:#0063dc;
   color:#FFF;
}
#ejemplo4 div.wp-pagenavi span.pages, #ejemplo4 div.wp-pagenavi span.extend {
   display:none;
}
#ejemplo4 div.wp-pagenavi span.current {
   font-weight: bold;
   border:none;
   color:#ff0084;
}
/*EJEMPLO5*/
#ejemplo5 div.wp-pagenavi {
   font-family:Georgia, "Times New Roman", Times, serif;
   font-size:18px;
   padding:10px 0;
   overflow:hidden;
}
#ejemplo5 div.wp-pagenavi a, #ejemplo5 div.wp-pagenavi span.pages, #ejemplo5 div.wp-pagenavi span.current {
   padding:2px 6px;
   display:inline-block;
}
#ejemplo5 div.wp-pagenavi a, #ejemplo5 div.wp-pagenavi a:link, #ejemplo5 div.wp-pagenavi a:visited, #ejemplo5 div.wp-pagenavi a:active {
   color:#666;
}
#ejemplo5 div.wp-pagenavi a:hover {
   color:#000;
}
#ejemplo5 div.wp-pagenavi span.pages {
   display:block;
   font-size:22px;
   font-weight:bold;
   font-style:italic;
   color:#666;
   letter-spacing:-1px;
}
#ejemplo5 div.wp-pagenavi span.extend {
}
#ejemplo5 div.wp-pagenavi span.current {
   padding:2px 10px;
   font-style:italic;
   font-weight: bold;
   border-bottom:2px solid #000;
   color:#000;
}
/*EJEMPLO6*/
#ejemplo6 div.wp-pagenavi {
   background:url(http://img48.xooimage.com/files/8/d/3/bgnav6-16cc5d6.png) 0 0 no-repeat;
   padding:8px 0;
   overflow:hidden;
   text-align:center;
}
#ejemplo6 div.wp-pagenavi a, #ejemplo6 div.wp-pagenavi span.current {
   padding:4px 6px;
   display:inline-block;
}
#ejemplo6 div.wp-pagenavi a, #ejemplo6 div.wp-pagenavi a:link, #ejemplo6 div.wp-pagenavi a:visited, #ejemplo6 div.wp-pagenavi a:active {
   color:#666;
}
#ejemplo6 div.wp-pagenavi a:hover {
   color:#000;
}
#ejemplo6 div.wp-pagenavi span.pages {
   display:block;
   width:130px;
   line-height:26px;
   float:left;
   font-weight:bold;
   color:#666;
}
#ejemplo6 div.wp-pagenavi span.extend {
}
#ejemplo6 div.wp-pagenavi span.current {
   padding:4px 10px;
   font-style:italic;
   font-weight: bold;
   border-width:1px;
   border-style:solid;
   border-color:#909090 #FFF #FFF #909090;
   background-color:#BBB;
   -webkit-border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -moz-border-radius: 5px;
   color:#000;
}
/*EJEMPLO7*/
#ejemplo7 div.wp-pagenavi {
   background:url(http://img26.xooimage.com/files/2/2/0/bgnav7-16cc5e0.png) 0 0 no-repeat;
   position:relative;
   height:35px;
   overflow:hidden;
   color:#999;
   text-align:center;
}
#ejemplo7 div.wp-pagenavi a, #ejemplo7 div.wp-pagenavi span.current {
   margin:6px 4px 0 4px;
   padding:4px 6px;
   display:inline-block;
}
#ejemplo7 div.wp-pagenavi a {
   color:#c0c0c0;
}
#ejemplo7 div.wp-pagenavi a:hover {
   color:#fae47b;
}
#ejemplo7 div.wp-pagenavi span.pages {
   display:none;
}
#ejemplo7 div.wp-pagenavi a.first, #ejemplo7 div.wp-pagenavi a.last {
   top:0;
   position:absolute;
   padding:0;
   margin:0;
   background-image:url(http://img26.xooimage.com/files/c/b/1/buttonsnav7-16cc5ea.png);
   background-repeat:no-repeat;
   display:block;
   width:80px;
   height:35px;
   line-height:35px;
   text-indent:-9999em;
}
#ejemplo7 div.wp-pagenavi a.first {
   left:0;
}
#ejemplo7 div.wp-pagenavi a.last {
   right:0;
}
#ejemplo7 div.wp-pagenavi a.first:link, #ejemplo7 div.wp-pagenavi a.first:visited {
   background-position:0 0;
}
#ejemplo7 div.wp-pagenavi a.first:hover {
   background-position:0 -35px;
}
#ejemplo7 div.wp-pagenavi a.first:active {
   background-position:0 -70px;
}
#ejemplo7 div.wp-pagenavi a.last:link, #ejemplo7 div.wp-pagenavi a.last:visited {
   background-position:-80px 0;
}
#ejemplo7 div.wp-pagenavi a.last:hover {
   background-position:-80px -35px;
}
#ejemplo7 div.wp-pagenavi a.last:active {
   background-position:-80px -70px;
}
#ejemplo7 div.wp-pagenavi span.current {
   padding:4px 10px;
   font-style:italic;
   font-weight: bold;
   border-width:1px;
   border-style:solid;
   border-color:#555;
   background-color:#000;
   color:#FFF;
}
/*EJEMPLO8*/
#ejemplo8 div.wp-pagenavi {
   background:url(http://img26.xooimage.com/files/b/2/e/bgnav8-16cc5f9.png) bottom no-repeat;
   position:relative;
   height:80px;
   overflow:hidden;
   color:#999;
   text-align:center;
}
#ejemplo8 div.wp-pagenavi a, #ejemplo8 div.wp-pagenavi span.current {
   margin:6px 4px 0 4px;
   padding:4px 6px;
   display:inline-block;
}
#ejemplo8 div.wp-pagenavi a {
   color:#56784e;
}
#ejemplo8 div.wp-pagenavi a:hover {
   color:#288e10;
}
#ejemplo8 div.wp-pagenavi span.pages {
   font-family:Tahoma, Geneva, sans-serif;
   font-size:10px;
   font-weight:bold;
   position:absolute;
   bottom:2px;
   color:#630;
   left:40%;
}
#ejemplo8 div.wp-pagenavi a.first, #ejemplo8 div.wp-pagenavi a.last {
   top:0;
   position:absolute;
   padding:0;
   margin:0;
   background-image:url(http://img46.xooimage.com/files/0/8/7/buttonsnav8-16cc608.png);
   background-repeat:no-repeat;
   display:block;
   width:95px;
   height:80px;
   line-height:80px;
   text-indent:-9999em;
}
#ejemplo8 div.wp-pagenavi a.first {
   left:0;
}
#ejemplo8 div.wp-pagenavi a.last {
   right:0;
}
#ejemplo8 div.wp-pagenavi a.first:link, #ejemplo8 div.wp-pagenavi a.first:visited {
   background-position:0 0;
}
#ejemplo8 div.wp-pagenavi a.first:hover {
   background-position:0 -80px;
}
#ejemplo8 div.wp-pagenavi a.first:active {
   background-position:0 -160px;
}
#ejemplo8 div.wp-pagenavi a.last:link, #ejemplo8 div.wp-pagenavi a.last:visited {
   background-position:-95px 0;
}
#ejemplo8 div.wp-pagenavi a.last:hover {
   background-position:-95px -80px;
}
#ejemplo8 div.wp-pagenavi a.last:active {
   background-position:-95px -160px;
}
#ejemplo8 div.wp-pagenavi span.current {
   background:url(http://img48.xooimage.com/files/5/d/3/currentnav8-16cc60f.png) no-repeat;
   padding:8px 16px 8px 17px;
   font-style:italic;
   font-weight: bold;
   color: #FFF;
}
/*EJEMPLO9*/
#ejemplo9 div.wp-pagenavi {
   position:relative;
   overflow:hidden;
   color:#999;
   border-bottom:4px solid #333;
   text-align:center;
   font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
   font-size:22px;
   padding:5px 0;
   font-style:italic;
}
#ejemplo9 div.wp-pagenavi a, #ejemplo9 div.wp-pagenavi span.current {
   margin:6px 4px 0 4px;
   display:inline-block;
   padding:4px 15px 4px 6px;
   font-weight: bold;
   background:url(http://img40.xooimage.com/files/8/5/e/indicatorsnav9-16cc615.png);
   background-position:80% 0;
   background-repeat:no-repeat;
   color:#9b9b9b;
   border-right:1px solid #CCC;
}
#ejemplo9 div.wp-pagenavi a:hover {
   background-position:80% -50px;
   color:#3f3f3f;
}
#ejemplo9 div.wp-pagenavi span.pages, #ejemplo9 div.wp-pagenavi a.first, #ejemplo9 div.wp-pagenavi a.last {
   display:none;
}
#ejemplo9 div.wp-pagenavi span.current {
   background-position:80% -100px;
   color: #e400ff;
}
/*EJEMPL10*/
#ejemplo10 {
   background-color:#33362f;
   padding:10px 0;
}
#ejemplo10 div.wp-pagenavi {
   position:relative;
   overflow:hidden;
   color:#999;
   border-bottom:1px solid #6f6f6f;
   text-align:center;
}
#ejemplo10 div.wp-pagenavi a, #ejemplo10 div.wp-pagenavi span.current {
   margin:6px 8px 0 8px;
   display:inline-block;
   padding:4px 5px 4px 20px;
   color:#BFBFBF;
}
#ejemplo10 div.wp-pagenavi a:hover {
   border-bottom:1px solid #FFF;
   color:#ccc;
   top:1px;
   position:relative;
}
#ejemplo10 div.wp-pagenavi span.pages, #ejemplo10 div.wp-pagenavi a.first, #ejemplo10 div.wp-pagenavi a.last {
   display:none;
}
#ejemplo10 div.wp-pagenavi span.current {
   border-bottom:2px solid #c7d92c;
   color: #e0ffc0;
}

</style>