Difference between revisions of "Team:OUC-China"

Line 2: Line 2:
 
<head>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://2015.igem.org/common/jquery-latest.min.js"></script>
 
<script type="text/javascript">
 
//Here reference: mouse wheel mousewheel plugin
 
!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a:a(jQuery)}(function(a){function b(b){var g=b||window.event,h=i.call(arguments,1),j=0,l=0,m=0,n=0,o=0,p=0;if(b=a.event.fix(g),b.type="mousewheel","detail"in g&&(m=-1*g.detail),"wheelDelta"in g&&(m=g.wheelDelta),"wheelDeltaY"in g&&(m=g.wheelDeltaY),"wheelDeltaX"in g&&(l=-1*g.wheelDeltaX),"axis"in g&&g.axis===g.HORIZONTAL_AXIS&&(l=-1*m,m=0),j=0===m?l:m,"deltaY"in g&&(m=-1*g.deltaY,j=m),"deltaX"in g&&(l=g.deltaX,0===m&&(j=-1*l)),0!==m||0!==l){if(1===g.deltaMode){var q=a.data(this,"mousewheel-line-height");j*=q,m*=q,l*=q}else if(2===g.deltaMode){var r=a.data(this,"mousewheel-page-height");j*=r,m*=r,l*=r}if(n=Math.max(Math.abs(m),Math.abs(l)),(!f||f>n)&&(f=n,d(g,n)&&(f/=40)),d(g,n)&&(j/=40,l/=40,m/=40),j=Math[j>=1?"floor":"ceil"](j/f),l=Math[l>=1?"floor":"ceil"](l/f),m=Math[m>=1?"floor":"ceil"](m/f),k.settings.normalizeOffset&&this.getBoundingClientRect){var s=this.getBoundingClientRect();o=b.clientX-s.left,p=b.clientY-s.top}return b.deltaX=l,b.deltaY=m,b.deltaFactor=f,b.offsetX=o,b.offsetY=p,b.deltaMode=0,h.unshift(b,j,l,m),e&&clearTimeout(e),e=setTimeout(c,200),(a.event.dispatch||a.event.handle).apply(this,h)}}function c(){f=null}function d(a,b){return k.settings.adjustOldDeltas&&"mousewheel"===a.type&&b%120===0}var e,f,g=["wheel","mousewheel","DOMMouseScroll","MozMousePixelScroll"],h="onwheel"in document||document.documentMode>=9?["wheel"]:["mousewheel","DomMouseScroll","MozMousePixelScroll"],i=Array.prototype.slice;if(a.event.fixHooks)for(var j=g.length;j;)a.event.fixHooks[g[--j]]=a.event.mouseHooks;var k=a.event.special.mousewheel={version:"3.1.12",setup:function(){if(this.addEventListener)for(var c=h.length;c;)this.addEventListener(h[--c],b,!1);else this.onmousewheel=b;a.data(this,"mousewheel-line-height",k.getLineHeight(this)),a.data(this,"mousewheel-page-height",k.getPageHeight(this))},teardown:function(){if(this.removeEventListener)for(var c=h.length;c;)this.removeEventListener(h[--c],b,!1);else this.onmousewheel=null;a.removeData(this,"mousewheel-line-height"),a.removeData(this,"mousewheel-page-height")},getLineHeight:function(b){var c=a(b),d=c["offsetParent"in a.fn?"offsetParent":"parent"]();return d.length||(d=a("body")),parseInt(d.css("fontSize"),10)||parseInt(c.css("fontSize"),10)||16},getPageHeight:function(b){return a(b).height()},settings:{adjustOldDeltas:!0,normalizeOffset:!0}};a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})});
 
 
$(function(){
 
var i=0;
 
var $btn = $('.section-btn li'),
 
$wrap = $('.section-wrap'),
 
$arrow = $('.arrow');
 
 
/*Current page assignment*/
 
function up(){i++;if(i==$btn.length){i=0};}
 
function down(){i--;if(i<0){i=$btn.length-1};}
 
 
/*Page slide*/
 
function run(){
 
$btn.eq(i).addClass('on').siblings().removeClass('on');
 
$wrap.attr("class","section-wrap").addClass(function() { return "put-section-"+i; }).find('.section').eq(i).find('.title').addClass('active');
 
};
 
 
/*Right button click*/
 
$btn.each(function(index) {
 
$(this).click(function(){
 
i=index;
 
run();
 
})
 
});
 
 
/*Click the page button*/
 
$arrow.one('click',go);
 
function go(){
 
up();run();
 
setTimeout(function(){$arrow.one('click',go)},1000)
 
};
 
 
/*Response mouse*/
 
$wrap.one('mousewheel',mouse_);
 
function mouse_(event){
 
if(event.deltaY<0) {up()}
 
else{down()}
 
run();
 
setTimeout(function(){$wrap.one('mousewheel',mouse_)},1000)
 
};
 
 
/*Response keyboard keys*/
 
$(document).one('keydown',k);
 
function k(event){
 
var e=event||window.event;
 
var key=e.keyCode||e.which||e.charCode;
 
switch(key) {
 
case 38: down();run();
 
break;
 
case 40: up();run();
 
break;
 
};
 
setTimeout(function(){$(document).one('keydown',k)},1000);
 
}
 
});
 
</script>
 
 
<style>
 
<style>
 
/* hiding the top section*/
 
/* hiding the top section*/
Line 163: Line 103:
 
<style>
 
<style>
  
body{
+
<style>
-webkit-text-size-adjust:none;
+
body{color:#222;-webkit-text-size-adjust:none;}
margin:0px;}
+
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl, dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,iframe{margin:0; padding:0;}
h1,h2,h3,h4,h5,h6{
+
h1,h2,h3,h4,h5,h6{font-size:100%;}
font-size:62.5%;
+
body,button,input,select,textarea {font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self;font-size:62.5%; line-height:1.5;}
}
+
ol,ul{list-style:none;}
body,button,input,select,textarea {
+
font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self;
+
html,body{ width:100%; height:100%; overflow:hidden;}
font-size:62.5%;  
+
.section-wrap{ width:100%;height:100%;overflow:visible;transition:transform 1s cubic-bezier(0.86,0,0.03,1);-webkit-transition:-webkit-transform 1s cubic-bezier(0.86,0,0.03,1);}
line-height:1.5;
+
.section-wrap .section{ position:relative; width:100%; height:100%; background-position:center center; background-repeat:no-repeat;}
}
+
.section-wrap .section .title{width:100%;position:absolute;top:10%;color:#fff;font-size:2.4em;text-align:center;}
ol,ul{
+
.section-wrap .section .title p{ padding:0 4%;opacity:0}
list-style:none;
+
.section-wrap .section .title.active .tit{ opacity:1;transform:translateY(-25px);-webkit-transform:translateY(-25px);transition:all 2s cubic-bezier(0.86,0,0.8,1);-webkit-transition:all 2s cubic-bezier(0.86,0,0.8,1);}
}
+
.section-wrap .section-1{ background-color:#337ab7}
html,body{  
+
.section-wrap .section-2{ background-color:#5cb85c}
    width:100%;  
+
.section-wrap .section-3{ background-color:#5bc0de}
height:100%;
+
.section-wrap .section-4{ background-color:#f0ad4e}
overflow:hidden;
+
.section-wrap .section-5{ background-color:#d9534f}
}
+
.put-section-0{ transform:translateY(0);-webkit-transform:translateY(0);}
+
.put-section-1{ transform:translateY(-100%);-webkit-transform:translateY(-100%);}
.indexNavBox{ width:80%; height:110px; margin-left:10%; margin-top:-50px; border:#3fb8ab solid 1px; position:relative; color:#FFF;}
+
.put-section-2{ transform:translateY(-200%);-webkit-transform:translateY(-200%);}
.indexNavLogo{width:9%; height:45px; margin-left:10%; margin-top:28px ;background-image:url(https://static.igem.org/mediawiki/2015/f/fd/OUC-China-logo.png); }
+
.put-section-3{ transform:translateY(-300%);-webkit-transform:translateY(-300%);}
.indexNavTxt{ font-size:1.1rem; width:64%; height:45px; right:6%;top:25px; position:absolute;}
+
.put-section-4{ transform:translateY(-400%);-webkit-transform:translateY(-400%);}
.indexNavBox a{ color:#FFF; text-decoration:none;}
+
.section-btn{ width:14px;position:fixed;right:4%;top:50%;}
.indexNavBox a:hover{color:#f4dc76;}
+
.section-btn li{ width:14px;height:14px;cursor:pointer;text-indent:-9999px;border-radius:50%;-webkit-border-radius:50%;margin-bottom:12px; background:#BD362F;text-align:center; color:#fff; onsor:pointer;}
 +
.section-btn li.on{ background:#fff}
 +
.arrow{ opacity:1;animation:arrow 3s cubic-bezier(0.5,0,0.1,1) infinite;-webkit-animation:arrow 3s cubic-bezier(0.5,0,0.1,1) infinite;transform:rotate(-90deg);-webkit-transform:rotate(-90deg); position:absolute;bottom:10px;left:50%;margin-left:-30px;width:60px;height:60px;border-radius:100%;-webkit-border-radius:100%;line-height:60px;text-align:center;font-size:20px;color:#fff;border:1px solid #fff;cursor:pointer;overflow:hidden;}
 +
.arrow:hover{ animation-play-state:paused;-webkit-animation-play-state:paused;}
 +
@keyframes arrow{ %0,%100{bottom:10px; opacity:1;} 50%{bottom:50px; opacity:.5} }
 +
@-webkit-keyframes arrow{ %0,%100{bottom:10px; opacity:1;} 50%{bottom:50px; opacity:.5} }
 +
</style>
  
.sectionTxtBox2{ width:70%; height:450px; border:#00C 2px solid; position:absolute; margin-left:15%; margin-top:60px;}
+
</head>
.bg100{ background-size:100% 100%;}
+
.sectionTittle{ width:70%; height:45px; font-size:1.8rem; position:relative; color:#FFF;}
+
.sectionTxt2{width:70%; height:45px; font-size:1.1rem; position:absolute; margin-top:30px; padding-left:10px; color:#FFF;}
+
  
.sectionTxtBox3{ width:70%; height:450px; border:#00C 2px solid; position:absolute; margin-left:15%; top:60px; color:#FFF;}
+
<body><section class="section-wrap">
.sectionTxt3{width:70%; height:45px; font-size:1.1rem; position:absolute; margin-top:30px; padding-left:10px;}
+
<div class="section section-1">
+
<div class="title active">
.sectionTxtBox4{ width:70%; height:450px; border:#00C 2px solid; position:absolute; margin-left:15%; top:60px; color:#FFF;}
+
<p class="tit">CSS3 纵向滚屏翻页,支持键盘,鼠标滚轮操作</p>
.sectionTxt4{width:70%; height:45px; font-size:1.1rem; position:absolute; margin-top:30px; padding-left:10px;}
+
</div>
 +
</div>
 +
<div class="section section-2">
 +
<div class="title">
 +
<p class="tit">随便写写意思下!</p>
 +
</div>
 +
</div>
 +
<div class="section section-3">
 +
<div class="title">
 +
<p class="tit">随便写写意思下</p>
 +
</div>
 +
</div>
 +
<div class="section section-4">
 +
<div class="title">
 +
<p class="tit">随便写写意思下</p>
 +
</div>
 +
</div>
 +
<div class="section section-5">
 +
<div class="title">
 +
<p class="tit">随便写写意思下</p>
 +
</div>
 +
</div>
 +
</section>
 +
<ul class="section-btn">
 +
  <li class="on"></li>
 +
  <li></li>
 +
  <li></li>
 +
  <li></li>
 +
  <li></li>
 +
</ul>
 +
<div class="arrow">&laquo;</div>
  
.sectionTxtBox5{ width:70%; height:450px; border:#00C 2px solid; position:absolute; margin-left:15%; top:60px; color:#FFF;}
+
<script type="text/javascript" src="https://2015.igem.org/common/jquery-latest.min.js"></script>
.sectionTxt5{width:70%; height:45px; font-size:1.1rem; position:absolute; margin-top:30px; padding-left:10px;}
+
<script type="text/javascript">
.bottom{ height:10%; width:45%; margin-left:30%;top:50px;background-image:url(images/OUC-China-sponsor.png); background-size:100% 100%; position:absolute;}
+
//此处引用:鼠标滚轮mousewheel插件
.bottomTxt{ height:10%; width:30%; margin-left:40%;top:120px; position:absolute;}
+
!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a:a(jQuery)}(function(a){function b(b){var g=b||window.event,h=i.call(arguments,1),j=0,l=0,m=0,n=0,o=0,p=0;if(b=a.event.fix(g),b.type="mousewheel","detail"in g&&(m=-1*g.detail),"wheelDelta"in g&&(m=g.wheelDelta),"wheelDeltaY"in g&&(m=g.wheelDeltaY),"wheelDeltaX"in g&&(l=-1*g.wheelDeltaX),"axis"in g&&g.axis===g.HORIZONTAL_AXIS&&(l=-1*m,m=0),j=0===m?l:m,"deltaY"in g&&(m=-1*g.deltaY,j=m),"deltaX"in g&&(l=g.deltaX,0===m&&(j=-1*l)),0!==m||0!==l){if(1===g.deltaMode){var q=a.data(this,"mousewheel-line-height");j*=q,m*=q,l*=q}else if(2===g.deltaMode){var r=a.data(this,"mousewheel-page-height");j*=r,m*=r,l*=r}if(n=Math.max(Math.abs(m),Math.abs(l)),(!f||f>n)&&(f=n,d(g,n)&&(f/=40)),d(g,n)&&(j/=40,l/=40,m/=40),j=Math[j>=1?"floor":"ceil"](j/f),l=Math[l>=1?"floor":"ceil"](l/f),m=Math[m>=1?"floor":"ceil"](m/f),k.settings.normalizeOffset&&this.getBoundingClientRect){var s=this.getBoundingClientRect();o=b.clientX-s.left,p=b.clientY-s.top}return b.deltaX=l,b.deltaY=m,b.deltaFactor=f,b.offsetX=o,b.offsetY=p,b.deltaMode=0,h.unshift(b,j,l,m),e&&clearTimeout(e),e=setTimeout(c,200),(a.event.dispatch||a.event.handle).apply(this,h)}}function c(){f=null}function d(a,b){return k.settings.adjustOldDeltas&&"mousewheel"===a.type&&b%120===0}var e,f,g=["wheel","mousewheel","DOMMouseScroll","MozMousePixelScroll"],h="onwheel"in document||document.documentMode>=9?["wheel"]:["mousewheel","DomMouseScroll","MozMousePixelScroll"],i=Array.prototype.slice;if(a.event.fixHooks)for(var j=g.length;j;)a.event.fixHooks[g[--j]]=a.event.mouseHooks;var k=a.event.special.mousewheel={version:"3.1.12",setup:function(){if(this.addEventListener)for(var c=h.length;c;)this.addEventListener(h[--c],b,!1);else this.onmousewheel=b;a.data(this,"mousewheel-line-height",k.getLineHeight(this)),a.data(this,"mousewheel-page-height",k.getPageHeight(this))},teardown:function(){if(this.removeEventListener)for(var c=h.length;c;)this.removeEventListener(h[--c],b,!1);else this.onmousewheel=null;a.removeData(this,"mousewheel-line-height"),a.removeData(this,"mousewheel-page-height")},getLineHeight:function(b){var c=a(b),d=c["offsetParent"in a.fn?"offsetParent":"parent"]();return d.length||(d=a("body")),parseInt(d.css("fontSize"),10)||parseInt(c.css("fontSize"),10)||16},getPageHeight:function(b){return a(b).height()},settings:{adjustOldDeltas:!0,normalizeOffset:!0}};a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})});
.bottomTxt i { font-size:14px; color:#3fb8ab; text-align:center; font-style:inherit;}
+
.bottomFb{ height:34px; width:34px; position:absolute; top:115px; margin-left:60%; }
+
$(function(){
.section-wrap{
+
var i=0;
    width:100%;
+
var $btn = $('.section-btn li'),
height:100%;
+
$wrap = $('.section-wrap'),
overflow:visible;
+
$arrow = $('.arrow');
transition:transform 1s cubic-bezier(0.05,0,0.005,1);
+
-webkit-transition:-webkit-transform 1s cubic-bezier(0.86,0,0.03,1);
+
/*当前页面赋值*/
}
+
function up(){i++;if(i==$btn.length){i=0};}
.section-wrap .section{  
+
function down(){i--;if(i<0){i=$btn.length-1};}
    position:relative;
+
width:100%; height:100%;
+
/*页面滑动*/
background-position:center center;
+
function run(){
background-repeat:no-repeat;
+
$btn.eq(i).addClass('on').siblings().removeClass('on');
}
+
$wrap.attr("class","section-wrap").addClass(function() { return "put-section-"+i; }).find('.section').eq(i).find('.title').addClass('active');
.section-wrap .section .title{
+
};
width:100%;position:absolute;
+
top:10%;color:#CF0;
+
/*右侧按钮点击*/
font-size:2.4em;
+
$btn.each(function(index) {
text-align:center;
+
$(this).click(function(){
}
+
i=index;
.section-wrap .section .title p{
+
run();
    padding:0 4%;
+
})
opacity:0
+
});
}
+
.section-wrap .section .title.active .tit{
+
/*翻页按钮点击*/
    opacity:1;
+
$arrow.one('click',go);
transform:translateY(-60px);
+
function go(){
-webkit-transform:translateY(-60px);
+
up();run();
transition:all 2s cubic-bezier(0.86,0,0.8,1);
+
setTimeout(function(){$arrow.one('click',go)},1000)
-webkit-transition:all 2s cubic-bezier(0.86,0,0.8,1);
+
};
}
+
 
+
/*响应鼠标*/
.section-wrap .section-1{ background-image:url(https://static.igem.org/mediawiki/2015/d/de/OUC-China-home1.jpg); background-size:100% 100%;}
+
$wrap.one('mousewheel',mouse_);
.section-wrap .section-2{ background-image:url(https://static.igem.org/mediawiki/2015/e/e5/Team-OUC-China-home2.jpg); background-size:100% 100%;}
+
function mouse_(event){
.section-wrap .section-3{ background-image:url(https://static.igem.org/mediawiki/2015/d/da/OUC-China-home3.jpg); background-size:100% 100%;}
+
if(event.deltaY<0) {up()}
.section-wrap .section-4{ background-image:url(https://static.igem.org/mediawiki/2015/a/a8/OUC-China-home4.jpg); background-size:100% 100%;}
+
else{down()}
.section-wrap .section-5{ background-image:url(https://static.igem.org/mediawiki/2015/b/bb/OUC-China-home5.jpg); background-size:100% 100%;}
+
run();
.section-wrap .section-6{ background-image:url(https://static.igem.org/mediawiki/2015/d/d5/OUC-China-home6.jpg); background-size:100% 100%;}
+
setTimeout(function(){$wrap.one('mousewheel',mouse_)},1000)
.put-section-0{
+
};
    transform:translateY(0);
+
-webkit-transform:translateY(0);
+
/*响应键盘上下键*/
}
+
$(document).one('keydown',k);
.put-section-1{
+
function k(event){
    transform:translateY(-100%);
+
var e=event||window.event;
-webkit-transform:translateY(-100%);
+
var key=e.keyCode||e.which||e.charCode;
}
+
switch(key) {
.put-section-2{
+
case 38: down();run();
    transform:translateY(-200%);
+
break;
-webkit-transform:translateY(-200%);
+
case 40: up();run();
}
+
break;
.put-section-3{
+
};
    transform:translateY(-300%);
+
setTimeout(function(){$(document).one('keydown',k)},1000);
-webkit-transform:translateY(-300%);
+
}
}
+
});
.put-section-4{
+
</script>
    transform:translateY(-400%);
+
-webkit-transform:translateY(-400%);
+
}
+
.put-section-5{  
+
    transform:translateY(-430%);
+
-webkit-transform:translateY(-430%);
+
}
+
 
+
.section-btn{
+
    width:14px;
+
position:fixed;
+
right:4%;
+
top:60%;}
+
.section-btn li{
+
    width:20px;
+
height:20px;
+
cursor:pointer;
+
border-radius:50%;
+
-webkit-border-radius:50%;
+
margin-bottom:15px;  
+
    background-image:url(https://static.igem.org/mediawiki/2015/7/77/OUC-China-home-dot1.png);
+
+
}
+
.section-btn li.on{
+
background-image:url(https://static.igem.org/mediawiki/2015/7/72/OUC-China-home-dot2.png);
+
    border:none;
+
}
+
</style>
+
</head>
+
 
+
<body>
+
<section class="section-wrap">
+
  <div class="section section-1">
+
    <div class="title active">
+
      <div class="indexNavBox"> <a href="#"  title="home">
+
        <div class="indexNavLogo bg100"></div>
+
        </a>
+
        <div class="indexNavTxt">
+
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
+
           
+
              <td><a href="#">home</a></td>
+
              <td><a href="#">project</a></td>
+
              <td><a href="#">measurement</a></td>
+
              <td><a href="#">modeling</a></td>
+
              <td><a href="#">human practice</a></td>
+
              <td><a href="#">notebook</a></td>
+
              <td><a href="#">team</a></td>
+
          </table>
+
        </div>
+
      </div>
+
    </div>
+
 
+
   
+
  </div>
+
  <div class="section section-2">
+
   
+
    <div class="sectionTxtBox2">
+
      <div class="sectionTittle">Abstract</div>
+
        <div class="sectionTxt2">Gene regulation has typically employed chemically mediated expression systems, which are slow and could be limited by medium during drug diffusion. The development of remote regulation systems that could response to physical signals is in demand.
+
This summer, we are trying to design a platform responsed to electromagnetic signal. This platform is composed of 2 sessions : magnetic receiver and thermosensitive regulator. </div>
+
     
+
   
+
    </div>
+
 
+
   
+
  </div>
+
  <div class="section section-3">
+
    <div class="sectionTxtBox3">
+
      <div class="sectionTittle">Receiver</div>
+
        <div class="sectionTxt3">For magnetic receiver, we chose ferritin, the iron-storage protein in organisms, which could synthesize ferric oxihydroxide core in its hollow protein shell. When exposed to electromagnetic field, the ferric oxihydroxide core would be heated, which would trigger thermosensitive regulator. </div>
+
    </div> 
+
  </div>
+
  <div class="section section-4">
+
    <div class="sectionTxtBox4">
+
      <div class="sectionTittle">Regulator</div>
+
        <div class="sectionTxt4">For thermosensitive regulator, we chose RNA thermometer and constructed a thermosensitive T7 RNA polymerase. RNA thermometer is a structured RNA which could expose RBS only when heated. The thermosensitive T7 RNA polymerase is a normal T7 RNA polymerase at the selected locus of which was inserted by a temperature-sensitive intein, which could self-splice at specific temperature.</div>
+
    </div> 
+
    </div>
+
  </div>
+
  <div class="section section-5">
+
    <div class="sectionTxtBox5">
+
      <div class="sectionTittle">Achievement</div>
+
        <div class="sectionTxt5">123</div>
+
    </div> 
+
    </div>
+
  </div>
+
  <div class="section section-6">
+
  <div class="bottom"></div>
+
  <div class="bottomTxt"><i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;follow us on Facebook@IGEM OUC<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mail to:oucigem@163.com</i>
+
  </div>
+
  <div class="bottomFb"><a href="https://www.facebook.com/oucigem" ><img  alt="https://www.facebook.com/oucigem" src="https://static.igem.org/mediawiki/2015/5/58/OUC-China-Facebook.png"></a></div>
+
    </div>
+
  </div>
+
</section>
+
<ul class="section-btn">
+
  <li class="on"></li>
+
  <li></li>
+
  <li></li>
+
  <li></li>
+
  <li></li>
+
  <li></li>
+
</ul>
+
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 02:18, 7 August 2015

CSS3 纵向滚屏翻页,支持键盘,鼠标滚轮操作

随便写写意思下!

随便写写意思下

随便写写意思下

随便写写意思下

«