Difference between revisions of "Team:JSNU-China"

Line 1: Line 1:
 
{{JSNU_China/space}}
 
{{JSNU_China/space}}
 +
<!DOCTYPE html>
 
<html lang="en">
 
<html lang="en">
 
<head>
 
<head>
 
<meta charset="UTF-8">
 
<meta charset="UTF-8">
<title>Home</title>
+
<title>home</title>
 
<style>
 
<style>
body{
+
@media (max-width: 992px){
background-image: url(https://static.igem.org/mediawiki/2016/c/c0/Jsnuchina_body.jpg);
+
body,div,h3,p{
background-repeat: no-repeat;
+
margin: 0px;
background-size: 100% auto;
+
padding: 0px;
background-attachment: fixed;
+
}
}
+
  
/* top******************************************************** */
+
a{
 +
list-style: none;
 +
text-decoration: none;
 +
}
 +
 +
#top{
 +
width: 100%;
 +
height: 500px;
 +
background-color: white;
 +
background-image: url(https://static.igem.org/mediawiki/2016/a/a1/Jsnuchina_img_body.jpg
 +
);
 +
background-size: 100% 500px;
 +
background-repeat: no-repeat;
 +
}
  
#top{
+
#smallnavigation{
width: 100%;
+
width: 100%;
height: auto;
+
height: 100px;
float: left;
+
}
+
  
#navleft{
+
}
width: 40%;
+
 
height: 200px;
+
 
float: left;
+
span.navlogo{
 +
float: right;
 +
margin-top: 20px;
 +
width: 10%;
 +
height: 70px;
 
}
 
}
  
#logo{
 
z-index: 999999;
 
width: 18%;
 
height: 200px;
 
float: left;
 
  
 +
#smallnavs{
 +
width: 100%;
 +
height: 300px;
 +
position: absolute;
 +
top:90px;
 +
background-color: rgba(255,255,255,0.95);
 +
z-index: 999;
 +
display: none;
 
}
 
}
#logo img{
+
 
 +
#onesmallnav{
 +
width: 100%;
 +
 +
}
 +
#onesmallnav p{
 +
color:rgba(0,0,0,0.9);
 +
margin:12px 0 10px 5%;
 +
}
 +
 
 +
 
 +
#smallnavselect{
 +
width: 100%;
 +
height: 1px;
 +
border-top: 1px solid rgb(146,194,40);
 +
display:none;
 +
}
 +
 
 +
.smallnavmouse{
 +
display: block !important;
 +
animation:smallnavmous 1s infinite;
 +
-moz-animation:smallnavmous 1s infinite; /*Firefox*/
 +
-webkit-animation:smallnavmous 1s infinite; /*Safari and Chrome*/
 +
animation-iteration-count:1;
 +
-moz-animation-iteration-count:1; /*Firefox*/
 +
-webkit-animation-iteration-count:1; /*Safari and Chrome*/
 +
}
 +
 
 +
@keyframes smallnavmous
 +
{
 +
from {width:0;}
 +
to {width:100%;}
 +
}
 +
@-moz-keyframes smallnavmous/*Firefox*/
 +
{
 +
from {width:0;}
 +
to {width:100%;}
 +
}
 +
@-webkit-keyframes smallnavmous /*Safari and Chrome*/
 +
{
 +
from {width:0;}
 +
to {width:100%;}
 +
}
 +
 
 +
 
 +
.smallnavmouseout{
 +
animation:smallnavmouseou 1s infinite;
 +
-moz-animation:smallnavmouseou 1s infinite; /*Firefox*/
 +
-webkit-animation:smallnavmouseou 1s infinite; /*Safari and Chrome*/
 +
animation-iteration-count:1;
 +
-moz-animation-iteration-count:1; /*Firefox*/
 +
-webkit-animation-iteration-count:1; /*Safari and Chrome*/
 +
}
 +
 
 +
@keyframes smallnavmouseou
 +
{
 +
from {width:100%;}
 +
to {width:0;}
 +
}
 +
@-moz-keyframes smallnavmouseou/*Firefox*/
 +
{
 +
from {width:100%;}
 +
to {width:0;}
 +
}
 +
@-webkit-keyframes smallnavmouseou /*Safari and Chrome*/
 +
{
 +
from {width:100%;}
 +
to {width:0;}
 +
}
 +
 
 +
 
 +
#navigation{
 +
display: none;
 +
}
 +
 
 +
#smallslider{
 +
width: 100%;
 +
height: 350px;
 +
margin-top: 50px;
 +
overflow: hidden;
 +
position: relative;
 +
}
 +
 
 +
#onesmallslider{
 +
width: 100%;
 +
height: 350px;
 +
position: absolute;
 +
            left:100%;
 +
            top:0;
 +
}
 +
 
 +
#onesmallslider h2{
 +
color: white;
 +
font-family: 幼圆;
 +
text-align: center;
 +
font-size: 1.4em;
 +
}
 +
 
 +
#smallsliderimg{
 
width: 80%;
 
width: 80%;
z-index: 9999;
+
height: 280px;
 +
margin-left: 10%;
 +
background-color: rgba(255,255,255,0.5);
 
}
 
}
  
#navright{
+
#slider{
width: 41%;
+
display: none;
height: 200px;
+
}
float: left;
+
}
  
 +
 +
 +
 +
@media (min-width: 993px){
 +
body,div,a{
 +
margin: 0px;
 +
padding: 0px;
 +
}
 +
 +
 +
#top{
 +
width: 100%;
 +
height: 670px;
 +
background-color: white;
 +
background-image: url(https://static.igem.org/mediawiki/2016/a/a1/Jsnuchina_img_body.jpg
 +
);
 +
background-size: 100% 670px;
 +
background-repeat: no-repeat;
 +
}
 +
 +
#smallnavigation{
 +
display: none;
 +
}
 +
 +
#navigation{
 +
width: 100%;
 +
height: 150px;
 +
}
 +
 +
#onenav{
 +
width: 7%;
 +
height: 140px;
 +
float: right;
 +
margin:0 8px 0 0;
 +
 +
position: relative;
 
}
 
}
  
ul.bignav{
+
#onenav > h3{
list-style: none;
+
text-align: center;
margin-top:80px;
+
top: 40px;
width: 100%;
+
left: 12%;
padding-left: 0px;
+
font-size: 0.9em;
                        position: relative;
+
font-family: 微软雅黑;
 +
font-weight: normal;
 +
color: #333;
 +
display: block !important;
 +
position: absolute;
 
}
 
}
  
ul.bignav >li{
+
 
 +
#smallnav{
 +
width: 100%;
 +
height: 140px;
 
float: left;
 
float: left;
font-family: 黑体;
+
background-color: rgb(146, 197, 40);
font-size: 1.5em;
+
border-radius: 0 0 8px 8px;
width: 25%;
+
display: none;
 +
color: white;
 
text-align: center;
 
text-align: center;
 +
font-size: 0.8em;
 +
overflow: hidden;
 +
animation:smallnavtoggle 1s infinite;
 +
-moz-animation:smallnavtoggle 1s infinite; /*Firefox*/
 +
-webkit-animation:smallnavtoggle 1s infinite; /*Safari and Chrome*/
 +
animation-iteration-count:1;
 +
-moz-animation-iteration-count:1; /*Firefox*/
 +
-webkit-animation-iteration-count:1; /*Safari and Chrome*/
 
}
 
}
 
+
ul.bignav >li.firstli{
+
width: 44%;
+
@keyframes smallnavtoggle
 +
{
 +
from {height:0px;}
 +
to {height:140px;}
 
}
 
}
 
+
@-moz-keyframes smallnavtoggle/*Firefox*/
ul.bignav >li.nofirstli{
+
{
width: 28%;
+
from {height:0px;}
 +
to {height:140px;}
 +
}
 +
@-webkit-keyframes smallnavtoggle /*Safari and Chrome*/
 +
{
 +
from {height:0px;}
 +
to {height:140px;}
 
}
 
}
  
ul.bignav >li>a{
+
.appear{
color: white;
+
display: block !important;
text-decoration: none;
+
 
}
 
}
 +
  
ul.bignav >li>a:hover{
+
#smallslider{
color: #333;
+
display: none;
text-decoration: none;
+
 
}
 
}
  
              ul.smallnav{
+
#onesmallslider{
position: absolute;
+
width: 25%;
+
height: auto;
+
background-color: white;
+
border: 1px solid rgb(204,204,204);
+
border-radius: 8px;
+
list-style: none;
+
padding-top: 6px;
+
padding-bottom: 6px;
+
 
display: none;
 
display: none;
                        padding-left: 3%;
 
 
}
 
}
  
ul.smallnav > li{
+
#smallsliderimg{
font-family: 黑体;
+
display: none;
font-size: 0.8em;
+
text-align: left;
+
color: rgba(0,0,0,0.7);
+
font-weight: 500;
+
 
}
 
}
  
  
 +
#slider{
 +
width: 100%;
 +
height: 390px;
 +
margin-top: 80px;
 +
position: relative;
 +
overflow: hidden;
 +
float: left;
 +
}
  
/* content******************************************************** */
+
#oneslider{
 +
width:100% ;
 +
height: 390px;
 +
float: left;
 +
position: absolute;
 +
            left:100%;
 +
            top:0;
 +
}
  
 +
#oneslider h3{
 +
color: white;
 +
text-align: center;
 +
font-size: 1.8em;
 +
font-family: 幼圆;
 +
letter-spacing: 3px;
 +
}
  
#content{
 
width: 86%;
 
float: left;
 
margin-left: 7%;
 
margin-top: 50px;
 
background-color:transparent;
 
 
}
 
  
 +
#sliderleft{
 +
width: 33%;
 +
height: 300px;
 +
background-color: rgba(255,255,255,0.5);
 +
float: left;
 +
margin:10px 2% 0 14%;
 +
}
  
#main{
+
#sliderright{
width: 100%;
+
width: 33%;
height: 1000px;
+
height: 300px;
float: left;
+
background-color: rgba(255,255,255,0.5);
                background-color:white;
+
float: left;
                border-radius: 1em 1em 0em 0em;
+
margin:10px 14% 0 2%;
}
+
}
#bottomnav{
+
width: 100%;
+
height: 200px;
+
float: left;
+
background-color: rgb(85,71,42);
+
}
+
  
  
/* footer******************************************************** */
 
  
  
#footer{
+
#content{
width: 100%;
+
height: 1000px;
float: left;
+
}
 
+
}
+
 
+
#footer p{
+
text-align: center;
+
margin-top: 30px;
+
font-size: 0.9em;
+
color: #333;
+
 
+
 
}
 
}
 
</style>
 
</style>
Line 151: Line 320:
 
<body>
 
<body>
 
<div id="top">
 
<div id="top">
<div id="navleft">
+
<div id="smallnavigation">
<ul class="bignav">
+
<span class="navlogo"><img src="https://static.igem.org/mediawiki/2016/d/dd/Jsnuchina_img_btn.jpg" width="80%"></span>
<li onmouseover="displaynav('project')" onmouseout="hidenav('project')">
+
<div id="smallnavs">
                          <a href="https://2016.igem.org/Team:JSNU-China/projectpage"><img src="https://static.igem.org/mediawiki/2016/3/3e/Jsnuchina_hand3.jpg" style="width:20%;">PROJECT</a>
+
<div id="onesmallnav">
                            <ul class="smallnav" id="project">
+
<p >· Home</p>
<li>Background</li>
+
<div id="smallnavselect" class="smallnavmouse"></div>
<li>Design</li>
+
</div>
<li>Result</li>
+
<div id="onesmallnav">
<li>Protocol</li>
+
<a href="project.html" class="smalltitle"><p>· Project&nbsp;&nbsp;(Background | Design | Result | Protocal)</p></a>
</ul>
+
<div id="smallnavselect"></div>
                                </li>
+
</div>
<li onmouseover="displaynav('modeling')" onmouseout="hidenav('modeling')">
+
<div id="onesmallnav">
                                  <a href="https://2016.igem.org/Team:JSNU-China/modelingpage"><img src="https://static.igem.org/mediawiki/2016/5/54/Jsnuchina_hand1.jpg" style="width:20%;">MODELING</a>
+
<a href="modeling.html" class="smalltitle"><p>· Modeling&nbsp;&nbsp;(Overview | Date analysis)</p></a>
                              <ul class="smallnav" id="modeling">
+
<div id="smallnavselect"></div>
<li>Overview</li>
+
</div>
<li>date analysis</li>
+
<div id="onesmallnav">
</ul>
+
<a href="parts.html" class="smalltitle"><p >· Parts</p></a>
                              </li>
+
<div id="smallnavselect"></div>
<li><a href="https://2016.igem.org/Team:JSNU-China/partspage"><img src="https://static.igem.org/mediawiki/2016/3/38/Jsnuchina_hand4.jpg" style="width:20%;">PARTS</a></li>
+
</div>
<li onmouseover="displaynav('team')" onmouseout="hidenav('team')">
+
<div id="onesmallnav">
                              <a href="https://2016.igem.org/Team:JSNU-China/teampage"><img src="https://static.igem.org/mediawiki/2016/a/ab/Jsnuchina_hand5.jpg" style="width:20%;">TEAM</a>
+
<a href="team.html" class="smalltitle"><p>· Team&nbsp;&nbsp;(Member | Attribution)</p></a>
<ul class="smallnav" id="team">
+
<div id="smallnavselect"></div>
<li>Member</li>
+
</div>
<li>Instruction</li>
+
<div id="onesmallnav">
</ul>
+
<a href="human.html" class="smalltitle"><p >· Human Partictice&nbsp;&nbsp;(Activities | Questionnaire | Communication | Sponsor)</p></a>
</li>
+
<div id="smallnavselect"></div>
</ul>
+
</div>
 +
<div id="onesmallnav">
 +
<a href="notebook.html" class="smalltitle"><p>· Notebook</p></a>
 +
<div id="smallnavselect"></div>
 +
</div>
 +
<div id="onesmallnav">
 +
<a href="safety.html" class="smalltitle"><p >· Safety</p></a>
 +
<div id="smallnavselect"></div>
 +
</div>
 +
</div>
 
</div>
 
</div>
<div id="logo">
+
<div id="navigation">
<center>
+
<a href="safety.html">
<a href="https://2016.igem.org/Team:JSNU-China"><img src="https://static.igem.org/mediawiki/2016/c/c8/Jsnuchina_logo.jpg" alt="logo"></a>
+
<div id="onenav">
</center>
+
<h3 alt="Safety" class="navtitle">Safety</h3>
 +
<div id="smallnav" class="smallnavs">
 +
<br><br><br>
 +
Safety
 +
</div>
 +
</div>
 +
</a>
 +
<a href="notebook.html">
 +
<div id="onenav">
 +
<h3 alt="Notebook" class="navtitle">Notebook</h3>
 +
<div id="smallnav" class="smallnavs">
 +
<br><br><br>
 +
Notebook
 +
</div>
 +
</div>
 +
</a>
 +
<a href="human.html">
 +
<div id="onenav">
 +
<h3 alt="Human Partictice" class="navtitle">Human Partictice</h3>
 +
<div id="smallnav" class="smallnavs">
 +
<br>
 +
Activities
 +
<br><br>
 +
Questionnaire
 +
<br><br>
 +
Communication
 +
<br><br>
 +
Sponsor
 +
</div>
 +
</div>
 +
</a>
 +
<a href="team.html">
 +
<div id="onenav">
 +
<h3 alt="Team" class="navtitle">Team</h3>
 +
<div id="smallnav" class="smallnavs">
 +
<br><br><br>
 +
Member
 +
<br><br>
 +
Attribution
 +
</div>
 +
</div>
 +
</a>
 +
<a href="parts.html">
 +
<div id="onenav">
 +
<h3 alt="Parts" class="navtitle">Parts</h3>
 +
<div id="smallnav" class="smallnavs">
 +
<br><br><br><br>
 +
Parts
 +
</div>
 +
</div>
 +
</a>
 +
<a href="modeling.html">
 +
<div id="onenav">
 +
<h3 alt="Modeling" class="navtitle">Modeling</h3>
 +
<div id="smallnav" class="smallnavs">
 +
<br><br><br>
 +
Overview
 +
<br><br>
 +
Date analysis
 +
</div>
 +
</div>
 +
</a>
 +
<a href="project.html">
 +
<div id="onenav">
 +
<h3 alt="Project" class="navtitle">Project</h3>
 +
<div id="smallnav" class="smallnavs">
 +
<br>
 +
Background
 +
<br><br>
 +
Design
 +
<br><br>
 +
Result
 +
<br><br>
 +
Protocal
 +
</div>
 +
</div>
 +
</a>
 +
<div id="onenav">
 +
<h3 alt="Home">Home</h3>
 +
<div id="smallnav" class="appear"></div>
 +
</div>
 +
 
</div>
 
</div>
<div id="navright">
+
<div id="smallslider">
<ul class="bignav">
+
<div id="onesmallslider" class="smallslider1">
<li class="firstli" onmouseover="displaynav('human')" onmouseout="hidenav('human')"><a href="https://2016.igem.org/Team:JSNU-China/humanpage"><img src="https://static.igem.org/mediawiki/2016/b/b6/Jsnuchina_hand9.jpg" style="width:12%;">HUMAN PARTICTICE</a>
+
<h2>失败是成功之母</h2>
<ul class="smallnav" id="human">
+
<div id="smallsliderimg">
<li>Activities</li>
+
<img src="https://static.igem.org/mediawiki/2016/c/c9/Jsnuchina_img_slider2.png" style="width:70%;height:250px;margin:18px 0 0 13%" >
<li>Questionnaire</li>
+
</div>
<li>Communication</li>
+
</div>
<li>sponsor</li>
+
<div id="onesmallslider" class="smallslider2">
</ul>
+
<h2>这是我的一小步,确是人类的一大步</h2>
</li>
+
<div id="smallsliderimg">
<li class="nofirstli"><a href="https://2016.igem.org/Team:JSNU-China/notebookpage"><img src="https://static.igem.org/mediawiki/2016/6/69/Jsnuchina_hand7.jpg" style="width:16%;">NOTEBOOK</a></li>
+
<img src="https://static.igem.org/mediawiki/2016/9/9e/Jsnuchina_img_slider3.png
<li class="nofirstli"><a href="https://2016.igem.org/Team:JSNU-China/safetypage"><img src="https://static.igem.org/mediawiki/2016/3/3b/Jsnuchina_hand6.jpg
+
" style="width:70%;height:250px;margin:18px 0 0 13%" >
" style="width:16%;">SAFETY</a></li>
+
</div>
</ul>
+
</div>
 +
<div id="onesmallslider" class="smallslider3">
 +
<h2>早起的鸟儿有虫吃</h2>
 +
<div id="smallsliderimg">
 +
<img src="https://static.igem.org/mediawiki/2016/5/5b/Jsnuchina_img_slider6.png" style="width:70%;height:250px;margin:18px 0 0 13%" >
 +
</div>
 +
</div>
 +
</div>
 +
<div id="slider">
 +
<div id="oneslider" class="slider1">
 +
<h3>失败是成功之母</h3>
 +
<div id="sliderleft">
 +
<img src="https://static.igem.org/mediawiki/2016/f/f7/Jsnuchina_img_slider1.png" style="width:70%;height:250px;margin:18px 0 0 13%" >
 +
</div>
 +
<div id="sliderright">
 +
<img src="https://static.igem.org/mediawiki/2016/c/c9/Jsnuchina_img_slider2.png" style="width:70%;height:250px;margin:18px 0 0 13%" >
 +
</div>
 +
</div>
 +
<div id="oneslider" class="slider2">
 +
<h3>这是我的一小步,确是人类的一大步</h3>
 +
<div id="sliderleft">
 +
<img src="https://static.igem.org/mediawiki/2016/9/9e/Jsnuchina_img_slider3.png
 +
" style="width:70%;height:250px;margin:18px 0 0 13%" >
 +
</div>
 +
<div id="sliderright">
 +
<img src="https://static.igem.org/mediawiki/2016/f/f3/Jsnuchina_img_slider4.png" style="width:70%;height:250px;margin:18px 0 0 13%" >
 +
</div>
 +
</div>
 +
<div id="oneslider" class="slider3">
 +
<h3>早起的鸟儿有虫吃</h3>
 +
<div id="sliderleft">
 +
<img src="https://static.igem.org/mediawiki/2016/e/e2/Jsnuchina_img_slider5.png" style="width:70%;height:250px;margin:18px 0 0 13%" >
 +
</div>
 +
<div id="sliderright">
 +
<img src="https://static.igem.org/mediawiki/2016/5/5b/Jsnuchina_img_slider6.png" style="width:70%;height:250px;margin:18px 0 0 13%" >
 +
</div>
 +
</div>
 
</div>
 
</div>
 
</div>
 
</div>
<div id="content">
+
<div id="content"></div>
<div id="main"></div>
+
 
<div id="bottomnav"></div>
+
<script src="https://2016.igem.org/Team:JSNU-China/jquery" ></script>
</div>
+
<div id="footer">
+
<p>&copy; Copyright &copy; 2014.Company name All rights reserved.</p>
+
</div>
+
  
<script src="https://2016.igem.org/Team:JSNU-China/jquery"></script>
 
 
<script>
 
<script>
function displaynav(item){
+
$(function(){
$("#"+item).css("display","block")
+
$(".navlogo").click(function(){
}
+
$("#smallnavs").toggle()
 +
})
 +
})
 +
$(function(){
 +
$(".smalltitle").on("mouseover",function(){
 +
$(this).siblings("#smallnavselect").addClass("smallnavmouse");
 +
$(this).siblings("#smallnavselect").removeClass("smallnavmouseout");
  
function hidenav(item){
+
})
$("#"+item).css("display","none")
+
 
}
+
$(".smalltitle").on("mouseout",function(){
 +
$(this).siblings("#smallnavselect").addClass("smallnavmouseout");
 +
$(this).siblings("#smallnavselect").removeClass("smallnavmouse");
 +
 
 +
})
 +
})
 
</script>
 
</script>
</body>
+
<script>
 +
$(function(){
 +
$(".navtitle").on("mouseover",function(){
 +
$(this).text("");
 +
$(this).siblings(".smallnavs").css("display","block");
 +
});
 +
 
 +
 
 +
$(".smallnavs").on("mouseout",function(){
 +
$(this).css("display","none");
 +
$navtitle=$(this).siblings("h3").attr("alt");
 +
$(this).siblings("h3").text($navtitle);
 +
})
 +
 
 +
})
 +
 
 +
</script>
 +
<script>
 +
        $(function(){
 +
        if($(window).width()<=992){
 +
            $(".smallslider1").css("left","0");
 +
            $(".smallslider2").css("left","100%");
 +
            $(".smallslider3").css("left","100%");
 +
 
 +
            setTimeout(function(){
 +
                        smallslidershow(1);
 +
            },3000);
 +
 
 +
            function smallslidershow(num){
 +
               
 +
                number1=parseInt(num);
 +
                number2=number1+1;
 +
               
 +
                if (number2==4) {
 +
                    number2=1;
 +
                }
 +
                $(".smallslider"+number1).animate({left:"-100%"},1000,function(){
 +
                    $(".smallslider"+number1).css("left","100%");
 +
                });
 +
 
 +
                $(".smallslider"+number2).animate({left:"0"},1000,function(){
 +
                    setTimeout(function(){
 +
                        smallslidershow(number2);
 +
                    },3000);
 +
                });
 +
               
 +
            }
 +
        }
 +
        })
 +
    </script>
 +
<script>
 +
        $(function(){
 +
        if($(window).width()>992){
 +
            $(".slider1").css("left","0");
 +
            $(".slider2").css("left","100%");
 +
            $(".slider3").css("left","100%");
 +
 
 +
            setTimeout(function(){
 +
                        slidershow(1);
 +
            },3000);
 +
 
 +
            function slidershow(num){
 +
               
 +
                number1=parseInt(num);
 +
                number2=number1+1;
 +
               
 +
                if (number2==4) {
 +
                    number2=1;
 +
                }
 +
                $(".slider"+number1).animate({left:"-100%"},1000,function(){
 +
                    $(".slider"+number1).css("left","100%");
 +
                });
 +
 
 +
                $(".slider"+number2).animate({left:"0"},1000,function(){
 +
                    setTimeout(function(){
 +
                        slidershow(number2);
 +
                    },3000);
 +
                });
 +
               
 +
            }
 +
        }
 +
        })
 +
    </script>
 +
</body>  
 
</html>
 
</html>

Revision as of 12:37, 5 September 2016

<!DOCTYPE html> home