Секретный Сервис Lамастера.13.

11/02/2019 22:42

HTML kод скрипта Рager 1

Образец пагера можно увидеть на странице.
( СМОТРЕТЬ РЕЗУЛЬТАТ № 1)

<!DOCTYPE html> <html> <head> <style> /* :: PAGER :: */ .pager{ width:auto; float:left; clear:both; margin:10px 10px 20px 0px; } .pager ul{ list-style-type:none; margin:0; padding:0; } .pager ul li{ float:left; margin-bottom:10px; } .pager ul li a{ padding:3px 10px 4px 10px; margin:0 5px 0 0; color:#696969; display:block; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e2e2e2), to(#c9c9c9)); /* Safari 4-5, Chrome 1-9 */ background: -webkit-linear-gradient(top, #e2e2e2, #c9c9c9);/* Safari 5.1, Chrome 10+ */ background: -moz-linear-gradient(top, #e2e2e2, #c9c9c9); /* Firefox 3.6+ */ background: -ms-linear-gradient(top, #e2e2e2, #c9c9c9); /* IE 10 */ background: -o-linear-gradient(top, #e2e2e2, #c9c9c9);/* Opera 11.10+ */ background-color:#555; } .pager ul li a:hover{ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ee6c6d), to(#bc393a)); /* Safari 4-5, Chrome 1-9 */ background: -webkit-linear-gradient(top, #ee6c6d, #bc393a);/* Safari 5.1, Chrome 10+ */ background: -moz-linear-gradient(top, #ee6c6d, #bc393a); /* Firefox 3.6+ */ background: -ms-linear-gradient(top, #ee6c6d, #bc393a); /* IE 10 */ background: -o-linear-gradient(top, #ee6c6d, #bc393a);/* Opera 11.10+ */ background-color:#ea4748; color:#fff; text-decoration:none; } .pager ul li a.active{ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ee6c6d), to(#bc393a)); /* Safari 4-5, Chrome 1-9 */ background: -webkit-linear-gradient(top, #ee6c6d, #bc393a);/* Safari 5.1, Chrome 10+ */ background: -moz-linear-gradient(top, #ee6c6d, #bc393a); /* Firefox 3.6+ */ background: -ms-linear-gradient(top, #ee6c6d, #bc393a); /* IE 10 */ background: -o-linear-gradient(top, #ee6c6d, #bc393a);/* Opera 11.10+ */ background-color:#ea4748; color:#fff; } .pager ul li a.first-page{ background:#6c6c6c url(pager-nav1.png) no-repeat center; background-position:8px 8px; padding:0; width:25px; display:block; height:26px; } .pager ul li a.last-page{ background:#6c6c6c url(pager-nav1.png) no-repeat center; background-position:-11px 8px; padding:0; width:25px; display:block; height:26px; } /* :: END :: */ </style> </head> <body> <center> <table width="865" bgcolor="#FFFFFF" border="0" cellpadding="5" cellspacing="1"> <tr> <td id="header" valign="top"> <br> <center><h1>ПАГИНАТОР 1</h1></center> </td> </tr> <tr> <td> <table border=1 cellpadding=2 cellspacing=0 width=100% align=center> <tr><td> <div class="pager"><center> <ul> <li><a href="paginator1.html" class="first-page"></a></li> <li><a href="#" class="active">1</a></li> <li><a href="paginator2.html">2</a></li> <li><a href="paginator3.html">3</a></li> <li><a href="paginator4.html">4</a></li> <li><a href="paginator5.html">5</a></li> <li><a href="paginator6.html">6</a></li> <li><a href="paginator7.html">7</a></li> <li><a href="paginator8.html">8</a></li> <li><a href="paginator9.html">9</a></li> <li><a href="paginator10.html">10</a></li> <li><a href="paginator10.html" class="last-page"></a></li> </ul> </center></div> <br> </td></tr> </table> </td> </tr> </table> </center> </body> </html>

11/02/2019 23:38

Код ПАГИНАТОР 2

Образец пагера можно увидеть на странице.
( СМОТРЕТЬ РЕЗУЛЬТАТ № 2)

<!DOCTYPE html> <html> <head> <style> /* :: PAGER :: */ .pagenavi { padding: 10px 20px 10px !important; display:block !important; clear:both !important; } .pagenavi a ,.pagenavi span.pages, .pagenavi span.extend { color:#707070 !important; background:#FFFFFF !important; border-radius:3px !important; -moz-border-radius:3px !important; -webkit-border-radius:3px !important; border:solid 1px #DCDCDC !important; padding:6px 9px 6px 9px !important; margin-right:3px !important; text-decoration:none !important; font-size:12px !important; } .pagenavi a:hover { color:#DFE607 !important; text-shadow:0px 1px #000 !important; border-color:#DFE607 !important; background:#000 !important; background:-moz-linear-gradient(top,#DFE607 1px,#C3C906 1px,#FCF14C) !important; background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#DFE607),color-stop(0.02,#C3C906),color-stop(1,#FCF14C)) !important; } .pagenavi span.current{ padding:6px 9px 6px 9px !important; border:solid 1px #DCDCDC !important; border-color:#3390CA !important; border-radius:3px !important; -moz-border-radius:3px !important; -webkit-border-radius:3px !important; color:#fff !important; margin-right:3px !important; text-shadow:0px 1px #636363 !important; border-color:#5D5D5D !important; background:#777777 !important; background:-moz-linear-gradient(top,#C0C0C0 1px,#929292 1px,#777777) !important; background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#C0C0C0),color-stop(0.02,#929292),color-stop(1,#777777)) !important; } /* :: END :: */ </style> </head> <body><br><br> <center> <table width="865" bgcolor="#FFFFFF" border="0" cellpadding="5" cellspacing="1"> <tr> <td id="header" valign="top"> <br> <center><h2>ПАГИНАТОР 2</h2></center> </td> </tr> <tr> <td> <table border=1 cellpadding=2 cellspacing=0 width=100% align=center> <tr><td> <div id="navigation"> <div class="pagenavi"> <a class="nextpostslink" rel="next" href="paginator1.html">«</a> <a class="page larger" href="paginator10.html">10</a> <a class="page larger" href="paginator9.html">9</a> <a class="page larger" href="paginator8.html">8</a> <a class="page larger" href="paginator7.html">7</a> <a class="page larger" href="paginator6.html">6</a> <a class="page larger" href="paginator5.html">5</a> <a class="page larger" href="paginator4.html">4</a> <a class="page larger" href="paginator3.html">3</a> <span class="current">2</span> <a class="page larger" href="paginator1.html">1</a> <a class="nextpostslink" rel="next" href="paginator3.html">»</a> </div> </div> </center> <br> </td></tr> </table> </td> </tr> </table> </center> </body> </html>

11/02/2019 22:45

Код ПАГИНАТОР 3

Образец пагера можно увидеть на странице.
( СМОТРЕТЬ РЕЗУЛЬТАТ № 3)

<!DOCTYPE html> <html> <head> <style> /* :: PAGER :: */  .pager{ width: 80%; overflow:hidden; } .pager ul{ margin: 20; padding: 5; font: bold 12px Verdana; /* font style and size */ list-style-type: none; text-align: center; /* "left", "center", or "right" align menu */ } .pager li{ display: inline-block; position:relative; padding: 0px; margin: 0; margin-right: 5px; /* right margin between menu items */ } .pager li a{ display:inline-block; padding: 8px; min-width:0px; /* horizontal diameter of spotlight */ height:10px; /* vertical diameter of spotlight */ text-decoration: none; color: navy; margin: 0 auto; overflow:hidden; -moz-transition: all 0.5s ease-in-out; /* CSS3 transition to animate all A properties */ -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .pager li:hover a{ color: white; background: navy; /* background color of spotlight */ -webkit-border-radius: 50%; /* large radius to create circular borders */ -moz-border-radius: 50%; border-radius: 50%; } .pager li>a.active{text-decoration:none;background-color:#fb3034} .pager li>a,.pager li>a:active { color: #ffffff; text-decoration: none; background: #00CCFF; /* background color of spotlight */ -webkit-border-radius: 50%; /* large radius to create circular borders */ -moz-border-radius: 50%; border-radius: 50%; } .pager li a span{ position:relative; top:3%; /* move text down so it appears centered within menu item */ } /* :: END :: */ </style> </head> <body><br><br> <center> <table width="865" bgcolor="#FFFFFF" border="0" cellpadding="5" cellspacing="1"> <tr> <td id="header" valign="top"> <br> <center><h2>ПАГИНАТОР 3</h2></center> </td> </tr> <tr> <td> <table border=1 cellpadding=2 cellspacing=0 width=100% align=center> <tr><td> <div class="pager"> <ul> <li><a href="paginator1.html" title="1">Начало</a></li> <li><a href="paginator2.html" title="1">Пред.</a></li> <li><a href="paginator1.html" title="1">1</a></li> <li><a href="paginator2.html" title="2">2</a></li> <li><a href="paginator3.html" class="active" title="3">3</a></li> <li><a href="paginator4.html" title="4">4</a></li> <li><a href="paginator5.html" title="5">5</a></li> <li><a href="paginator6.html" title="6">6</a></li> <li><a href="paginator7.html" title="7">7</a></li> <li><a href="paginator8.html" title="8">8</a></li> <li><a href="paginator9.html" title="9">9</a></li> <li><a href="paginator10.html" title="10">10</a></li> <li><a href="paginator4.html" title="4" class="next-posts">След.</a></li> <li><a href="paginator10.html" title="5">Конец</a></li> </ul> </div> </center> <br> </td></tr> </table> </td> </tr> </table> </center> </body> </html>

11/02/2019 23:55

Код ПАГИНАТОР 4

Образец пагера можно увидеть на странице.
( СМОТРЕТЬ РЕЗУЛЬТАТ № 4)

<!DOCTYPE html> <html> <head> <style> /* :: PAGER :: */ /* :: END :: */ </style> </head> <body><br><br> <center> <table width="865" bgcolor="#FFFFFF" border="0" cellpadding="5" cellspacing="1"> <tr> <td id="header" valign="top"> <br> <center><h2>ПАГИНАТОР 4</h2></center> </td> </tr> <tr> <td> <table border=1 cellpadding=2 cellspacing=0 width=100% align=center> <tr><td> <div class="abtxt" align="center" style="margin-bottom:10px; margin-top:10px;"> <a href="javascript:history.back(1)"><span>Назад</span></a> <a href="paginator1.html">1</a> <a href="paginator2.html">2</a> <a href="paginator3.html">3</a> <a href="paginator4.html"><font color="brown" size="14"><b>4</b></font></a> <a href="paginator5.html">5</a> <a href="paginator6.html">6</a> <a href="paginator7.html">7</a> <a href="paginator8.html">8</a> <a href="paginator9.html">9</a> <a href="paginator10.html">10</a> <a href="paginator5.html">Далее</a> </div> </center> <br> </td></tr> </table> </td> </tr> </table> </center> </body> </html>

12/02/2019 16:16

Код ПАГИНАТОР 5

Образец пагера можно увидеть на странице.
( СМОТРЕТЬ РЕЗУЛЬТАТ № 5)

<html> <head> <style> /* :: PAGER :: */ #pager-container{display:block;margin-top:30px} #pager{font-family:"BebasNeueRegular",Tahoma;text-shadow:0 -1px 0 gray;font-size:20px;position:relative;width:auto;display:inline-block;margin-bottom:0}.oldIE #pager{width:100%} #pager span,#pager img, #pager input{display:block;float:left} #pager input{font-family:"BebasNeueRegular",Tahoma!important;font-size:20px!important;text-align:center!important;color:#83807c!important;width:50px!important;height:20px!important;margin:0!important;padding:0!important;margin-top:4px!important;margin-left:5px!important;margin-right:5px!important;background:url("page.png") no-repeat!important;border:none!important;outline:none!important;border-radius:0!important}.oldIE #pager input,.ie9 #pager input{font-size:19px!important;line-height:23px!important} #pager span{display:block;margin-top:5px} /* :: END :: */ </style> </head> <body><br><br> <center> <table width="865" bgcolor="#FFFFFF" border="0" cellpadding="5" cellspacing="1"> <tr> <td id="header" valign="top"> <br> <center><h2>ПАГИНАТОР 5</h2></center> </td> </tr> <tr> <td> <table border=1 cellpadding=2 cellspacing=0 width=100% align=center> <tr><td> <center> <div id="pager-container"> <div id="pager"> <a href="paginator1.html" title="1 стр."><img src="first.png" alt="1 стр." /></a> <a href="paginator4.html" title="стр.4"><img src="previous.png" alt="стр.4" /></a> <span>Стр.</span> <input type="tel" value="5" name="pageNumber" id="pageNumber" maxlength="5" tabindex="-1" /> <span>/10</span> <a href="paginator6.html" title="6 стр."><img src="next.png" alt="6 стр." /></a> <a href="paginator10.html" title="стр.10"><img src="last.png" alt="стр.10" /></a> </div> </div> <script type="text/javascript"> var pagerBaseUrl = 'paginator1.html--5'; var pagerCurrentPage = 5; var pagerPagesCount = 5; </script> <br> </center> <br> </td></tr> </table> </td> </tr> </table> </center> </body> </html>

12/02/2019 16:42

Код ПАГИНАТОР 6

Образец пагера можно увидеть на странице.
( СМОТРЕТЬ РЕЗУЛЬТАТ № 6)

<!DOCTYPE html> <html> <head> <style> /* :: PAGER :: */ .paginator { display:inline-block; margin-top:10px; padding:0; text-align:right; border-radius:5px; box-shadow:5px 5px 15px 0px #999; } .paginator .current { background-color:#eee; border:2px solid #777; border-top-right-radius:5px; border-bottom-right-radius:5px; border-top-left-radius:5px; border-bottom-left-radius:5px; } .paginator a, .paginator span { float:left; margin-left:-1px; padding:5px; color:#400E96; text-decoration:none; background-color:#fff; border:1px solid #ccc; font-size:15px; } .paginator a:first-child, .paginator span:first-child { margin-left:0; border-top-left-radius:5px; border-bottom-left-radius:5px; } .paginator a:last-child, .paginator span:last-child { margin-left:-1px; border-top-right-radius:5px; border-bottom-right-radius:5px; } .paginator .bum:hover {color:green;} .paginator .cum:hover {color:gold;} .paginator .dum:hover {color:red;} .paginator .num:hover {color:#400E96;} .paginator .zum:hover {color:#6E2607;} .paginator .current:hover {color:red;} #comments .text {margin:5px 10px;} #comments .desc {color:#888;margin:5px 10px 3px;text-align:right;font:bold 13px georgia,arial,sans-serif;} /* :: END :: */ </style> </head> <body><br><br> <center> <table width="865" bgcolor="#FFFFFF" border="0" cellpadding="5" cellspacing="1"> <tr> <td id="header" valign="top"> <br> <center><h2>ПАГИНАТОР 6</h2></center> </td> </tr> <tr> <td> <table border=1 cellpadding=2 cellspacing=0 width=100% align=center> <tr><td> <br> <br> <center> <div class="paginator bl"> <a class="dum" href="paginator1.html" title="Главная страница" rel="nofollow">◀</a> <a class="num" href="paginator1.html" title="Первая страница" rel="nofollow">01</a> <a class="num" href="paginator2.html" title="Вторая страница" rel="nofollow">02</a> <a class="num" href="paginator3.html" title="Третья страница" rel="nofollow">03</a> <a class="num" href="paginator4.html" title="Четвёртая страница" rel="nofollow">04</a> <a class="num" href="paginator5.html" title="Пятая страница" rel="nofollow">05</a> <span class="num current" title="Шестая страница"><b>06</b></span> <a class="num" href="paginator7.html" title="Седьмая страница" rel="nofollow">07</a> <a class="num" href="paginator8.html" title="Восьмая страница" rel="nofollow">08</a> <a class="num" href="paginator9.html" title="Девятая страница" rel="nofollow">09</a> <a class="num" href="paginator10.html" title="Десятая страница" rel="nofollow">10</a> <a class="dum" href="paginator10.html" title="Последняя страница" rel="nofollow">▶</a> </div> </center> <br> </td></tr> </table> </td> </tr> </table> </center> </body> </html>

12/02/2019 16:52

Код ПАГИНАТОР 7

Образец пагера можно увидеть на странице.
( СМОТРЕТЬ РЕЗУЛЬТАТ № 7)

<!DOCTYPE html> <html> <head> <style> /* :: PAGER :: */ .pagination { display: inline-block; } .pagination a { color: black; float: left; padding: 8px 16px; text-decoration: none; } .pagination a.active { background-color: #4CAF50; color: white; } .pagination a:hover:not(.active) {background-color: #ddd;} /* :: END :: */ </style> </head> <body><br><br> <center> <table width="865" bgcolor="#FFFFFF" border="0" cellpadding="5" cellspacing="1"> <tr> <td id="header" valign="top"> <br> <center><h2>ПАГИНАТОР 7</h2></center> </td> </tr> <tr> <td> <table border=1 cellpadding=2 cellspacing=0 width=100% align=center> <tr><td> <center> <div class="pagination"> <a href="#">«</a> <a href="paginator1.html">1</a> <a href="paginator2.html">2</a> <a href="paginator3.html">3</a> <a href="paginator4.html">4</a> <a href="paginator5.html">5</a> <a href="paginator6.html">6</a> <a class="active" href="paginator7.html">7</a> <a href="paginator8.html">8</a> <a href="paginator9.html">9</a> <a href="paginator10.html">10</a> <a href="#">»</a> </div> </center> <br> </td></tr> </table> </td> </tr> </table> </center> </body> </html>

12/02/2019 17:12

Код ПАГИНАТОР 8

Образец пагера можно увидеть на странице.
( СМОТРЕТЬ РЕЗУЛЬТАТ № 8)

<!DOCTYPE html> <html> <head> <style> /* :: PAGER :: */ @import url(https://fonts.googleapis.com/css?family=Lato:300|Gentium+Book+Basic:400italic|Open+Sans:700); /* PAGE CONTROLS ===========================================*/ .controls * { margin: 0; box-sizing: border-box; } .controls { width: 465px; margin: 20 auto; position: relative; font-family: 'Lato', sans-serif; color: #CF152D; transition: all 0.3s ease; } .controls .left, .controls .right { position: absolute; } .controls .right { left: 40px; } .controls a { width: 34px; height: 34px; border: 2px solid #000; border-radius: 35px; font-size: 14px; color: #2419B5; box-shadow: inset 0 1px 2px 0 #585858, inset 0 1px 1px 0 #4E4F53; } .controls a:hover { box-shadow: 0 1px 2px 0 #525252, inset 0 1px 1px 0 #4E4F53; box-shadow: 0 1px 2px 0 #525252, inset 0 2px 5px 0 #252525; color:#CF152D; } .controls .prev { float: left; } .controls .next { float: right; } .controls i { position: relative; text-shadow: 0 1px 4px #339615; top: 5px; } .controls .prev i { left: 0px; } .controls .next i { left: 16px; } .controls .page { height: 35px; margin: 10 5px 0 0; font-size: 14px; font-weight: bold; line-height: 30px; text-align: center; width: 365px; float: left; border: 3px solid #000; border-radius: 35px; box-shadow: inset 0 1px 2px 0 #585858, inset 0 1px 1px 0 #4E4F53; text-shadow: 0 1px 3px #2419B5; overflow: hidden; } /* :: END :: */ </style> </head> <body><br><br> <center> <table width="865" bgcolor="#FFFFFF" border="0" cellpadding="5" cellspacing="1"> <tr> <td id="header" valign="top"> <br> <center><h2>ПАГИНАТОР 8</h2></center> </td> </tr> <tr> <td> <table border=1 cellpadding=2 cellspacing=0 width=100% align=center> <tr><td><br> <center> <div class="controls noPrev"> <div class="left"> <a href="paginator1.html" class="prev">◀</a> </div> <div class="right"> <div class="nextContainer"> <div class="page"> <a href="paginator1.html">01</a> <a href="paginator2.html">02</a> <a href="paginator3.html">03</a> <a href="paginator4.html">04</a> <a href="paginator5.html">05</a> <a href="paginator6.html">06</a> <a href="paginator7.html">07</a> <span class="current" data-current="0">08</span> <a href="paginator9.html">09</a> <a href="paginator10.html">10</a> </div> <a href="#" class="next">▶</a> </div> </div> </div> </center> <br> <br><br> </td></tr> </table> </td> </tr> </table> </center> </body> </html>

12/02/2019 17:22

Код ПАГИНАТОР 9

Образец пагера можно увидеть на странице.
( СМОТРЕТЬ РЕЗУЛЬТАТ № 9)

<!DOCTYPE html> <html> <head> <style> /* :: PAGER :: */ @mixin breakpoint ($value) { @if $value == 'phone' { @media only screen and (min-width: 120px) and (max-width: 767px) { @content; } } @else if $value == 'tablet' { @media only screen and (min-width: 768px) and (max-width: 1024px) { @content; } } @else if $value == 'touch' { @media only screen and (min-width: 120px) and (max-width: 1024px) { @content; } } @else if $value == 'desktop' { @media only screen and (min-width: 1025px) { @content; } } @else { @media only screen and (max-width: $value) { @content; } } } //---------- pagination //------------------------------------------------------------------------------ .pagination-wrapper { text-align: center; margin: 20px 0; } .pagination { display: inline-block; height: 40px; margin-top: 10px; padding: 0 15px; border-radius: 25px; @include breakpoint(599px) { height: 30px; margin-top: 30px; padding: 0 10px; border-radius: 25px; } } .page-numbers, span{ padding:6px 9px 6px 9px !important; border:solid 1px #DCDCDC !important; border-color:#3390CA !important; border-radius:3px !important; -moz-border-radius:3px !important; -webkit-border-radius:3px !important; color:#fff !important; margin-right:3px !important; text-shadow:0px 1px #636363 !important; border-color:#5D5D5D !important; background:#777777 !important; background:-moz-linear-gradient(top,#C0C0C0 1px,#929292 1px,#777777) !important; background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#C0C0C0),color-stop(0.02,#929292),color-stop(1,#777777)) !important; } .pagination a{ text-decoration: none; color: red; } .pagination a:hover { color:#DFE607 !important; text-shadow:0px 1px #000 !important; border-color:#DFE607 !important; background:#f00 !important; background:-moz-linear-gradient(top,#DFE607 1px,#C3C906 1px,#FCF14C) !important; background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#DFE607),color-stop(0.02,#C3C906),color-stop(1,#FCF14C)) !important; } } /* :: END :: */ </style> </head> <body><br><br> <center> <table width="865" bgcolor="#FFFFFF" border="0" cellpadding="5" cellspacing="1"> <tr> <td id="header" valign="top"> <br> <center><h2>ПАГИНАТОР 9</h2></center> </td> </tr> <tr> <td> <table border=1 cellpadding=2 cellspacing=0 width=100% align=center> <tr><td> <center> <div class="pagination-wrapper"> <div class="pagination"> <a class="prev page-numbers" href="javascript:;">Назад</a> <a class="page-numbers" href="paginator1.html">1</a> <a class="page-numbers" href="paginator2.html">2</a> <a class="page-numbers" href="paginator3.html">3</a> <a class="page-numbers" href="paginator4.html">4</a> <a class="page-numbers" href="paginator5.html">5</a> <a class="page-numbers" href="paginator6.html">6</a> <a class="page-numbers" href="paginator7.html">7</a> <a class="page-numbers" href="paginator8.html">8</a> <span class="page-numbers"><font color="red" ><b>9</b></font></span> <a class="page-numbers" href="paginator10.html">10</a> <a class="next page-numbers" href="javascript:;">Далее</a> </div> </div> </center> <br> </td></tr> </table> </td> </tr> </table> </center> </body> </html>

12/02/2019 17:30

Код ПАГИНАТОР 10

Образец пагера можно увидеть на странице.
( СМОТРЕТЬ РЕЗУЛЬТАТ № 10)

<!DOCTYPE html> <html> <head> <style> /* :: PAGER :: */ body { font-family: "Lora", serif; } .pagination { margin: 0; padding: 10px; background-color: #fff; border-radius: 30px; box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.5); } .pagination li { display: inline-block; list-style: none; } .pagination li a { display: block; width: 30px; height: 30px; line-height: 30px; background-color: #fff; text-align: center; text-decoration: none; color: #252525; border-radius: 4px; margin: 5px; box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.1), 0 2px 5px rgba(0, 0, 0, 0.5); transition: all 0.3s ease; } .pagination li a:hover, .pagination li a.active { color: #fff; background-color: #ff4242; } .pagination li:first-child a { border-radius: 30px 0 0 30px; } .pagination li:last-child a { border-radius: 0 30px 30px 0; } /* :: END :: */ </style> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> </head> <body><br><br> <center> <table width="865" bgcolor="#FFFFFF" border="0" cellpadding="5" cellspacing="1"> <tr> <td id="header" valign="top"> <br> <center><h2>ПАГИНАТОР 10</h2></center> </td> </tr> <tr> <td> <table border=1 cellpadding=2 cellspacing=0 width=100% align=center> <tr><td> <br> <center>   <ul class="pagination"> <li><a href="paginator9.html"><</a></li> <li><a href="paginator1.html">1</a></li> <li><a href="paginator2.html">2</a></li> <li><a href="paginator3.html">3</a></li> <li><a href="paginator4.html">4</a></li> <li><a href="paginator5.html">5</a></li> <li><a href="paginator6.html">6</a></li> <li><a href="paginator7.html">7</a></li> <li><a href="paginator8.html">8</a></li> <li><a href="paginator9.html">9</a></li> <li><a class="active" href="#0">10</a></li> <li><a href="paginator1.html">></a></li> </ul>  </center> <br> </td></tr> </table> </td> </tr> </table> </center> </body> </html>

12/02/2019 17:36

Код ПАГИНАТОР 11

Образец пагера можно увидеть на странице.
( СМОТРЕТЬ РЕЗУЛЬТАТ № 11)

<!DOCTYPE html> <html> <head> <style> /* :: PAGER :: */ body { font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif; color: #404040; } .container { margin: 20px auto; width: 600px; text-align: center; } .container .pagination { margin: 15px 0; } .pagination { padding: 8px; background-clip: padding-box; border: 1px solid; border-color: #070809; border-color: rgba(0, 0, 0, 0.8) rgba(0, 0, 0, 0.65) rgba(0, 0, 0, 0.5); border-radius: 3px; display: inline-block; vertical-align: baseline; zoom: 1; *display: inline; *vertical-align: auto; background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0)); -webkit-box-shadow: 0 1px rgba(255, 255, 255, 0.05); box-shadow: 0 1px rgba(255, 255, 255, 0.05); } .pagination > a, .pagination > span { float: left; margin-left: 5px; padding: 0 6px; min-width: 17px; line-height: 27px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; color: #d4d4d4; text-align: center; text-decoration: none; border: 1px solid black; border-radius: 3px; } .pagination :first-child { margin-left: 0; } .pagination > a { text-decoration: none; text-shadow: 0 1px black; background-clip: padding-box; border-color: rgba(0, 0, 0, 0.9); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 1px rgba(255, 255, 255, 0.04), inset 0 -1px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 1px rgba(255, 255, 255, 0.04), inset 0 -1px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.1); -webkit-transition: 0.1s ease-out; -moz-transition: 0.1s ease-out; -o-transition: 0.1s ease-out; transition: 0.1s ease-out; } .pagination > a:hover { background-color: #333; background-color: rgba(255, 255, 255, 0.05); } .pagination > span, .pagination > a:active { color: #eee; text-shadow: 0 -1px black; background: #1c1c1c; background: rgba(255, 255, 255, 0.01); border-color: black rgba(0, 0, 0, 0.65) rgba(0, 0, 0, 0.6); -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.05), inset 0 2px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.06); box-shadow: inset 0 1px rgba(0, 0, 0, 0.05), inset 0 2px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.06); } .pagination .prev, .pagination .next { font-family: Noteworthy, Arial, sans-serif; font-size: 14px; } .pagination-black { background-color: rgba(0, 0, 0, 0.1); } .pagination-black > a { background-color: rgba(0, 0, 0, 0.01); } .pagination-black > a.hover { background-color: rgba(120, 0, 0, 0.08); } /* :: END :: */ </style> </head> <body><br><br> <center> <table width="865" bgcolor="#FFFFFF" border="0" cellpadding="5" cellspacing="1"> <tr> <td id="header" valign="top"> <br> <center><h2>ПАГИНАТОР 11</h2></center> </td> </tr> <tr> <td> <table border=1 bgcolor="#777777" cellpadding=2 cellspacing=0 width=100% align=center> <tr><td> <center> <div class="container"> <nav class="pagination"> <a href="#" class="prev"><</a> <a href="paginator1.html">1</a> <a href="paginator2.html">2</a> <a href="paginator3.html">3</a> <a href="paginator4.html">4</a> <a href="paginator5.html">5</a> <a href="paginator6.html">6</a> <a href="paginator7.html">7</a> <a href="paginator8.html">8</a> <a href="paginator9.html">9</a> <a href="paginator10.html">10</a> <span>11</span> <a href="paginator12.html">12</a> <a href="#" class="next">></a> </nav> <nav class="pagination pagination-black"> <a href="#" class="prev"><</a> <a href="paginator1.html">1</a> <a href="paginator2.html">2</a> <a href="paginator3.html">3</a> <a href="paginator4.html">4</a> <a href="paginator5.html">5</a> <a href="paginator6.html">6</a> <a href="paginator7.html">7</a> <a href="paginator8.html">8</a> <a href="paginator9.html">9</a> <a href="paginator10.html">10</a> <span>11</span> <a href="paginator12.html">12</a> <a href="#" class="next">></a> </nav> </div> </center> <br> </td></tr> </table> </td> </tr> </table> </center> </body> </html>

12/02/2019 17:42

Код ПАГИНАТОР 12

Образец пагера можно увидеть на странице.
( СМОТРЕТЬ РЕЗУЛЬТАТ № 12)

Дата: /

CSS пагинаторы для страниц: