Difference between revisions of "Team:NCTU Formosa/Notebook"
Line 120: | Line 120: | ||
LINE-HEIGHT:30pt; | LINE-HEIGHT:30pt; | ||
padding-bottom:15vh; | padding-bottom:15vh; | ||
+ | } | ||
+ | ul, li { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | list-style: none; | ||
+ | } | ||
+ | .abgne_tab { | ||
+ | clear: left; | ||
+ | width: 100%; | ||
+ | margin: 10px 0; | ||
+ | } | ||
+ | ul.tabs { | ||
+ | width: 100%; | ||
+ | height: 32px; | ||
+ | border-bottom: 1px solid #999; | ||
+ | border-left: 1px solid #999; | ||
+ | } | ||
+ | ul.tabs li { | ||
+ | float: left; | ||
+ | height: 31px; | ||
+ | line-height: 31px; | ||
+ | overflow: hidden; | ||
+ | position: relative; | ||
+ | margin-bottom: -1px; /* 讓 li 往下移來遮住 ul 的部份 border-bottom */ | ||
+ | border: 1px solid #999; | ||
+ | border-left: none; | ||
+ | background: #e1e1e1; | ||
+ | } | ||
+ | ul.tabs li a { | ||
+ | display: block; | ||
+ | padding: 0 20px; | ||
+ | color: #000; | ||
+ | border: 1px solid #fff; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | ul.tabs li a:hover { | ||
+ | background: #ccc; | ||
+ | } | ||
+ | ul.tabs li.active { | ||
+ | background: #fff; | ||
+ | border-bottom: 1px solid#fff; | ||
+ | } | ||
+ | ul.tabs li.active a:hover { | ||
+ | background: #fff; | ||
+ | } | ||
+ | div.tab_container { | ||
+ | clear: left; | ||
+ | width: 100%; | ||
+ | border: 1px solid #999; | ||
+ | border-top: none; | ||
+ | background: #fff; | ||
+ | } | ||
+ | div.tab_container .tab_content { | ||
+ | padding: 20px; | ||
+ | } | ||
+ | div.tab_container .tab_content h2 { | ||
+ | margin: 0 0 20px; | ||
+ | } | ||
+ | .CSSTableGenerator { | ||
+ | margin:0px;padding:0px; | ||
+ | width:100%; | ||
+ | box-shadow: 10px 10px 5px #888888; | ||
+ | border:1px solid #e5e5e5; | ||
+ | |||
+ | -moz-border-radius-bottomleft:12px; | ||
+ | -webkit-border-bottom-left-radius:12px; | ||
+ | border-bottom-left-radius:12px; | ||
+ | |||
+ | -moz-border-radius-bottomright:12px; | ||
+ | -webkit-border-bottom-right-radius:12px; | ||
+ | border-bottom-right-radius:12px; | ||
+ | |||
+ | -moz-border-radius-topright:12px; | ||
+ | -webkit-border-top-right-radius:12px; | ||
+ | border-top-right-radius:12px; | ||
+ | |||
+ | -moz-border-radius-topleft:12px; | ||
+ | -webkit-border-top-left-radius:12px; | ||
+ | border-top-left-radius:12px; | ||
+ | }.CSSTableGenerator table{ | ||
+ | border-collapse: collapse; | ||
+ | border-spacing: 0; | ||
+ | width:100%; | ||
+ | height:100%; | ||
+ | margin:0px;padding:0px; | ||
+ | }.CSSTableGenerator tr:last-child td:last-child { | ||
+ | -moz-border-radius-bottomright:12px; | ||
+ | -webkit-border-bottom-right-radius:12px; | ||
+ | border-bottom-right-radius:12px; | ||
+ | } | ||
+ | .CSSTableGenerator table tr:first-child td:first-child { | ||
+ | -moz-border-radius-topleft:12px; | ||
+ | -webkit-border-top-left-radius:12px; | ||
+ | border-top-left-radius:12px; | ||
+ | } | ||
+ | .CSSTableGenerator table tr:first-child td:last-child { | ||
+ | -moz-border-radius-topright:12px; | ||
+ | -webkit-border-top-right-radius:12px; | ||
+ | border-top-right-radius:12px; | ||
+ | }.CSSTableGenerator tr:last-child td:first-child{ | ||
+ | -moz-border-radius-bottomleft:12px; | ||
+ | -webkit-border-bottom-left-radius:12px; | ||
+ | border-bottom-left-radius:12px; | ||
+ | }.CSSTableGenerator tr:hover td{ | ||
+ | |||
+ | } | ||
+ | .CSSTableGenerator tr:nth-child(odd){ background-color:#ffffff; } | ||
+ | .CSSTableGenerator tr:nth-child(even) { background-color:#ffffff; }.CSSTableGenerator td{ | ||
+ | vertical-align:middle; | ||
+ | |||
+ | |||
+ | border:1px solid #e5e5e5; | ||
+ | border-width:0px 1px 1px 0px; | ||
+ | text-align:left; | ||
+ | padding:7px; | ||
+ | font-size:14px; | ||
+ | font-family:Arial; | ||
+ | font-weight:normal; | ||
+ | color:#666666; | ||
+ | }.CSSTableGenerator tr:last-child td{ | ||
+ | border-width:0px 1px 0px 0px; | ||
+ | }.CSSTableGenerator tr td:last-child{ | ||
+ | border-width:0px 0px 1px 0px; | ||
+ | }.CSSTableGenerator tr:last-child td:last-child{ | ||
+ | border-width:0px 0px 0px 0px; | ||
+ | } | ||
+ | .CSSTableGenerator tr:first-child td{ | ||
+ | background:-o-linear-gradient(bottom, #ffffff 5%, #ffffff 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #ffffff) ); | ||
+ | background:-moz-linear-gradient( center top, #ffffff 5%, #ffffff 100% ); | ||
+ | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffffff"); background: -o-linear-gradient(top,#ffffff,ffffff); | ||
+ | |||
+ | background-color:#ffffff; | ||
+ | border:0px solid #e5e5e5; | ||
+ | text-align:center; | ||
+ | border-width:0px 0px 1px 1px; | ||
+ | font-size:22px; | ||
+ | font-family:Arial; | ||
+ | font-weight:bold; | ||
+ | color:#4c4c4c; | ||
+ | } | ||
+ | .CSSTableGenerator tr:first-child:hover td{ | ||
+ | background:-o-linear-gradient(bottom, #ffffff 5%, #ffffff 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #ffffff) ); | ||
+ | background:-moz-linear-gradient( center top, #ffffff 5%, #ffffff 100% ); | ||
+ | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffffff"); background: -o-linear-gradient(top,#ffffff,ffffff); | ||
+ | |||
+ | background-color:#ffffff; | ||
+ | } | ||
+ | .CSSTableGenerator tr:first-child td:first-child{ | ||
+ | border-width:0px 0px 1px 0px; | ||
+ | } | ||
+ | .CSSTableGenerator tr:first-child td:last-child{ | ||
+ | border-width:0px 0px 1px 1px; | ||
} | } | ||
Line 129: | Line 281: | ||
</style> | </style> | ||
+ | <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> | ||
+ | |||
+ | <script> | ||
+ | $(function(){ | ||
+ | // 預設顯示第一個 Tab | ||
+ | var _showTab = 0; | ||
+ | var $defaultLi = $('ul.tabs li').eq(_showTab).addClass('active'); | ||
+ | $($defaultLi.find('a').attr('href')).siblings().hide(); | ||
+ | |||
+ | // 當 li 頁籤被點擊時... | ||
+ | // 若要改成滑鼠移到 li 頁籤就切換時, 把 click 改成 mouseover | ||
+ | $('ul.tabs li').click(function() { | ||
+ | // 找出 li 中的超連結 href(#id) | ||
+ | var $this = $(this), | ||
+ | _clickTab = $this.find('a').attr('href'); | ||
+ | // 把目前點擊到的 li 頁籤加上 .active | ||
+ | // 並把兄弟元素中有 .active 的都移除 class | ||
+ | $this.addClass('active').siblings('.active').removeClass('active'); | ||
+ | // 淡入相對應的內容並隱藏兄弟元素 | ||
+ | $(_clickTab).stop(false, true).fadeIn().siblings().hide(); | ||
+ | |||
+ | return false; | ||
+ | }).find('a').focus(function(){ | ||
+ | this.blur(); | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
</head> | </head> | ||
<body> | <body> | ||
Line 136: | Line 315: | ||
</div> | </div> | ||
<div class="p02"> | <div class="p02"> | ||
− | <div class=" | + | <div class="abgne_tab"> |
− | + | <ul class="tabs"> | |
− | </ | + | <li><a href="#tab1">2015 March</a></li> |
− | + | <li><a href="#tab2">2015 April</a></li> | |
− | < | + | <li><a href="#tab3">2015 May</a></li> |
− | + | <li><a href="#tab4">2015 June</a></li> | |
− | + | <li><a href="#tab5">2015 July</a></li> | |
− | </div> | + | <li><a href="#tab6">2015 August</a></li> |
− | <div class=" | + | <li><a href="#tab7">2015 September</a></li> |
− | <div class=" | + | </ul> |
− | + | ||
− | + | <div class="tab_container"> | |
− | + | <div id="tab1" class="tab_content"> | |
− | </ | + | <h2></h2> |
− | <br><br> | + | <p></p> |
− | <div | + | <div class="CSSTableGenerator" > |
− | <div class=" | + | <table > |
− | + | <tr> | |
− | </div> | + | <td> |
− | <div class=" | + | Sun. |
− | <div class=" | + | </td> |
− | + | <td > | |
− | <div class=" | + | Mon. |
− | <div class=" | + | </td> |
− | </ | + | <td> |
+ | Tue. | ||
+ | </td> | ||
+ | <td> | ||
+ | Wed. | ||
+ | </td> | ||
+ | <td > | ||
+ | Thu. | ||
+ | </td> | ||
+ | <td> | ||
+ | Fri. | ||
+ | </td> | ||
+ | <td> | ||
+ | Set. | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td > | ||
+ | <B>1</B><br><br> | ||
+ | PCR<br> | ||
+ | transform | ||
+ | </td> | ||
+ | <td> | ||
+ | <B>2</B><br><br> | ||
+ | </td> | ||
+ | <td> | ||
+ | <B>3</B><br><br> | ||
+ | </td> | ||
+ | <td > | ||
+ | <B>4</B><br><br> | ||
+ | </td> | ||
+ | <td> | ||
+ | <B>5</B><br><br> | ||
+ | </td> | ||
+ | <td> | ||
+ | <B>6</B><br><br> | ||
+ | </td> | ||
+ | <td> | ||
+ | <B>7</B><br><br> | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td > | ||
+ | <B>8</B><br><br> | ||
+ | </td> | ||
+ | <td> | ||
+ | <B>8</B><br><br> | ||
+ | </td> | ||
+ | <td> | ||
+ | <B>10</B><br><br> | ||
+ | </td> | ||
+ | <td > | ||
+ | <B>11</B><br><br> | ||
+ | </td> | ||
+ | <td> | ||
+ | <B>12</B><br><br> | ||
+ | </td> | ||
+ | <td> | ||
+ | <B>13</B><br><br> | ||
+ | </td> | ||
+ | <td > | ||
+ | <B>14</B><br><br> | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td > | ||
+ | <B>15</B><br><br> | ||
+ | </td> | ||
+ | <td> | ||
+ | <B>16</B><br><br> | ||
+ | </td> | ||
+ | <td> | ||
+ | <B>17</B><br><br> | ||
+ | </td> | ||
+ | <td > | ||
+ | <B>18</B><br><br> | ||
+ | </td> | ||
+ | <td> | ||
+ | <B>19</B><br><br> | ||
+ | </td> | ||
+ | <td> | ||
+ | <B>20</B><br><br> | ||
+ | </td> | ||
+ | <td > | ||
+ | <B>21</B><br><br> | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td > | ||
+ | <B>22</B><br><br> | ||
+ | </td> | ||
+ | <td> | ||
+ | <B>23</B><br><br> | ||
+ | </td> | ||
+ | <td> | ||
+ | <B>24</B><br><br> | ||
+ | </td> | ||
+ | <td > | ||
+ | <B>25</B><br><br> | ||
+ | </td> | ||
+ | <td> | ||
+ | <B>26</B><br><br> | ||
+ | </td> | ||
+ | <td> | ||
+ | <B>27</B><br><br> | ||
+ | </td> | ||
+ | <td > | ||
+ | <B>28</B><br><br> | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td > | ||
+ | <B>29</B><br><br> | ||
+ | </td> | ||
+ | <td> | ||
+ | <B>30</B><br><br> | ||
+ | </td> | ||
+ | <td> | ||
+ | <B>31</B><br><br> | ||
+ | </td> | ||
+ | <td > | ||
+ | |||
+ | </td> | ||
+ | <td> | ||
+ | |||
+ | </td> | ||
+ | <td> | ||
+ | |||
+ | </td> | ||
+ | <td > | ||
+ | |||
+ | </td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | <div id="tab2" class="tab_content"> | ||
+ | <h2></h2> | ||
+ | <p></p> | ||
+ | </div> | ||
+ | <div id="tab3" class="tab_content"> | ||
+ | <h2></h2> | ||
+ | <p></p> | ||
+ | </div> | ||
+ | <div id="tab4" class="tab_content"> | ||
+ | <h2></h2> | ||
+ | <p></p> | ||
+ | </div> | ||
+ | <div id="tab5" class="tab_content"> | ||
+ | <h2></h2> | ||
+ | <p></p> | ||
+ | </div> | ||
+ | <div id="tab6" class="tab_content"> | ||
+ | <h2></h2> | ||
+ | <p></p> | ||
+ | </div> | ||
+ | <div id="tab7" class="tab_content"> | ||
+ | <h2></h2> | ||
+ | <p></p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </body> | ||
</body> | </body> | ||
</html> | </html> | ||
{{Team:NCTU_Formosa/footer}} | {{Team:NCTU_Formosa/footer}} |
Revision as of 04:00, 11 September 2015
Lab note
Sun. | Mon. | Tue. | Wed. | Thu. | Fri. | Set. |
1 PCR transform |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
8 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |