Ianliu1997 (Talk | contribs) |
Ianliu1997 (Talk | contribs) |
||
Line 3: | Line 3: | ||
<html> | <html> | ||
− | + | <head> | |
− | < | + | <script> |
− | + | (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ | |
+ | (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), | ||
+ | m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) | ||
+ | })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); | ||
+ | |||
+ | ga('create', 'UA-5842101-4', 'auto'); | ||
+ | ga('send', 'pageview'); | ||
+ | </script> | ||
<style> | <style> | ||
/* Wrapper for the hp */ | /* Wrapper for the hp */ | ||
Line 32: | Line 39: | ||
} | } | ||
− | + | #main { | |
− | + | font-family: sans-serif; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | ||
− | + | /* contents */ | |
+ | #contents { | ||
+ | color: #333; | ||
+ | counter-reset: num; | ||
+ | padding: 20px 0; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | /* navi default style */ | ||
+ | input[name="tab"] { | ||
+ | -webkit-appearance: none;/*reset input radio*/ | ||
+ | -moz-appearance: none; | ||
+ | appearance: none; | ||
+ | border: 1px solid #39f; | ||
+ | -webkit-border-radius: 4px; | ||
+ | border-radius: 4px; | ||
+ | cursor: pointer; | ||
display: inline-block; | display: inline-block; | ||
− | + | font-size: 0.8em; | |
− | + | padding: 2px 4px; | |
− | + | text-align: center; | |
− | + | width: 30%; | |
− | + | } | |
− | + | ||
− | + | input[name="tab"]:checked { | |
− | + | background: #39f; | |
− | + | color: #fff; | |
− | + | } | |
− | + | ||
− | + | /* insert text */ | |
− | + | input[name="tab"]::after { | |
− | + | content: attr(title); | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | /* checked style */ | |
− | + | ||
− | + | input[name="tab"][value="0"]:checked ~ #main1, | |
− | + | ||
− | + | input[name="tab"][value="1"]:checked ~ #main2, | |
− | + | ||
− | + | input[name="tab"][value="2"]:checked ~ #main3 { | |
− | + | display: block; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | /* contents area */ | |
− | + | .main { | |
− | + | border-top: 1px solid #eee; | |
− | + | display: none;margin: 20px 0 0; | |
− | + | text-align: left; | |
− | + | width:100%; | |
− | + | height:100%; | |
− | + | scroll:auto; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | |||
</style> | </style> | ||
</head> | </head> | ||
Line 109: | Line 108: | ||
<div class=".igem_2017_hp_wrapper "> | <div class=".igem_2017_hp_wrapper "> | ||
<div class="container"> | <div class="container"> | ||
− | + | <div id="main"> | |
− | + | <div id="contents"> | |
− | + | <input type="radio" name="tab" value="0" title="選單1" checked> | |
− | + | <input type="radio" name="tab" value="1" title="選單2"> | |
− | + | <input type="radio" name="tab" value="2" title="選單3"> | |
− | + | <div id="main1" class="main"> | |
− | </ | + | |
− | + | <br/> | |
− | + | <a data-flickr-embed="true" target="_blank" href="https://www.flickr.com/photos/8265075@N02/22881822182/in/shares-38E6Pn/" title="IMG_3579"><img src="https://farm6.staticflickr.com/5703/22881822182_0255075254_z.jpg" width="640" height="427" alt="IMG_3579"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script> | |
− | + | </div> | |
− | + | <div id="main2" class="main"> | |
− | + | <br/> | |
− | + | <a data-flickr-embed="true" target="_blank" href="https://www.flickr.com/photos/8265075@N02/22428557369" title="IMG_3393"><img src="https://farm1.staticflickr.com/695/22428557369_e9b255dcd5_z.jpg" width="640" height="427" alt="IMG_3393"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script> | |
− | + | </div> | |
− | + | <div id="main3" class="main"> | |
− | + | ||
− | + | <br/> | |
− | + | <a data-flickr-embed="true" href="https://www.flickr.com/photos/8265075@N02/21949493092/in/datetaken/" title="IMG_2967"><img src="https://farm6.staticflickr.com/5683/21949493092_130c3307e9_z.jpg" width="640" height="427" alt="IMG_2967"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script> | |
− | + | ||
− | + | </div> | |
− | + | </div></div> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </ | + | |
</div> | </div> | ||
</div> | </div> | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 12:42, 29 September 2017