Team:USTC CHINA/practice/xyshao

From 2013.igem.org

(Difference between revisions)
(Created page with "<h1>USTC_China</h1> <h2>a glimpse of the lab</h2>")
Line 1: Line 1:
-
<h1>USTC_China</h1>
+
<html>
-
<h2>a glimpse of the lab</h2>
+
<style type="text/css">
 +
 
 +
/* hiding the top section*/
 +
#top-section{
 +
  height:0px;
 +
    border:none;
 +
    width:980px;
 +
    margin:0 auto;
 +
    padding:0 0 0 0;
 +
    background-color:yellow;
 +
    overflow:hide;
 +
 
 +
}
 +
#p-logo{display:none;}
 +
#search-controls{display:none;}
 +
#top{display:none;}
 +
.firstHeading{display:none;}
 +
/* end of hiding the top section*/
 +
 
 +
/*hiding the footer-box*/
 +
#footer-box{display:none;}
 +
#catlinks{display:none;}
 +
/*end of hiding the footer book*/
 +
 
 +
</style>
 +
 
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 +
<script type="text/javascript">
 +
$(function(){
 +
//获取要定位元素距离浏览器顶部的距离
 +
var navH = $(".nav").offset().top;
 +
//滚动条事件
 +
$(window).scroll(function(){
 +
//获取滚动条的滑动距离
 +
var scroH = $(this).scrollTop();
 +
//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定
 +
if(scroH>=navH){
 +
$(".nav").css({"position":"fixed","top":0,"left":"20%"});
 +
}else if(scroH<navH){
 +
$(".nav").css({"position":"static","margin":"0 auto"});
 +
}
 +
console.log(scroH==navH);
 +
})
 +
})
 +
</script>
 +
 
 +
<link rel="stylesheet" href="jQuery%20Timelinr%200.9.53%20-%20Dando%20vida%20al%20tiempo_files/style.css" media="screen">
 +
 +
<script async="" type="text/javascript" src="jQuery%20Timelinr%200.9.53%20-%20Dando%20vida%20al%20tiempo_files/woopra.js"></script><script src="jQuery%20Timelinr%200.9.53%20-%20Dando%20vida%20al%20tiempo_files/ga.js" async="" type="text/javascript"></script><script src="jQuery%20Timelinr%200.9.53%20-%20Dando%20vida%20al%20tiempo_files/jquery_002.js"></script>
 +
<script src="jQuery%20Timelinr%200.9.53%20-%20Dando%20vida%20al%20tiempo_files/jquery.js"></script>
 +
<script>
 +
$(function(){
 +
$().timelinr({
 +
arrowKeys: 'true'
 +
})
 +
});
 +
</script>
 +
 
 +
<style type="text/css">
 +
*{ margin:0px; padding:0px;}
 +
 
 +
.top{
 +
height:90px;
 +
}
 +
 +
.nav{
 +
height:50px;
 +
margin:0 auto;
 +
}
 +
 +
.cl02,.cl03,.cl04,.cl05,.cl06,.cl07,.cl08{
 +
height:300px;
 +
}
 +
.cl01{
 +
height::350px;
 +
}
 +
.cl02{
 +
}
 +
.cl03{
 +
}
 +
.top #bi {
 +
position:absolute;
 +
left:20%;
 +
width:60%;
 +
background-repeat:no-repeat;
 +
background-image:url(jQuery%20Timelinr%200.9.53%20-%20Dando%20vida%20al%20tiempo_files/wiki.jpg);
 +
}
 +
#menu {
 +
background-image:url(jQuery%20Timelinr%200.9.53%20-%20Dando%20vida%20al%20tiempo_files/%E6%9C%AA%E6%A0%87%E9%A2%98-1.jpg);
 +
background-repeat:no-repeat;
 +
    width:60%;
 +
z-index:1;
 +
}
 +
.nav center #menu p{
 +
font-size:24px;
 +
color:#000;
 +
text-shadow: #FFF 3px 3px 2px;
 +
}
 +
#abstract {
 +
position:absolute;
 +
left:20%;
 +
width:60%;
 +
height:300px;
 +
font-size: 36px;
 +
background-image:url(jQuery%20Timelinr%200.9.53%20-%20Dando%20vida%20al%20tiempo_files/%E6%9C%AA%E6%A0%87%E9%A2%98-4.jpg);
 +
}
 +
#sponsor {
 +
position:absolute;
 +
left:20%;
 +
width:60%;
 +
height:300px;
 +
font-size: 36px;
 +
color:#FCE00C;
 +
background-image:url(jQuery%20Timelinr%200.9.53%20-%20Dando%20vida%20al%20tiempo_files/%E6%9C%AA%E6%A0%87%E9%A2%98-3.jpg);
 +
}
 +
#bottom {
 +
height:30px;
 +
}
 +
</style>
 +
 
 +
<body>
 +
<div class="top">
 +
<div class="top" id="bi"></div>
 +
</div>
 +
<div class="nav">
 +
  <center><div class="nav" id="menu">
 +
  <p>link1 link2 link3 link4</p>
 +
  </div></center>
 +
</div>
 +
<div class="cl01">
 +
  <div id="timeline">
 +
<ul style="width: 1000px; margin-left: 50px;" id="dates">
 +
<li><a class="" href="#1900">1900</a></li>
 +
<li><a class="" href="#1930">1930</a></li>
 +
<li><a href="#1944">1944</a></li>
 +
<li><a class="selected" href="#1950">1950</a></li>
 +
<li><a href="#1971">1971</a></li>
 +
<li><a href="#1977">1977</a></li>
 +
<li><a href="#1989">1989</a></li>
 +
<li><a href="#1999">1999</a></li>
 +
<li><a href="#2001">2001</a></li>
 +
<li><a href="#2011">2011</a></li>
 +
</ul>
 +
<ul style="width: 8000px; margin-left: -2400px;" id="issues">
 +
<li class="" style="opacity: 0.2;" id="1900">
 +
<img src="jQuery%20Timelinr%200.9.53%20-%20Dando%20vida%20al%20tiempo_files/1.png" height="256" width="256">
 +
<h1>1900</h1>
 +
<p>Donec semper quam scelerisque tortor dictum gravida. In hac
 +
habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem
 +
diam ultrices mauris, eu consequat purus metus eu velit. Proin metus
 +
odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est
 +
sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu
 +
eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
 +
</li>
 +
<li class="" style="opacity: 0.2;" id="1930">
 +
<img src="jQuery%20Timelinr%200.9.53%20-%20Dando%20vida%20al%20tiempo_files/2.png" height="256" width="256">
 +
<h1>1930</h1>
 +
<p>Donec semper quam scelerisque tortor dictum gravida. In hac
 +
habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem
 +
diam ultrices mauris, eu consequat purus metus eu velit. Proin metus
 +
odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est
 +
sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu
 +
eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
 +
</li>
 +
<li style="opacity: 0.2;" id="1944">
 +
<img src="jQuery%20Timelinr%200.9.53%20-%20Dando%20vida%20al%20tiempo_files/3.png" height="256" width="256">
 +
<h1>1944</h1>
 +
<p>Donec semper quam scelerisque tortor dictum gravida. In hac
 +
habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem
 +
diam ultrices mauris, eu consequat purus metus eu velit. Proin metus
 +
odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est
 +
sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu
 +
eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
 +
</li>
 +
<li class="selected" style="opacity: 1;" id="1950">
 +
<img src="jQuery%20Timelinr%200.9.53%20-%20Dando%20vida%20al%20tiempo_files/4.png" height="256" width="256">
 +
<h1>1950</h1>
 +
<p>Donec semper quam scelerisque tortor dictum gravida. In hac
 +
habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem
 +
diam ultrices mauris, eu consequat purus metus eu velit. Proin metus
 +
odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est
 +
sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu
 +
eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
 +
</li>
 +
<li style="opacity: 0.2;" id="1971">
 +
<img src="jQuery%20Timelinr%200.9.53%20-%20Dando%20vida%20al%20tiempo_files/5.png" height="256" width="256">
 +
<h1>1971</h1>
 +
<p>Donec semper quam scelerisque tortor dictum gravida. In hac
 +
habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem
 +
diam ultrices mauris, eu consequat purus metus eu velit. Proin metus
 +
odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est
 +
sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu
 +
eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
 +
</li>
 +
<li style="opacity: 0.2;" id="1977">
 +
<img src="jQuery%20Timelinr%200.9.53%20-%20Dando%20vida%20al%20tiempo_files/6.png" height="256" width="256">
 +
<h1>1977</h1>
 +
<p>Donec semper quam scelerisque tortor dictum gravida. In hac
 +
habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem
 +
diam ultrices mauris, eu consequat purus metus eu velit. Proin metus
 +
odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est
 +
sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu
 +
eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
 +
</li>
 +
<li style="opacity: 0.2;" id="1989">
 +
<img src="jQuery%20Timelinr%200.9.53%20-%20Dando%20vida%20al%20tiempo_files/7.png" height="256" width="256">
 +
<h1>1989</h1>
 +
<p>Donec semper quam scelerisque tortor dictum gravida. In hac
 +
habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem
 +
diam ultrices mauris, eu consequat purus metus eu velit. Proin metus
 +
odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est
 +
sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu
 +
eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
 +
</li>
 +
<li style="opacity: 0.2;" id="1999">
 +
<img src="jQuery%20Timelinr%200.9.53%20-%20Dando%20vida%20al%20tiempo_files/8.png" height="256" width="256">
 +
<h1>1999</h1>
 +
<p>Donec semper quam scelerisque tortor dictum gravida. In hac
 +
habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem
 +
diam ultrices mauris, eu consequat purus metus eu velit. Proin metus
 +
odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est
 +
sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu
 +
eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
 +
</li>
 +
<li style="opacity: 0.2;" id="2001">
 +
<img src="jQuery%20Timelinr%200.9.53%20-%20Dando%20vida%20al%20tiempo_files/9.png" height="256" width="256">
 +
<h1>2001</h1>
 +
<p>Donec semper quam scelerisque tortor dictum gravida. In hac
 +
habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem
 +
diam ultrices mauris, eu consequat purus metus eu velit. Proin metus
 +
odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est
 +
sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu
 +
eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
 +
</li>
 +
<li style="opacity: 0.2;" id="2011">
 +
<img src="jQuery%20Timelinr%200.9.53%20-%20Dando%20vida%20al%20tiempo_files/10.png" height="256" width="256">
 +
<h1>2011</h1>
 +
<p>Donec semper quam scelerisque tortor dictum gravida. In hac
 +
habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem
 +
diam ultrices mauris, eu consequat purus metus eu velit. Proin metus
 +
odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est
 +
sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu
 +
eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
 +
</li>
 +
</ul>
 +
<div id="grad_left"></div>
 +
<div id="grad_right"></div>
 +
<a href="#" id="next">+</a>
 +
<a style="display: block;" href="#" id="prev">-</a>
 +
</div>
 +
  <script type="text/javascript">
 +
  var _gaq = _gaq || [];
 +
  _gaq.push(['_setAccount', 'UA-79823-1']);
 +
  _gaq.push(['_trackPageview']);
 +
  (function() {
 +
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 +
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 +
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 +
  })();
 +
</script>
 +
  <script type="text/javascript">
 +
function woopraReady(tracker) {
 +
    tracker.setDomain('csslab.cl');
 +
    tracker.setIdleTimeout(300000);
 +
    tracker.track();
 +
    return false;
 +
}
 +
(function() {
 +
    var wsc = document.createElement('script');
 +
    wsc.src = document.location.protocol+'//static.woopra.com/js/woopra.js';
 +
    wsc.type = 'text/javascript';
 +
    wsc.async = true;
 +
    var ssc = document.getElementsByTagName('script')[0];
 +
    ssc.parentNode.insertBefore(wsc, ssc);
 +
})();
 +
</script>
 +
</div>
 +
 
 +
<div class="cl02">
 +
  <div id="abstract">Abstract</div>
 +
</div>
 +
<div class="cl03">
 +
  <div id="sponsor">sponsor</div>
 +
</div>
 +
<div id="bottom"></div>
 +
</body>
 +
 
 +
</html>

Revision as of 13:03, 2 August 2013

  • 1900

    Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.

  • 1930

    Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.

  • 1944

    Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.

  • 1950

    Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.

  • 1971

    Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.

  • 1977

    Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.

  • 1989

    Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.

  • 1999

    Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.

  • 2001

    Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.

  • 2011

    Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.

Abstract

Retrieved from "http://2013.igem.org/Team:USTC_CHINA/practice/xyshao"