Team:HZAU-China/Human practice
From 2013.igem.org
(Difference between revisions)
(Created page with "{{:Team:HZAU-China/background-head}} {{:Team:HZAU-China/background-footer}} <br/>") |
|||
Line 1: | Line 1: | ||
{{:Team:HZAU-China/background-head}} | {{:Team:HZAU-China/background-head}} | ||
+ | <html> | ||
+ | <style> | ||
+ | #background{ | ||
+ | background-color: #EDFFFF; | ||
+ | float: left; | ||
+ | min-height: 800px; | ||
+ | width: 960px; | ||
+ | } | ||
+ | #sidebar { | ||
+ | background-color:transparent; | ||
+ | clear: both; | ||
+ | float: left; | ||
+ | height: auto; | ||
+ | width: 220px; | ||
+ | padding-top: 5px; | ||
+ | padding-left: 10px; | ||
+ | } | ||
+ | #paragraphs { | ||
+ | background-color: #EDFFFF; | ||
+ | border: 3px solid #A1FFFF; | ||
+ | float: right; | ||
+ | height: auto; | ||
+ | margin-bottom: 5px; | ||
+ | margin-top: 5px; | ||
+ | padding-bottom: 5px; | ||
+ | padding-top:10px; | ||
+ | width: 710px; | ||
+ | } | ||
+ | </style> | ||
+ | <body> | ||
+ | <div id="background"> | ||
+ | <div id="sidebar"> | ||
+ | <style> | ||
+ | *{margin:0px;padding:0px;} | ||
+ | ul.menu_scroll{z-index:100;padding:10px;margin:0 auto;padding-bottom: 5px;top:20px;position:fixed;width:100%;} | ||
+ | ul.menu:after{content:"";display:block;height:0;clear:both;visibility:hidden;} | ||
+ | ul.menu, | ||
+ | ul.menu ul {padding:0;margin:0;list-style:none;position:;width:200px;background:#ddd;font-family:arial, sans-serif;} | ||
+ | ul.menu {z-index:100;padding:10px;margin:0 auto;padding-bottom: 5px;} | ||
+ | ul.menu ul {z-index:50; | ||
+ | -webkit-transition: 0.5s; | ||
+ | -moz-transition: 0.5s; | ||
+ | -ms-transition: 0.5s; | ||
+ | -o-transition: 0.5s; | ||
+ | transition: 0.5s; | ||
+ | } | ||
+ | ul.menu li {line-height:30px;position:relative;text-indent:10px;} | ||
+ | ul.menu > li {margin-top:2px;font-size:12px;} | ||
+ | ul.menu > li a {font:normal 16px/29px arial, sans-serif;color:#fff;text-decoration:none;} | ||
+ | ul.menu label.open {display:block;background:#c00 no-repeat 170px 12px;line-height:30px;position:relative;z- | ||
+ | index:100;font:normal 12px/30px arial, sans-serif;color:#fff;border-radius:10px 10px 0 0;} | ||
+ | ul.menu label.open b {color:#ff0;} | ||
+ | ul.menu span {display:block;background:#c00;line-height:30px;position:relative;z-index:100;font-size: 18px;} | ||
+ | ul.menu label img {position:absolute;left:0;top:0;width:100%;height:30px;} | ||
+ | ul.menu ul li {margin-top:-30px; | ||
+ | -webkit-transition: 0.5s; | ||
+ | -moz-transition: 0.5s; | ||
+ | -ms-transition: 0.5s; | ||
+ | -o-transition: 0.5s; | ||
+ | transition: 0.5s; | ||
+ | } | ||
+ | ul.menu ul li a {display:block;font:normal 16px/29px arial, sans-serif;color:#000;background:#ccc;} | ||
+ | ul.menu ul li a:hover {background:#ddd;} | ||
+ | ul.menu input {position:absolute;left:-9999px;} | ||
+ | ul.menu li input:checked + label {background:#069;} | ||
+ | ul.menu li input:checked ~ ul {background:#ccc;padding-bottom:10px;} | ||
+ | ul.menu li input:checked ~ ul li {margin-top:0;} | ||
+ | ul.menu label.close {display:block;width:200px;height:30px;background:transparent url("/jscss/demoimg/201208/u-arrow.gif") | ||
+ | no-repeat 170px 12px;line-height:30px;position:relative;left:0;z-index:90;margin-top:-30px} | ||
+ | ul.menu input.tabs:checked ~ label.close {display:block;z-index:200;} | ||
+ | ul.menu input.close:checked + label.close {display:none;} | ||
+ | ul.menu input.close:checked ~ ul {background:#ddd;padding-bottom:0;} | ||
+ | ul.menu input.close:checked ~ ul li {margin-top:-30px;} | ||
+ | </style> | ||
+ | <script src="/ajaxjs/jquery-1.7.2.min.js" type="text/javascript"></script> | ||
+ | <script type="text/javascript"> | ||
+ | $(document).ready(function(){ | ||
+ | var topMain=$("#sidebar").height()+100//是头部的高度加头部与nav导航之间的距离 | ||
+ | var menu=$(".menu"); | ||
+ | $(window).scroll(function(){ | ||
+ | if ($(window).scrollTop()>topMain){//如果滚动条顶部的距离大于topMain则就nav导航就添加类.nav_scroll,否则就移除 | ||
+ | menu.addClass("menu_scroll"); | ||
+ | }else{ | ||
+ | menu.removeClass("menu_scroll"); | ||
+ | } | ||
+ | }); | ||
+ | }) | ||
+ | </script> | ||
+ | <body> | ||
+ | <ul class="menu"> | ||
+ | <li><a href="#"><span>Meeting with WHU and HUST</span></a></li> | ||
+ | <li><a href="#"><span>Visit to Wuhan Institute of Biological Products</span></a></li> | ||
+ | <li><a href="#"><span>To make IGEM and Synthetic Biology Universal</span></a></li> | ||
+ | <li><a href="#"><span>Understanding the Safety assessment of GM rice</span></a></li> | ||
+ | </body> | ||
+ | </div> | ||
+ | <div id="paragraphs"> | ||
+ | <p> | ||
+ | <br> | ||
+ | </p> | ||
+ | <center> | ||
+ | <span style="font-size:46px;font-family:Cambria;margin-top:10px;line-height:80%">Human practice</span> | ||
+ | </center> | ||
+ | <p> | ||
+ | <br> | ||
+ | </p> | ||
+ | <a name="1"> | ||
+ | <h1>Meeting with WHU and HUST</h1> | ||
+ | </a> | ||
+ | <p></p> | ||
+ | <a name=2"> | ||
+ | <h1>Visit to Wuhan Institute of Biological Products</h1> | ||
+ | </a> | ||
+ | <p></p> | ||
+ | <a name="3"> | ||
+ | <h1>To make IGEM and Synthetic Biology Universal</h1> | ||
+ | </a> | ||
+ | <p></p> | ||
+ | <a name="4"> | ||
+ | <h1>Understanding the Safety assessment of GM rice</h1> | ||
+ | </a> | ||
+ | <p></p> | ||
- | + | </div> | |
- | + | </div> | |
- | + | </body> | |
- | + | </html> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
{{:Team:HZAU-China/background-footer}} | {{:Team:HZAU-China/background-footer}} | ||
<br/> | <br/> |
Revision as of 04:53, 25 July 2013