Difference between revisions of "Team:NUDT CHINA"

 
(224 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
 
 
{{NUDT_CHINA}}
 
{{NUDT_CHINA}}
−
<!doctype html>
 
 
<html lang="en">
 
<html lang="en">
 
<head>
 
<head>
Line 8: Line 6:
 
     <title>Team:NUDT_CHINA</title>
 
     <title>Team:NUDT_CHINA</title>
 
<script type="text/javascript" >
 
<script type="text/javascript" >
−
function StatingPages(tag){
+
window.onload=function(){
 
var oContent = $('content');
 
var oContent = $('content');
 
var oLoading = $('loading');
 
var oLoading = $('loading');
 
var oList = $('Qidilist');
 
var oList = $('Qidilist');
 
var aLiList = getByClass( oList , 'liList' );
 
var aLiList = getByClass( oList , 'liList' );
−
var aDivList = getByClass( oList , 'divList' );
 
−
var oHomeContent = $('homeContent');
 
−
var oHomeContent1 = getByClass(oHomeContent , 'homeContent1')[0];
 
−
var oHomeContent2 = getByClass(oHomeContent , 'homeContent2')[0];
 
−
 
 
var oMenu = $('lay-menu');
 
var oMenu = $('lay-menu');
 +
  var oNextBtn=$('next-button');
 
var aLiMenu = oMenu.getElementsByTagName('li');
 
var aLiMenu = oMenu.getElementsByTagName('li');
−
 
 
var iNow = 0;
 
var iNow = 0;
 
var prevIndex = 0;
 
var prevIndex = 0;
 
var iContentHeight = 0;
 
var iContentHeight = 0;
−
showLoading();
+
var btn1 = $('btn1');
 +
var btn2 = $('btn2');
 +
var btn3 = $('btn3');
 +
var btn4 = $('btn4');
 
contentAuto();
 
contentAuto();
−
listContentAuto();
 
−
bindNav();
 
 
mouseWheel();
 
mouseWheel();
−
homeContent();
+
bindNav();
 +
add1();
 +
add2();
 
window.onresize = fnResize;   
 
window.onresize = fnResize;   
−
 
+
function add1() {
−
function showLoading(){
+
oNextBtn.onclick=function () {
−
var oSpan = oLoading.getElementsByTagName('span')[0];
+
showLoading();
−
var aDiv = oLoading.getElementsByTagName('div');
+
};
−
oSpan.style.width = '100%';
+
−
oSpan.addEventListener('webkitTransitionend',spanChange,false);
+
−
oSpan.addEventListener('transitionend',spanChange,false);
+
−
function spanChange(){
+
−
if(oSpan.style.width == '100%'){
+
−
oSpan.style.display = 'none';
+
−
aDiv[0].style.height = 0;
+
−
aDiv[1].style.height = 0;
+
−
}
+
−
}
+
−
aDiv[0].addEventListener('webkitTransitionend',divChange,false);
+
−
aDiv[0].addEventListener('transitionend',divChange,false);
+
−
+
−
function divChange(){
+
−
oLoading.parentNode.removeChild(oLoading);
+
−
}
+
−
+
 
}
 
}
−
 
+
function add2() {
−
function bindNav(){
+
btn1.onclick=function () {
−
for(var i=0;i<aLiMenu.length;i++){
+
toMove(1);
−
aLiMenu[i].index = i;
+
iNow=1;
−
aLiMenu[i].onclick = function(){
+
−
prevIndex = iNow;
+
−
iNow = this.index;
+
−
toMove( this.index );
+
−
};
+
 
}
 
}
−
}
+
btn2.onclick=function () {
−
+
toMove(2);
−
function toMove(index){
+
iNow=2;
−
oList.style.top = - index * iContentHeight + 'px';
+
−
for(var i=0;i<aLiMenu.length;i++){
+
−
aLiMenu[i].className = '';
+
 
}
 
}
−
aLiMenu[index].className = 'active';
+
btn3.onclick=function () {
−
+
toMove(3);
−
+
iNow=3;
−
+
−
}
+
−
+
−
function contentAuto(){
+
−
iContentHeight = viewHeight() ;
+
−
oContent.style.height = iContentHeight + 'px';
+
−
for(var i=0;i<aLiList.length;i++){
+
−
aLiList[i].style.height = iContentHeight + 'px';
+
 
}
 
}
−
oList.style.top = - iNow * iContentHeight + 'px';
+
btn4.onclick=function () {
−
}
+
toMove(0);
−
+
iNow=0;
−
function listContentAuto(){
+
−
var mt = (iContentHeight - 520)/2;
+
−
for(var i=0;i<aDivList.length;i++){
+
−
aDivList[i].style.marginTop =  mt+'px';
+
 
}
 
}
 
}
 
}
−
 
−
function fnResize(){
 
−
contentAuto();
 
−
listContentAuto();
 
−
}
 
−
 
 
function mouseWheel(){
 
function mouseWheel(){
 
var bBtn = true;
 
var bBtn = true;
Line 151: Line 104:
 
 
 
}
 
}
−
+
function showLoading(){
−
function homeContent(){
+
var oSpan = oLoading.getElementsByTagName('span')[0];
−
var aLi1 = oHomeContent1.getElementsByTagName('li');
+
var aDiv = oLoading.getElementsByTagName('div');
−
var aLi2 = oHomeContent2.getElementsByTagName('li');
+
oSpan.style.width = '100%';
−
var oldIndex = 0;
+
oSpan.addEventListener('webkitTransitionend',spanChange,false);
−
var iNowHome = 0;
+
oSpan.addEventListener('transitionend',spanChange,false);
−
+
function spanChange(){
−
var data = [
+
if(oSpan.style.width == '100%'){
−
{ text : 'one layer'},
+
oSpan.style.display = 'none';
−
{ text : 'two layer'},
+
aDiv[0].style.height = 0;
−
{ text : 'three layer'},
+
aDiv[1].style.height = 0;
−
{ text : 'four layer'}
+
−
];
+
−
create();
+
−
function create(){
+
−
for(var i=0;i<data.length;i++){
+
−
var oLi1 = document.createElement('li');
+
−
oLi1.innerHTML = '<h1 class="commonTitle">'+(data[i].text)+'</h1>';
+
−
var oLi2 = document.createElement('li');
+
−
if(i == 0){
+
−
oLi1.className = 'active';
+
−
oLi2.className = 'active';
+
−
}
+
−
oHomeContent1.appendChild(oLi1);
+
−
oHomeContent2.appendChild(oLi2);
+
 
}
 
}
−
+
}
 +
aDiv[0].addEventListener('webkitTransitionend',divChange,false);
 +
aDiv[0].addEventListener('transitionend',divChange,false);
 +
 +
function divChange(){
 +
oLoading.parentNode.removeChild(oLoading);
 
}
 
}
 
 
−
for(var i=0;i<aLi2.length;i++){
+
}
−
aLi2[i].index = i;
+
 
−
aLi2[i].onclick = function(){
+
function bindNav(){
−
for(var i=0;i<aLi2.length;i++){
+
for(var i=0;i<aLiMenu.length;i++){
−
aLi2[i].className = '';
+
aLiMenu[i].index = i;
−
}
+
aLiMenu[i].onclick = function(){
−
this.className = 'active';
+
prevIndex = iNow;
−
+
iNow = this.index;
−
if( oldIndex < this.index ){  //从左向右
+
toMove( this.index );
−
aLi1[oldIndex].className = 'leftHide';
+
−
aLi1[this.index].className = 'rightShow';
+
−
}
+
−
else if( oldIndex > this.index ){  //从右向走
+
−
aLi1[oldIndex].className = 'rightHide';
+
−
aLi1[this.index].className = 'leftShow';
+
−
}
+
−
oldIndex = this.index;
+
−
iNowHome = this.index;
+
 
};
 
};
 
}
 
}
−
+
}
−
var timer = setInterval(change,3000);
+
function toMove(index){
−
+
oList.style.top = - index * iContentHeight + 'px';
−
oHomeContent.onmouseover = function(){
+
for(var i=0;i<aLiMenu.length;i++){
−
clearInterval(timer);
+
aLiMenu[i].className = '';
−
};
+
−
+
−
function change(){
+
−
iNowHome++;
+
−
+
−
if(iNowHome == aLi2.length){
+
−
iNowHome = 0;
+
−
}
+
−
+
−
for(var i=0;i<aLi2.length;i++){
+
−
aLi2[i].className = '';
+
−
}
+
−
aLi2[iNowHome].className = 'active';
+
−
aLi1[oldIndex].className = 'leftHide';
+
−
aLi1[iNowHome].className = 'rightShow';
+
−
+
−
oldIndex = iNowHome;
+
−
+
 
}
 
}
 +
aLiMenu[index].className = 'active';
 +
}
 +
 +
function contentAuto(){
 +
iContentHeight = viewHeight() ;
 +
oContent.style.height = iContentHeight + 'px';
 +
for(var i=0;i<aLiList.length;i++){
 +
aLiList[i].style.height = iContentHeight + 'px';
 +
}
 +
oList.style.top = - iNow * iContentHeight + 'px';
 +
}
 +
 +
function fnResize(){
 +
contentAuto();
 
}
 
}
 +
 
function $(id){
 
function $(id){
 
return document.getElementById(id);
 
return document.getElementById(id);
Line 250: Line 182:
 
</script>
 
</script>
 
<style type="text/css">
 
<style type="text/css">
−
<!--li{ list-style:none;}
+
.button-next{    font-weight: bold;
 +
    font-family: "Lucida Console","Lucida Sans Typewriter",monaco,"Bitstream Vera Sans Mono",monospace;
 +
    position: absolute;
 +
    min-width: 180px;
 +
    min-height: 40px;
 +
  height: 7%;
 +
  width: 13%;
 +
  bottom: 1%;
 +
  background: #fff;
 +
  border: 1px solid #fff;
 +
  border-radius: 2px;
 +
  color: #222;
 +
  text-align: center;
 +
  cursor: pointer;
 +
  transition: .2s ease-in-out;
 +
  transform: translate(-50%, -50%);font-size: large;
 +
}
 +
.button-next:hover {
 +
  background: transparent;
 +
  color: #fff;
 +
}
 +
.myheader{height: 100%; text-align: center; background-color: rgba(255,255,255,0);margin:0 auto;position: relative;}
 +
.content{width:100%;}
 +
li{ list-style:none;}
 
#Qidilist{ width:100%; position:absolute; top:0; left:0; transition:.5s top;}
 
#Qidilist{ width:100%; position:absolute; top:0; left:0; transition:.5s top;}
−
#Qidilist .liList{ width:2000px; position:relative; left:50%; margin-left:-1000px; overflow:hidden;}
 
 
#lay-menu{ position:fixed; right:0; top:50%; z-index:20;}
 
#lay-menu{ position:fixed; right:0; top:50%; z-index:20;}
−
#lay-menu li{ width:10px; height:10px; border-radius:50%; margin:10px; border:1px white solid; cursor:pointer;}
+
#lay-menu li{ width:10px; height:10px; border-radius:50%; margin:10px; border:1px black solid; cursor:pointer;}
−
#lay-menu li.active{ background:white; cursor:default;}
+
#lay-menu li.active{ background:black; cursor:default;}
−
#home{ background:url(img/bg1.jpg) no-repeat; overflow-x: hidden;top: 0px;height: 100%}
+
−
#homeContent .homeContent1{ width:100%; height:100%; position:relative; perspective:800px; transform-style:preserve-3d; -webkit-perspective:800px; -webkit-transform-style:preserve-3d; transition:1s;}
+
−
#homeContent .homeContent1 li{  width:100%; height:100%; position:absolute; left:0; top:0; background:black; visibility:hidden;}
+
−
#homeContent .homeContent1 li:nth-of-type(1){background:#dc6c5f;}
+
−
#homeContent .homeContent1 li:nth-of-type(2){background:#95dc84;}
+
−
#homeContent .homeContent1 li:nth-of-type(3){background:#64b9d2;}
+
−
#homeContent .homeContent1 li h1{ color:white; text-align:center; padding-top:200px;}
+
−
#homeContent .homeContent1 li.active{ z-index:1; visibility:visible;}
+
−
 
+
−
#homeContent .homeContent2{ position:absolute; bottom:0; z-index:2; text-align:center; width:100%; transition:1s;}
+
−
#homeContent .homeContent2 li{ width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,0.5); display:inline-block; margin:2px; box-shadow:0 0 4px rgba(25,25,25,0.8); cursor:pointer;}
+
−
#homeContent .homeContent2 li.active{ background:white; cursor:default;}
+
−
 
+
−
#homeContent .homeContent1 .leftShow{ animation:1s homeLeftShow; visibility:visible; z-index:3;-webkit-animation:1s homeLeftShow;}
+
−
#homeContent .homeContent1 .rightHide{ animation:1s homeRightHide; visibility:hidden; -webkit-animation:1s homeRightHide;}
+
−
 
+
−
 
+
−
#homeContent .homeContent1 .leftHide{ animation:1s homeLeftHide; visibility:hidden; -webkit-animation:1s homeLeftHide;}
+
−
#homeContent .homeContent1 .rightShow{ animation:1s homeRightShow; visibility:visible; z-index:3; -webkit-animation:1s homeRightShow;}
+
−
</style>
+
−
<style type="text/css">
+
−
@keyframes homeLeftHide{
+
−
0%{ transform:translateZ(0px); visibility:visible;}
+
−
40%{ transform:translate(-40%,0) scale(0.8) rotateY(20deg);}
+
−
100%{ transform:translateZ(-200px);}
+
−
}
+
−
@keyframes homeRightShow{
+
−
0%{ transform:translateZ(-200px);}
+
−
40%{ transform:translate(40%,0) scale(0.8) rotateY(-20deg);}
+
−
100%{ transform:translateZ(0px);}
+
−
}
+
−
 
+
−
@-webkit-keyframes homeLeftHide{
+
−
0%{ -webkit-transform:translateZ(0px); visibility:visible;}
+
−
40%{ -webkit-transform:translate(-40%,0) scale(0.8) rotateY(20deg);}
+
−
100%{ -webkit-transform:translateZ(-200px);}
+
−
}
+
−
@-webkit-keyframes homeRightShow{
+
−
0%{ -webkit-transform:translateZ(-200px);}
+
−
40%{ -webkit-transform:translate(40%,0) scale(0.8) rotateY(-20deg);}
+
−
100%{ -webkit-transform:translateZ(0px);}
+
−
}
+
−
 
+
−
@keyframes homeLeftShow{
+
−
0%{ transform:translateZ(-200px);}
+
−
40%{ transform:translate(-40%,0) scale(0.8) rotateY(20deg);}
+
−
100%{ transform:translateZ(0px);}
+
−
}
+
−
@keyframes homeRightHide{
+
−
0%{ transform:translateZ(0px); visibility:visible;}
+
−
40%{ transform:translate(40%,0) scale(0.8) rotateY(-20deg);}
+
−
100%{ transform:translateZ(-200px);}
+
−
}
+
−
@-webkit-keyframes homeLeftShow{
+
−
0%{ -webkit-transform:translateZ(-200px);}
+
−
40%{ -webkit-transform:translate(-40%,0) scale(0.8) rotateY(20deg);}
+
−
100%{ -webkit-transform:translateZ(0px);}
+
−
}
+
−
@-webkit-keyframes homeRightHide{
+
−
0%{ -webkit-transform:translateZ(0px); visibility:visible;}
+
−
40%{ -webkit-transform:translate(40%,0) scale(0.8) rotateY(-20deg);}
+
−
100%{ -webkit-transform:translateZ(-200px);}
+
−
}
+
−
/* home end */-->
+
−
</style>
+
−
 
+
−
<style type="text/css">
+
−
 
+
  
−
#loading div{ width:100%; height:50%; position:absolute; left:0; background:#009ee0; z-index:50; transition:1s;}
+
.myheader img{width:100%; margin: 0;position: absolute;  top: 50%;transform: translate(0, -50%); left: 0;max-height: 80%;}
 +
.myheader h1{width:100%; margin: 0;position: absolute;  top: 40%;transform: translate(0, -50%); left: 0;max-height: 80%;font-size:78px; font-family:"Comic Sans MS",cursive;border-bottom: none;padding-bottom:40px;line-height:normal;}
 +
.myheader h3{width:100%; margin: 0;position: absolute;  top: 60%;transform: translate(0, -50%); left: 0;max-height: 80%;font-size:30px;border-bottom: none;font-weight:initial;font-family: "Big Caslon","Book Antiqua","Palatino Linotype",Georgia,serif;line-height:normal;}
 +
#loading div{ width:100%; height:50%; position:absolute; left:0; background:#009ee0; z-index:50; transition:1s;text-align: center;}
 
#loading div:nth-of-type(1){ top:0;}
 
#loading div:nth-of-type(1){ top:0;}
 
#loading div:nth-of-type(2){ bottom:0;}
 
#loading div:nth-of-type(2){ bottom:0;}
 
#loading span{ width:0%; height:4px; background:white; position:absolute; left:0; top:50%; margin-top:-2px; z-index:60; transition:.10s;}
 
#loading span{ width:0%; height:4px; background:white; position:absolute; left:0; top:50%; margin-top:-2px; z-index:60; transition:.10s;}
−
.pure-g{
 
−
letter-spacing:-.31em;text-rendering:optimizespeed;
 
−
font-family:FreeSans,Arimo,"Droid Sans",Helvetica,Arial,sans-serif;
 
−
display:-webkit-box;
 
−
display:-webkit-flex;
 
−
display:-ms-flexbox;
 
−
display:flex;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-align-content:flex-start;-ms-flex-line-pack:start;
 
−
align-content:flex-start}
 
−
@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){table .pure-g{display:block}}
 
−
.opera-only :-o-prefocus,.pure-g{word-spacing:-.43em}
 
−
.pure-u,.pure-u-1,.pure-u-1-1,.pure-u-1-12,.pure-u-1-2,.pure-u-1-24,.pure-u-1-3,.pure-u-1-4,.pure-u-1-5,.pure-u-1-6,.pure-u-1-8,.pure-u-10-24,.pure-u-11-12,.pure-u-11-24,.pure-u-12-24,.pure-u-13-24,.pure-u-14-24,.pure-u-15-24,.pure-u-16-24,.pure-u-17-24,.pure-u-18-24,.pure-u-19-24,.pure-u-2-24,.pure-u-2-3,.pure-u-2-5,.pure-u-20-24,.pure-u-21-24,.pure-u-22-24,.pure-u-23-24,.pure-u-24-24,.pure-u-3-24,.pure-u-3-4,.pure-u-3-5,.pure-u-3-8,.pure-u-4-24,.pure-u-4-5,.pure-u-5-12,.pure-u-5-24,.pure-u-5-5,.pure-u-5-6,.pure-u-5-8,.pure-u-6-24,.pure-u-7-12,.pure-u-7-24,.pure-u-7-8,.pure-u-8-24,.pure-u-9-24{display:inline-block;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}
 
−
.pure-g [class*=pure-u]{font-family:sans-serif}
 
−
.pure-u-1-24{width:4.1667%}
 
−
.pure-u-1-12,.pure-u-2-24{width:8.3333%}
 
−
.pure-u-1-8,.pure-u-3-24{width:12.5%}
 
−
.pure-u-1-6,.pure-u-4-24{width:16.6667%}
 
−
.pure-u-1-5{width:20%}
 
−
.pure-u-5-24{width:20.8333%}
 
−
.pure-u-1-4,.pure-u-6-24{width:25%}
 
−
.pure-u-7-24{width:29.1667%}
 
−
.pure-u-1-3,.pure-u-8-24{width:33.3333%}
 
−
.pure-u-3-8,.pure-u-9-24{width:37.5%}
 
−
.pure-u-2-5{width:40%}
 
−
.pure-u-10-24,.pure-u-5-12{width:41.6667%}
 
−
.pure-u-11-24{width:45.8333%}
 
−
.pure-u-1-2,.pure-u-12-24{width:50%}
 
−
.pure-u-13-24{width:54.1667%}
 
−
.pure-u-14-24,.pure-u-7-12{width:58.3333%}
 
−
.pure-u-3-5{width:60%}
 
−
.pure-u-15-24,.pure-u-5-8{width:62.5%}
 
−
.pure-u-16-24,.pure-u-2-3{width:66.6667%}
 
−
.pure-u-17-24{width:70.8333%}
 
−
.pure-u-18-24,.pure-u-3-4{width:75%}
 
−
.pure-u-19-24{width:79.1667%}
 
−
.pure-u-4-5{width:80%}
 
−
.pure-u-20-24,.pure-u-5-6{width:83.3333%}
 
−
.pure-u-21-24,.pure-u-7-8{width:87.5%}
 
−
.pure-u-11-12,.pure-u-22-24{width:91.6667%}
 
−
.pure-u-23-24{width:95.8333%}
 
−
.pure-u-1,.pure-u-1-1,.pure-u-24-24,.pure-u-5-5{width:100%}
 
−
@media screen and (min-width:0em){.pure-u-sm-1,.pure-u-sm-1-1,.pure-u-sm-1-12,.pure-u-sm-1-2,.pure-u-sm-1-24,.pure-u-sm-1-3,.pure-u-sm-1-4,.pure-u-sm-1-5,.pure-u-sm-1-6,.pure-u-sm-1-8,.pure-u-sm-10-24,.pure-u-sm-11-12,.pure-u-sm-11-24,.pure-u-sm-12-24,.pure-u-sm-13-24,.pure-u-sm-14-24,.pure-u-sm-15-24,.pure-u-sm-16-24,.pure-u-sm-17-24,.pure-u-sm-18-24,.pure-u-sm-19-24,.pure-u-sm-2-24,.pure-u-sm-2-3,.pure-u-sm-2-5,.pure-u-sm-20-24,.pure-u-sm-21-24,.pure-u-sm-22-24,.pure-u-sm-23-24,.pure-u-sm-24-24,.pure-u-sm-3-24,.pure-u-sm-3-4,.pure-u-sm-3-5,.pure-u-sm-3-8,.pure-u-sm-4-24,.pure-u-sm-4-5,.pure-u-sm-5-12,.pure-u-sm-5-24,.pure-u-sm-5-5,.pure-u-sm-5-6,.pure-u-sm-5-8,.pure-u-sm-6-24,.pure-u-sm-7-12,.pure-u-sm-7-24,.pure-u-sm-7-8,.pure-u-sm-8-24,.pure-u-sm-9-24{display:inline-block;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}
 
−
.pure-u-sm-1-24{width:4.1667%}
 
−
.pure-u-sm-1-12,.pure-u-sm-2-24{width:8.3333%}
 
−
.pure-u-sm-1-8,.pure-u-sm-3-24{width:12.5%}
 
−
.pure-u-sm-1-6,.pure-u-sm-4-24{width:16.6667%}
 
−
.pure-u-sm-1-5{width:20%}
 
−
.pure-u-sm-5-24{width:20.8333%}
 
−
.pure-u-sm-1-4,.pure-u-sm-6-24{width:25%}
 
−
.pure-u-sm-7-24{width:29.1667%}
 
−
.pure-u-sm-1-3,.pure-u-sm-8-24{width:33.3333%}
 
−
.pure-u-sm-3-8,.pure-u-sm-9-24{width:37.5%}
 
−
.pure-u-sm-2-5{width:40%}
 
−
.pure-u-sm-10-24,.pure-u-sm-5-12{width:41.6667%}
 
−
.pure-u-sm-11-24{width:45.8333%}
 
−
.pure-u-sm-1-2,.pure-u-sm-12-24{width:50%}
 
−
.pure-u-sm-13-24{width:54.1667%}
 
−
.pure-u-sm-14-24,.pure-u-sm-7-12{width:58.3333%}
 
−
.pure-u-sm-3-5{width:60%}
 
−
.pure-u-sm-15-24,.pure-u-sm-5-8{width:62.5%}
 
−
.pure-u-sm-16-24,.pure-u-sm-2-3{width:66.6667%}
 
−
.pure-u-sm-17-24{width:70.8333%}
 
−
.pure-u-sm-18-24,.pure-u-sm-3-4{width:75%}
 
−
.pure-u-sm-19-24{width:79.1667%}
 
−
.pure-u-sm-4-5{width:80%}
 
−
.pure-u-sm-20-24,.pure-u-sm-5-6{width:83.3333%}
 
−
.pure-u-sm-21-24,.pure-u-sm-7-8{width:87.5%}
 
−
.pure-u-sm-11-12,.pure-u-sm-22-24{width:91.6667%}
 
−
.pure-u-sm-23-24{width:95.8333%}
 
−
.pure-u-sm-1,.pure-u-sm-1-1,.pure-u-sm-24-24,.pure-u-sm-5-5{width:100%}}
 
−
 
−
@media screen and (min-width:48em){.pure-u-md-1,.pure-u-md-1-1,.pure-u-md-1-12,.pure-u-md-1-2,.pure-u-md-1-24,.pure-u-md-1-3,.pure-u-md-1-4,.pure-u-md-1-5,.pure-u-md-1-6,.pure-u-md-1-8,.pure-u-md-10-24,.pure-u-md-11-12,.pure-u-md-11-24,.pure-u-md-12-24,.pure-u-md-13-24,.pure-u-md-14-24,.pure-u-md-15-24,.pure-u-md-16-24,.pure-u-md-17-24,.pure-u-md-18-24,.pure-u-md-19-24,.pure-u-md-2-24,.pure-u-md-2-3,.pure-u-md-2-5,.pure-u-md-20-24,.pure-u-md-21-24,.pure-u-md-22-24,.pure-u-md-23-24,.pure-u-md-24-24,.pure-u-md-3-24,.pure-u-md-3-4,.pure-u-md-3-5,.pure-u-md-3-8,.pure-u-md-4-24,.pure-u-md-4-5,.pure-u-md-5-12,.pure-u-md-5-24,.pure-u-md-5-5,.pure-u-md-5-6,.pure-u-md-5-8,.pure-u-md-6-24,.pure-u-md-7-12,.pure-u-md-7-24,.pure-u-md-7-8,.pure-u-md-8-24,.pure-u-md-9-24{display:inline-block;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-u-md-1-24{width:4.1667%}
 
−
.pure-u-md-1-12,.pure-u-md-2-24{width:8.3333%}
 
−
.pure-u-md-1-8,.pure-u-md-3-24{width:12.5%}
 
−
.pure-u-md-1-6,.pure-u-md-4-24{width:16.6667%}
 
−
.pure-u-md-1-5{width:20%}
 
−
.pure-u-md-5-24{width:20.8333%}
 
−
.pure-u-md-1-4,.pure-u-md-6-24{width:25%}
 
−
.pure-u-md-7-24{width:29.1667%}
 
−
.pure-u-md-1-3,.pure-u-md-8-24{width:33.3333%}
 
−
.pure-u-md-3-8,.pure-u-md-9-24{width:37.5%}
 
−
.pure-u-md-2-5{width:40%}
 
−
.pure-u-md-10-24,.pure-u-md-5-12{width:41.6667%}
 
−
.pure-u-md-11-24{width:45.8333%}
 
−
.pure-u-md-1-2,.pure-u-md-12-24{width:50%}
 
−
.pure-u-md-13-24{width:54.1667%}
 
−
.pure-u-md-14-24,.pure-u-md-7-12{width:58.3333%}
 
−
.pure-u-md-3-5{width:60%}
 
−
.pure-u-md-15-24,.pure-u-md-5-8{width:62.5%}
 
−
.pure-u-md-16-24,.pure-u-md-2-3{width:66.6667%}
 
−
.pure-u-md-17-24{width:70.8333%}.pure-u-md-18-24,.pure-u-md-3-4{width:75%}.pure-u-md-19-24{width:79.1667%}.pure-u-md-4-5{width:80%}.pure-u-md-20-24,.pure-u-md-5-6{width:83.3333%}.pure-u-md-21-24,.pure-u-md-7-8{width:87.5%}.pure-u-md-11-12,.pure-u-md-22-24{width:91.6667%}.pure-u-md-23-24{width:95.8333%}.pure-u-md-1,.pure-u-md-1-1,.pure-u-md-24-24,.pure-u-md-5-5{width:100%}}
 
−
 
−
</style>
 
−
<!-- for the menu and all-->
 
−
    <style type="text/css"><!--
 
−
 
−
.pure-menu {
 
−
    box-sizing: border-box;
 
−
}
 
−
.pure-menu-fixed {
 
−
    position: fixed;
 
−
    left: 0;
 
−
    top: 0;
 
−
    z-index: 3;
 
−
}
 
−
.pure-menu-list,
 
−
.pure-menu-item {
 
−
    position: relative;
 
−
}
 
−
 
−
.pure-menu-list {
 
−
    list-style: none;
 
−
    margin: 0;
 
−
    padding: 0;
 
−
}
 
−
 
−
.pure-menu-item {
 
−
    padding: 0;
 
−
    margin: 0;
 
−
    height: 100%;
 
−
}
 
−
 
−
.pure-menu-link,
 
−
.pure-menu-heading {
 
−
    display: block;
 
−
    text-decoration: none;
 
−
    white-space: nowrap;
 
−
}
 
−
.pure-menu-item .pure-menu-item {
 
−
    display: block;
 
−
}
 
−
.pure-menu-heading {
 
−
    text-transform: uppercase;
 
−
    color: #565d64;
 
−
}
 
−
.pure-menu-link, {
 
−
    color: #777;
 
−
}
 
−
 
−
.pure-menu-link,
 
−
.pure-menu-heading {
 
−
    padding: .5em 1em;
 
−
}
 
−
.pure-menu-active > .pure-menu-link,
 
−
.pure-menu-link:hover,
 
−
.pure-menu-link:focus {
 
−
    background-color: #eee;
 
−
}
 
−
.pure-menu-selected .pure-menu-link,
 
−
.pure-menu-selected .pure-menu-link:visited {
 
−
    color: #000;
 
−
}
 
−
 
 
body {
 
body {
 
     color: #777;
 
     color: #777;
 
}
 
}
−
 
+
#Qidilist .liList{ width:100%; position:relative;  overflow:hidden;text-align: center;left:-30px;}
−
.pure-img-responsive {
+
.big-bg{position:absolute; top:0;left:0;height:100%;width:100%; z-index:9;}
−
    max-width: 100%;
+
@media (min-width: 92em) {
−
    height: auto;
+
  .myheader {
 +
        width: 85%;}
 
}
 
}
−
 
+
@media (max-width: 92em) {
−
#layout,
+
  .myheader {
−
#menu,
+
        width: 85%;}
−
.menu-link {
+
−
    -webkit-transition: all 0.2s ease-out;
+
−
    -moz-transition: all 0.2s ease-out;
+
−
    -ms-transition: all 0.2s ease-out;
+
−
    -o-transition: all 0.2s ease-out;
+
−
    transition: all 0.2s ease-out;
+
 
}
 
}
−
 
+
@media (max-width: 45em) {
−
#layout {
+
  .myheader {
−
    position: relative;
+
        width: 100%;}
−
    left: 0;
+
−
    padding-left: 0;
+
 
}
 
}
−
    #layout.active #menu {
 
−
        left: 175px;
 
−
        width: 175px;
 
−
    }
 
−
 
−
    #layout.active .menu-link {
 
−
        left: 175px;
 
−
    }
 
  
−
.content {
+
.next-button {z-index:10;position:absolute;font-weight: bold;
−
     margin: 0 auto;
+
     font-family: "Lucida Console","Lucida Sans Typewriter",monaco,"Bitstream Vera Sans Mono",monospace;
−
    padding: 0 2em;
+
  top: 40%;
−
    max-width: 800px;
+
  left: 50%;font-size:29px;font-weight:10px;
−
    margin-bottom: 50px;
+
  z-index: 10;
−
    line-height: 1.6em;
+
  padding: 1em 2.5em;
 +
  background: #fff;
 +
  border: 1px solid #fff;
 +
  border-radius: 4px;
 +
  color: #222;
 +
  font-size: large;
 +
  text-align: center;
 +
  cursor: pointer;
 +
  transition: .2s ease-in-out;
 +
  transform: translate(-50%, -50%);}
 +
.next-button:hover {
 +
  background: transparent;
 +
  color: #fff;
 
}
 
}
−
 
+
.under-bg{z-index: 0.5;opacity: 1; position: fixed; top: 0; left: 0; width: 100%; height: 100%;}
−
.header {
+
</style>
−
    margin: 0;
+
−
    color: #333;
+
−
    text-align: center;
+
−
    padding: 2.5em 2em 0;
+
−
    border-bottom: 1px solid #eee;
+
−
}
+
−
    .header h1 {
+
−
        margin: 0.2em 0;
+
−
        font-size: 3em;
+
−
        font-weight: 300;
+
−
    }
+
−
    .header h2 {
+
−
        font-weight: 300;
+
−
        color: #ccc;
+
−
        padding: 0;
+
−
        margin-top: 0;
+
−
    }
+
−
 
+
−
.content-subhead {
+
−
    margin: 50px 0 20px 0;
+
−
    font-weight: 300;
+
−
    color: #888;
+
−
}
+
−
 
+
−
 
+
−
#menu {
+
−
    margin-left: -175px; /* "#menu" width */
+
−
    width: 175px;
+
−
    position: fixed;
+
−
    top: 18px;
+
−
    left: 0;
+
−
    bottom: 0;
+
−
    z-index: 1000; /* so the menu or its navicon stays above all content */
+
−
    background: #000000;
+
−
    overflow-y: auto;
+
−
    -webkit-overflow-scrolling: touch;
+
−
}
+
−
    #menu a {
+
−
        color: #999;
+
−
        border: none;
+
−
        padding: 0.6em 0 0.6em 0.6em;
+
−
    }
+
−
 
+
−
    /*
+
−
    Remove all background/borders, since we are applying them to #menu.
+
−
    */
+
−
    #menu .pure-menu,
+
−
    #menu .pure-menu ul {
+
−
        border: none;
+
−
        background: transparent;
+
−
    }
+
−
 
+
−
    #menu .pure-menu ul,
+
−
    #menu .pure-menu .menu-item-divided {
+
−
        border-top: 1px solid #333;
+
−
    }
+
−
        /*
+
−
        Change color of the anchor links on hover/focus.
+
−
        */
+
−
        #menu .pure-menu li a:hover,
+
−
        #menu .pure-menu li a:focus {
+
−
            background: #333;
+
−
        }
+
−
       
+
−
    #menu .pure-menu-selected,
+
−
    #menu .pure-menu-heading {
+
−
        background: #1f8dd6;
+
−
    }
+
−
        #menu .pure-menu-selected a {
+
−
            color: #fff;
+
−
        }
+
−
 
+
−
    #menu .pure-menu-heading {
+
−
        font-size: 110%;
+
−
        color: #fff;
+
−
        margin: 0;
+
−
    }
+
−
 
+
−
.menu-link {
+
−
    position: fixed;
+
−
    display: block; /* show this only on small screens */
+
−
    top: 18px;
+
−
    left: 0; /* "#menu width" */
+
−
    background: #000;
+
−
    background: rgba(0,0,0,0.7);
+
−
    font-size: 10px; /* change this value to increase/decrease button size */
+
−
    z-index: 10;
+
−
    width: 2em;
+
−
    height: auto;
+
−
    padding: 2.1em 1.6em;
+
−
}
+
−
 
+
−
    .menu-link:hover,
+
−
    .menu-link:focus {
+
−
        background: #000;
+
−
    }
+
−
 
+
−
    .menu-link span {
+
−
        position: relative;
+
−
        display: block;
+
−
    }
+
−
 
+
−
    .menu-link span,
+
−
    .menu-link span:before,
+
−
    .menu-link span:after {
+
−
        background-color: #fff;
+
−
        width: 100%;
+
−
        height: 0.2em;
+
−
    }
+
−
 
+
−
        .menu-link span:before,
+
−
        .menu-link span:after {
+
−
            position: absolute;
+
−
            margin-top: -0.6em;
+
−
            content: " ";
+
−
        }
+
−
 
+
−
        .menu-link span:after {
+
−
            margin-top: 0.6em;
+
−
        }
+
−
@media (min-width: 88em) {
+
−
 
+
−
    .header,
+
−
    .content {
+
−
        padding-left: 2em;
+
−
        padding-right: 2em;
+
−
    }
+
−
 
+
−
    #layout {
+
−
        padding-left: 175px; /* left col width "#menu" */
+
−
        left: 0;
+
−
    }
+
−
    #menu {
+
−
        left: 175px;
+
−
    }
+
−
 
+
−
    .menu-link {
+
−
        position: fixed;
+
−
        left: 175px;
+
−
        display: none;
+
−
    }
+
−
 
+
−
    #layout.active .menu-link {
+
−
        left: 175px;
+
−
    }
+
−
    #Qidilist .divList{ width:1100px; height:520px; margin:0px auto; position:relative;}
+
−
}
+
−
 
+
−
@media (max-width: 88em) {
+
−
    #layout.active {
+
−
        position: relative;
+
−
        left: 175px;
+
−
    }
+
−
    #Qidilist .divList{ width:900px; height:500px; margin:0px auto; position:relative;}
+
−
}
+
−
.pure-menu-item .pure-menu-item{display:block;background-color:#cccccc}
+
−
.pure-menu-children{display:none;position:relative;top:0;margin:0;padding:0;z-index:3}
+
−
.pure-menu-active>.pure-menu-children,.pure-menu-allow-hover:hover>.pure-menu-children{display:block;position:relative}
+
−
.pure-menu-has-children>.pure-menu-link:after{padding-left:.5em;content:"\25B8";font-size:small}
+
−
 
+
−
.pure-button {
+
−
    background-color: #1f8dd6;
+
−
    padding: 0.5em 2em;
+
−
    border-radius: 5px;
+
−
    background: white;
+
−
    color: #1f8dd6;
+
−
    border-radius: 5px;
+
−
    font-size: 120%;
+
−
    display:inline-block;zoom:1;
+
−
white-space:nowrap;
+
−
cursor:pointer;
+
−
list-style:none;
+
−
text-decoration:none;
+
−
}
+
−
-->
+
−
    </style>
+
  
 
</head>
 
</head>
−
<body>
+
<img class="under-bg" src="https://static.igem.org/mediawiki/2017/c/cc/T-NUDT_CHINA-MainPage1.jpg" alt="">
−
 
+
<div id="loading">
−
  <div id="loading">
+
     <div><img src="https://static.igem.org/mediawiki/2017/1/17/T-NUDT_CHINA-loadingBg3.jpg" alt="" class="big-bg"></div>
−
     <div></div>
+
         <div><img src="https://static.igem.org/mediawiki/2017/a/ab/T-NUDT_CHINA-loadingBg4.jpg" alt="" class="big-bg">
−
        <div>
+
             <a class="next-button" id="next-button">Get Started!</a>
−
         <div align="center">
+
−
             <a href='#' class="pure-button "onclick="StatingPages('True')">Get Started</a>
+
−
        </div>
+
 
         </div>
 
         </div>
 
         <span></span>
 
         <span></span>
 
     </div>
 
     </div>
 +
 
 
   <div id="layout">
 
   <div id="layout">
 
         <a href="#menu" id="menuLink" class="menu-link">
 
         <a href="#menu" id="menuLink" class="menu-link">
Line 717: Line 273:
 
         </a>
 
         </a>
 
         <div id="menu">
 
         <div id="menu">
−
         <div class="pure-menu"><img src="icon1.jpg" width=150px height=120px alt="">
+
         <div class="pure-menu"><img src="https://static.igem.org/mediawiki/2017/4/4f/T-NUDT_CHINA-icon01.png" width=240px height=190px alt="">
 
           <ul class="pure-menu-list">
 
           <ul class="pure-menu-list">
−
             <li class="pure-menu-item"><a class="pure-menu-heading" href="#" class="pure-menu-link">Home</a></li>               
+
             <li class="pure-menu-item"><a class="pure-menu-heading" href="https://2017.igem.org/Team:NUDT_CHINA" class="pure-menu-link">HOME</a></li>               
 
            
 
            
 
             <li class="pure-menu-item pure-menu-has-children">
 
             <li class="pure-menu-item pure-menu-has-children">
−
               <a href="#" class="pure-menu-link"onclick="Show('team_show')">TEAM</a>
+
               <a  class="pure-menu-link"onclick="Show('team_show')">TEAM</a>
 
               <ul class="pure-menu-children" id="team_show">
 
               <ul class="pure-menu-children" id="team_show">
−
                 <li class="pure-menu-item"><a href="#" class="pure-menu-link">Team</a></li>
+
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Team" class="pure-menu-link">Team</a></li>
−
                 <li class="pure-menu-item"><a href="#" class="pure-menu-link">Collaborations</a></li>
+
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Collaborations" class="pure-menu-link">Collaborations</a></li>
 
             </ul>
 
             </ul>
 
             </li>
 
             </li>
 
             <li class="pure-menu-item pure-menu-has-children">
 
             <li class="pure-menu-item pure-menu-has-children">
−
               <a href="#"  class="pure-menu-link"onclick="Show('project_show')">PROJECT</a>
+
               <a   class="pure-menu-link"onclick="Show('project_show')">PROJECT</a>
 
               <ul class="pure-menu-children" id="project_show">
 
               <ul class="pure-menu-children" id="project_show">
−
                 <li class="pure-menu-item"><a href="#" class="pure-menu-link">Description</a></li>
+
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Description" class="pure-menu-link">Description</a></li>
−
                 <li class="pure-menu-item"><a href="#" class="pure-menu-link">Design</a></li>
+
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Design" class="pure-menu-link">Design</a></li>
−
                 <li class="pure-menu-item"><a href="#" class="pure-menu-link">Experiment</a></li>
+
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Experiments" class="pure-menu-link">Experiment</a></li>
−
                 <li class="pure-menu-item"><a href="#" class="pure-menu-link">Notebook</a></li>
+
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Notebook" class="pure-menu-link">Notebook</a></li>
−
                 <li class="pure-menu-item"><a href="#" class="pure-menu-link">InterLab</a></li>
+
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Results" class="pure-menu-link">Results</a></li>
−
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contribution</a></li>
+
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Demonstrate" class="pure-menu-link">Demonstrate</a></li>
−
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Model</a></li>
+
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Improve" class="pure-menu-link">Improve</a></li>
−
                 <li class="pure-menu-item"><a href="#" class="pure-menu-link">Results</a></li>
+
−
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Demonstrate</a></li>
+
−
                 <li class="pure-menu-item"><a href="#" class="pure-menu-link">Improve</a></li>
+
−
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Attributions</a></li>
+
 
             </ul>
 
             </ul>
 
             </li>
 
             </li>
 
             <li class="pure-menu-item pure-menu-has-children">
 
             <li class="pure-menu-item pure-menu-has-children">
−
               <a href="#"  class="pure-menu-link"onclick="Show('part_show')">PARTS</a>
+
               <a   class="pure-menu-link"onclick="Show('part_show')">PARTS</a>
 
               <ul class="pure-menu-children" id="part_show">
 
               <ul class="pure-menu-children" id="part_show">
−
                 <li class="pure-menu-item"><a href="#" class="pure-menu-link">Parts</a></li>
+
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Parts" class="pure-menu-link">Parts</a></li>
−
                 <li class="pure-menu-item"><a href="#" class="pure-menu-link">Basic Parts</a></li>
+
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Basic_Part" class="pure-menu-link">Basic Parts</a></li>
−
                 <li class="pure-menu-item"><a href="#" class="pure-menu-link">Composite Parts</a></li>
+
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Composite_Part" class="pure-menu-link">Composite Parts</a></li>
−
                 <li class="pure-menu-item"><a href="#" class="pure-menu-link">Part Collection</a></li>
+
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Part_Collection" class="pure-menu-link">Part Collection</a></li>
 
             </ul>
 
             </ul>
 
             </li>
 
             </li>
−
                 <li class="pure-menu-item"><a href="#" class="pure-menu-link">SAFETY</a></li>
+
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Attributions" class="pure-menu-link">Attributions</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/InterLab" class="pure-menu-link">InterLab</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Model" class="pure-menu-link">Model</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Safety" class="pure-menu-link">SAFETY</a></li>
 
             <li class="pure-menu-item pure-menu-has-children">
 
             <li class="pure-menu-item pure-menu-has-children">
−
               <a href="#"  class="pure-menu-link"onclick="Show('HP_show')">HP</a>
+
               <a   class="pure-menu-link"onclick="Show('HP_show')">HP</a>
 
               <ul class="pure-menu-children" id="HP_show">
 
               <ul class="pure-menu-children" id="HP_show">
−
                 <li class="pure-menu-item"><a href="#" class="pure-menu-link">Sliver HP</a></li>
+
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/HP/Silver" class="pure-menu-link">Silver HP</a></li>
−
                 <li class="pure-menu-item"><a href="#" class="pure-menu-link">Integrated and Gold</a></li>
+
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/HP/Gold_Integrated" class="pure-menu-link">Integrated & Gold</a></li>
−
                 <li class="pure-menu-item"><a href="#" class="pure-menu-link">Public Engagement</a></li>
+
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Engagement" class="pure-menu-link">Public Engagement</a></li>
 
             </ul>
 
             </ul>
 
             </li>
 
             </li>
−
            <li class="pure-menu-item pure-menu-has-children">
 
−
              <a href="#"  class="pure-menu-link"onclick="Show('award_show')">AWARDS</a>
 
−
              <ul class="pure-menu-children" id="award_show">
 
−
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Applied Design</a></li>
 
−
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Enterpreneurship</a></li>
 
−
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Hardware</a></li>
 
−
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Measurement</a></li>
 
−
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Model</a></li>
 
−
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Plant</a></li>
 
−
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Software</a></li>
 
−
            </ul>
 
−
            </li>
 
−
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">JUDGINF FORM</a></li>
 
−
         
 
 
             </ul>
 
             </ul>
 
         </div>   
 
         </div>   
 
         </div>
 
         </div>
−
 
+
        <div id="content" class="content">
−
 
+
−
   
+
−
<div id="content"class="content">
+
 
     <ul id="lay-menu">
 
     <ul id="lay-menu">
 
         <li class="active"></li>
 
         <li class="active"></li>
Line 790: Line 328:
 
         </ul>
 
         </ul>
 
     <ul id="Qidilist">
 
     <ul id="Qidilist">
−
    <li id="home" class="liList">
+
      <li id="abstract" class="liList">
−
            <div id="homeContent" class="divList">
+
            <div class="myheader"id="main"><h1>MiRNA &nbsp;&nbsp;Locker</h1><h3>A Modularized DNA Assembly As miRNA Inhibitors</h3><button id="btn1" class="button-next">How it works?</button></div>
−
                <ul class="homeContent1">
+
            </li>
−
                    </ul>
+
      <li id="abstract" class="liList">
−
                    <ul class="homeContent2">
+
            <div class="myheader"id="main"><img class="strory-telling1" src="https://static.igem.org/mediawiki/2017/a/ad/T-NUDT_CHINA-story1.png" no-repeat; ><button id="btn2" class="button-next">Next</button></div>
−
                    </ul>
+
            </li>
−
                </div>
+
      <li id="abstract" class="liList">
 +
            <div class="myheader"id="main"><img class="strory-telling2" src="https://static.igem.org/mediawiki/2017/3/35/T-NUDT_CHINA-story2.png" no-repeat; ><button id="btn3" class="button-next">Next</button></div>
 
             </li>
 
             </li>
−
    <li id="abstract" class="liList">
+
      <li id="abstract" class="liList">
−
           
+
            <div class="myheader"id="main"><img class="strory-telling3" src="https://static.igem.org/mediawiki/2017/1/1e/T-NUDT_CHINA-story3.png" no-repeat; ><button id="btn4" class="button-next">Back</button></div>
−
                <div class="header">
+
−
            <h1>NUDT_CHINA</h1>
+
−
            <h2>The abstract of our work</h2>
+
−
              </div>
+
−
             
+
 
             </li>
 
             </li>
−
       
+
   
 
         </ul>
 
         </ul>
 
         </div>
 
         </div>
Line 812: Line 346:
 
</div>
 
</div>
 
<script type="text/javascript">
 
<script type="text/javascript">
−
(function (window, document) {
+
( function(window,document){
  
 
     var layout  = document.getElementById('layout'),
 
     var layout  = document.getElementById('layout'),
 
         menu    = document.getElementById('menu'),
 
         menu    = document.getElementById('menu'),
 
         menuLink = document.getElementById('menuLink'),
 
         menuLink = document.getElementById('menuLink'),
−
         content  = document.getElementById('content');
+
         content  = document.getElementById('main');
−
   
+
  
 
     function toggleClass(element, className) {
 
     function toggleClass(element, className) {
Line 851: Line 384:
 
         toggleAll(e);
 
         toggleAll(e);
 
     };
 
     };
 +
 
     content.onclick = function(e) {
 
     content.onclick = function(e) {
 
         if (menu.className.indexOf('active') !== -1) {
 
         if (menu.className.indexOf('active') !== -1) {
Line 856: Line 390:
 
         }
 
         }
 
     };
 
     };
−
 
−
 
  
 
}(this, this.document));
 
}(this, this.document));

Latest revision as of 02:17, 2 November 2017

HOME
TEAM
PROJECT
Description
Design
Experiments
Notebook
InterLab
Contribution
Model
Results
Demonstrate
Improve
Attributions
PARTS
Parts
Basic Parts
Composite Parts
Part Collection
SAFETY
HUMAN PRACTICES
Silver HP
Integrated and Gold
Public Engagement
AWARDS
Applied Design
Entrepreneurship
Hardware
Measurement
Model
Plant
Software
JUDGING FORM
Team:NUDT_CHINA