Advertisement
Guest User

Untitled

a guest
May 24th, 2016
121
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 16.25 KB | None | 0 0
  1. <!DOCTYPE html>
  2.   <html>
  3.   <head>
  4. <style>
  5. body {
  6.     font: 14px 'PT Sans', sans-serif;
  7. }
  8.  
  9. .tabs_box p {
  10.     margin: 10px 0;
  11. }
  12.  
  13. .tabs_box table{
  14.     margin: auto;
  15. }
  16. .tabs_box table td{
  17.     text-align:center;
  18. }
  19. .tabs_box {
  20.     width: 50%;
  21.     background: #fff;
  22.     position: absolute;
  23.     left: 26%;
  24.     box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
  25. }
  26.  
  27. #tab2, #tab3 {
  28.     display: none;
  29. }
  30.  
  31. /*  .tab {
  32. padding: 0 10px;
  33. }
  34. */
  35.  
  36. .tabs_menu {
  37.     display: table-row;
  38. }
  39.  
  40. .tabs_menu li {
  41.     display: table-cell;
  42.     width: auto;
  43. }
  44.  
  45. .tabs_menu li a {
  46.     display: table-cell;
  47.     width: 2000px;
  48.     text-align: center;
  49.     text-decoration: none;
  50.     background: #f8f8f8;
  51.     color: #292929;
  52.     border-bottom: 1px solid #ccc;
  53.     border-left: 1px solid #ccc;
  54.     padding: 10px 0;
  55. }
  56.  
  57. .tabs_menu li:first-child a {
  58.     border-left: 0;
  59. }
  60.  
  61. .tabs_menu .active {
  62.     background: #5f84c1;
  63.     color: #fff;
  64. }
  65. .simple-little-table {
  66.     font-family:Arial, Helvetica, sans-serif;
  67.     color:#666;
  68.     font-size:12px;
  69.     text-shadow: 1px 1px 0px #fff;
  70.     background:#eaebec;
  71.     margin:20px;
  72.     border:#ccc 1px solid;
  73.     border-collapse:separate;
  74.  
  75.     -moz-border-radius:3px;
  76.     -webkit-border-radius:3px;
  77.     border-radius:3px;
  78.  
  79.     -moz-box-shadow: 0 1px 2px #d1d1d1;
  80.     -webkit-box-shadow: 0 1px 2px #d1d1d1;
  81.     box-shadow: 0 1px 2px #d1d1d1;
  82. }
  83.  
  84. .simple-little-table th {
  85.     font-weight:bold;
  86.     padding:21px 25px 22px 25px;
  87.     border-top:1px solid #fafafa;
  88.     border-bottom:1px solid #e0e0e0;
  89.  
  90.     background: #ededed;
  91.     background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
  92.     background: -moz-linear-gradient(top,  #ededed,  #ebebeb);
  93. }
  94. .simple-little-table th:first-child{
  95.     text-align: left;
  96.     padding-left:20px;
  97. }
  98. .simple-little-table tr:first-child th:first-child{
  99.     -moz-border-radius-topleft:3px;
  100.     -webkit-border-top-left-radius:3px;
  101.     border-top-left-radius:3px;
  102. }
  103. .simple-little-table tr:first-child th:last-child{
  104.     -moz-border-radius-topright:3px;
  105.     -webkit-border-top-right-radius:3px;
  106.     border-top-right-radius:3px;
  107. }
  108. .simple-little-table tr{
  109.     text-align: center;
  110.     padding-left:20px;
  111. }
  112. .simple-little-table tr td:first-child{
  113.     text-align: left;
  114.     padding-left:20px;
  115.     border-left: 0;
  116. }
  117. .simple-little-table tr td {
  118.     padding:18px;
  119.     border-top: 1px solid #ffffff;
  120.     border-bottom:1px solid #e0e0e0;
  121.     border-left: 1px solid #e0e0e0;
  122.  
  123.     background: #fafafa;
  124.     background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
  125.     background: -moz-linear-gradient(top,  #fbfbfb,  #fafafa);
  126. }
  127. .simple-little-table tr:nth-child(even) td{
  128.     background: #f6f6f6;
  129.     background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
  130.     background: -moz-linear-gradient(top,  #f8f8f8,  #f6f6f6);
  131. }
  132. .simple-little-table tr:last-child td{
  133.     border-bottom:0;
  134. }
  135. .simple-little-table tr:last-child td:first-child{
  136.     -moz-border-radius-bottomleft:3px;
  137.     -webkit-border-bottom-left-radius:3px;
  138.     border-bottom-left-radius:3px;
  139. }
  140. .simple-little-table tr:last-child td:last-child{
  141.     -moz-border-radius-bottomright:3px;
  142.     -webkit-border-bottom-right-radius:3px;
  143.     border-bottom-right-radius:3px;
  144. }
  145. .simple-little-table tr:hover td{
  146.     background: #f2f2f2;
  147.     background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
  148.     background: -moz-linear-gradient(top,  #f2f2f2,  #f0f0f0);
  149. }
  150.  
  151. .simple-little-table a:link {
  152.     color: #666;
  153.     font-weight: bold;
  154.     text-decoration:none;
  155. }
  156. .simple-little-table a:visited {
  157.     color: #999999;
  158.     font-weight:bold;
  159.     text-decoration:none;
  160. }
  161. .simple-little-table a:active,
  162. .simple-little-table a:hover {
  163.     color: #bd5a35;
  164.     text-decoration:underline;
  165. }
  166. /*second*/
  167. .t_box{
  168.     width:100%;
  169.     background:#fff;
  170.     position: inherit;
  171.     top: 100px;
  172.     left: 50%;
  173. }
  174. #t2, #t3, #t4, #t5{
  175.     display: none !important;
  176. }
  177.  
  178.  
  179. /*.t{
  180.     padding: 0 10px;
  181. }*/
  182.  
  183. .t_menu{
  184.     display: table-row;
  185. }
  186.  
  187. .t_menu li{
  188.     display: table-cell;
  189. }
  190.  
  191. .t_menu li a{
  192.     display: table-cell;
  193.     width: 2000px;
  194.     text-align: center;
  195.     text-decoration: none;
  196.     background: #f8f8f8;
  197.     color: #292929;
  198.     border-bottom: 1px solid #ccc;
  199.     border-left: 1px solid #ccc;
  200.     padding: 10px 0;
  201. }
  202.  
  203. .t_menu li:first-child a{
  204.     border-left:0;
  205. }
  206.  
  207. .t_menu .act{
  208.     background: #5f84c1;
  209.     color:white;
  210. }
  211.  
  212. </style>
  213.   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  214.           <meta charset="utf-8">
  215.             <!-- Переключаємо вкладки-->
  216.       <script>
  217.       $(document).ready(function(){
  218.         $('.tabs_menu a').click(function(e){//при кліку на лінк в меню
  219.           e.preventDefault();//відмініяємо стандартну поведінку
  220.           $('.tabs_menu .active').removeClass('active');// видаляємо з поточної клас active
  221.           $(this).addClass('active');//додаємо клас active до туди де був зроблений клік
  222.           var tab = $(this).attr('href');//отримуємо href, щоб знати який контент показати
  223.           $('.tab').not(tab).css({'display':'none'});// усі інші виключаємо
  224.           $(tab).fadeIn(400);//для плавного перемикання
  225.         });
  226.       });
  227.       </script>
  228.       <!-- Переключаємо підменю-->
  229.   <script>
  230.           $(document).ready(function(){
  231.             $('.t_menu a').click(function(a){ //при кліку на лінк в меню
  232.               a.preventDefault();//відмініяємо стандартну поведінку
  233.               $('.t_menu .act').removeClass('act');// видаляємо з поточної клас act
  234.               $(this).addClass('act'); //додаємо клас act до туди де був зроблений клік
  235.               var tab = $(this).attr('href');//отримуємо href, щоб знати який контент показати
  236.               $('.t').not(tab).css({'display':'none'});// усі інші виключаємо
  237.               $(tab).fadeIn(400);//для плавного перемикання
  238.             });
  239.           });
  240.   </script>
  241.       </head>
  242.       <body>
  243.       <div class="tabs_box">
  244.         <ul class="tabs_menu">
  245.           <li><a href="#tab1" class="active">Banks<br><i class="fa fa-university fa-1"></i></a></li>
  246.           <li><a class="" href="#tab2">Calculator<br><i class="fa fa-calculator fa-1"></i></a></li>
  247.           <li><a class="" href="#tab3">Cards<br><i class="fa fa-credit-card fa-1"></i></a></li>
  248.         </ul>
  249.         <div style="" class="tab" id="tab1"><!--Banks-->
  250.  
  251.             <div class="t_box"><!--Підменю-->
  252.  
  253.                     <ul class="t_menu">
  254.                       <li><a href="#t1" class="act">Загальний</a></li>
  255.                       <li><a href="#t2">USD</a></li>
  256.                       <li><a href="#t3">EUR</a></li>
  257.                       <li><a href="#t4">RUB</a></li>
  258.                       <li><a href="#t5">BTC</a></li>
  259.                     </ul>
  260.  
  261.                     <div class="t" id="t1"><!--Загальний -->
  262.                                   <table class="simple-little-table" style="margin:auto;width:100%;"><!-- Загальний курс-->
  263.                                    <thead>
  264.                                       <tr>
  265.                                           <th>Валюта</th>
  266.                                           <th>Купівля</th>
  267.                                           <th>Продаж</th>
  268.                                           <th>НБУ</th>
  269.                                       </tr>
  270.                                   </thead>
  271.                                   <tr>
  272.                                       <td>USD</td>
  273.                                       <td>text3</td>
  274.                                       <td>text</td>
  275.                                       <td>text</td>
  276.  
  277.                                   </tr>
  278.                                   <tr>
  279.                                       <td>EUR</td>
  280.                                       <td>text</td>
  281.                                       <td>text</td>
  282.                                       <td>text</td>
  283.                                   </tr>
  284.                                   <tr>
  285.                                       <td>RUB</td>
  286.                                       <td>text</td>
  287.                                       <td>text</td>
  288.                                       <td>text</td>
  289.                                   </tr>
  290.                                   <tr>
  291.                                       <td>BTC</td>
  292.                                       <td>text</td>
  293.                                       <td>text</td>
  294.                                       <td>text</td>
  295.                                   </tr>
  296.  
  297.                               </table><!-- Кінець Загальний курс-->
  298.                     </div>
  299.  
  300.                     <div class="t" id="t2"><!--USD -->
  301.                       <table class="simple-little-table" style="margin:auto;width:100%;">
  302.                               <thead>
  303.                                   <tr>
  304.                                       <th colspan="2">Банк</th>
  305.                                       <th>Купівля </th>
  306.                                       <th>Продаж</th>
  307.                                   </tr>
  308.                               </thead>
  309.                                   <tr>
  310.                                       <td>img</td>
  311.                                       <td>bankadata_select_fr("bank_name","id=1")</td>
  312.                                       <td>bankadata_select_fr("bank_name","id=2")</td>
  313.                                       <td>bankadata_select_fr("bank_name","id=3")</td>
  314.                                       <td> bankadata_select_fr("bank_name","id=4")</td>
  315.                                       <td> bankadata_select_fr("bank_name","id=5")</td>
  316.  
  317.                                   </tr>
  318.                                   <tr>
  319.                                       <td>EUR</td>
  320.                                       <td>text</td>
  321.                                       <td>text</td>
  322.                                       <td>text</td>
  323.                                   </tr>
  324.                                   <tr>
  325.                                       <td>RUB</td>
  326.                                       <td>text</td>
  327.                                       <td>text</td>
  328.                                       <td>text</td>
  329.                                   </tr>
  330.                                   <tr>
  331.                                       <td>BTC</td>
  332.                                       <td>text</td>
  333.                                       <td>text</td>
  334.                                       <td>text</td>
  335.                                   </tr>
  336.  
  337.                               </table>
  338.                     </div><!--end USD -->
  339.  
  340.                     <div class="t" id="t3"><!--EUR -->
  341.                       <table class="simple-little-table" style="margin:auto;width:100%;">
  342.                               <thead>
  343.                                   <tr>
  344.                                       <th colspan="2">Банк</th>
  345.                                       <th>Купівля </th>
  346.                                       <th>Продаж</th>
  347.                                   </tr>
  348.                               </thead>
  349.                                   <tr>
  350.                                       <td>img</td>
  351.                                       <td>text3</td>
  352.                                       <td>text</td>
  353.                                       <td>text</td>
  354.  
  355.                                   </tr>
  356.                                   <tr>
  357.                                       <td>EUR</td>
  358.                                       <td>text</td>
  359.                                       <td>text</td>
  360.                                       <td>text</td>
  361.                                   </tr>
  362.                                   <tr>
  363.                                       <td>RUB</td>
  364.                                       <td>text</td>
  365.                                       <td>text</td>
  366.                                       <td>text</td>
  367.                                   </tr>
  368.                                   <tr>
  369.                                       <td>BTC</td>
  370.                                       <td>text</td>
  371.                                       <td>text</td>
  372.                                       <td>text</td>
  373.                                   </tr>
  374.  
  375.                               </table>
  376.                     </div><!--end EUR -->
  377.  
  378.                     <div class="t" id="t4"><!--RUB -->
  379.                       <table class="simple-little-table" style="margin:auto;width:100%;">
  380.                               <thead>
  381.                                   <tr>
  382.                                       <th colspan="2">Банк</th>
  383.                                       <th>Купівля </th>
  384.                                       <th>Продаж</th>
  385.                                   </tr>
  386.                               </thead>
  387.                                   <tr>
  388.                                       <td>img</td>
  389.                                       <td>text4</td>
  390.                                       <td>text</td>
  391.                                       <td>text</td>
  392.  
  393.                                   </tr>
  394.                                   <tr>
  395.                                       <td>EUR</td>
  396.                                       <td>text</td>
  397.                                       <td>text</td>
  398.                                       <td>text</td>
  399.                                   </tr>
  400.                                   <tr>
  401.                                       <td>RUB</td>
  402.                                       <td>text</td>
  403.                                       <td>text</td>
  404.                                       <td>text</td>
  405.                                   </tr>
  406.                                   <tr>
  407.                                       <td>BTC</td>
  408.                                       <td>text</td>
  409.                                       <td>text</td>
  410.                                       <td>text</td>
  411.                                   </tr>
  412.  
  413.                               </table>
  414.                     </div><!--end RUB -->
  415.  
  416.                     <div class="t" id="t5"><!--BTC -->
  417.                       <table class="simple-little-table" style="margin:auto;width:100%;">
  418.                               <thead>
  419.                                   <tr>
  420.                                       <th colspan="2">Банк</th>
  421.                                       <th>Купівля </th>
  422.                                       <th>Продаж</th>
  423.                                   </tr>
  424.                               </thead>
  425.                                   <tr>
  426.                                       <td>img</td>
  427.                                       <td>text5</td>
  428.                                       <td>text</td>
  429.                                       <td>text</td>
  430.  
  431.                                   </tr>
  432.                                   <tr>
  433.                                       <td>EUR</td>
  434.                                       <td>text</td>
  435.                                       <td>text</td>
  436.                                       <td>text</td>
  437.                                   </tr>
  438.                                   <tr>
  439.                                       <td>RUB</td>
  440.                                       <td>text</td>
  441.                                       <td>text</td>
  442.                                       <td>text</td>
  443.                                   </tr>
  444.                                   <tr>
  445.                                       <td>BTC</td>
  446.                                       <td>text</td>
  447.                                       <td>text</td>
  448.                                       <td>text</td>
  449.                                   </tr>
  450.  
  451.                               </table>
  452.                     </div><!--end BTC -->
  453.  
  454.                   </div><!-- кінець підменю-->
  455.  
  456.  
  457.  
  458.         </div>
  459.         <div style="display: none;" class="tab" id="tab2">
  460.         <p>text2</p>
  461.  
  462.         </div>
  463.         <div style="display: none;" class="tab" id="tab3">
  464.             <p>text3</p>
  465.         </div>
  466.       </div>
  467.  
  468.   </body>
  469.   </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement