|
|
| (13 intermediate revisions not shown) |
| 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: 16px;}
| |
| - | 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/> |
"
