Team:OUC-China/Team Instructor

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
{{CSS/Main}}
{{CSS/Main}}
<html>
<html>
-
<link href="https://2014.igem.org/Team:OUC-China/css/bootstrap.css?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css" />
+
<script src="https://2014.igem.org/Team:OUC-China/js/jquery.js?action=raw&ctype=text/javascript"></script>
-
    <link href="https://2014.igem.org/Team:OUC-China/css/topsection.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" />
+
<style>
-
    <script src="https://2014.igem.org/Team:OUC-China/js/jquery.js?action=raw&ctype=text/javascript"></script>
+
@charset "utf-8";
-
    <script src="https://2014.igem.org/Team:OUC-China/js/bootstrap.js?action=raw&ctype=text/javascript"></script>
+
/* CSS Document */
-
    <style>
+
body, div, p, ul, li, h1, h2, h3, h4, h5, h6 {
-
        body {
+
margin: 0px;
-
            background-color: #609fd2;
+
padding: 0px;
-
            background-repeat: repeat;
+
font-family: "微软雅黑";
-
            background-image: url(https://static.igem.org/mediawiki/2014/1/19/OUC-China_Content_Background.png);
+
}
-
        }
+
body{
-
        .team {
+
    min-width:1350px;
-
            height: 281px;
+
}
-
            background-color: #d2e9fd;
+
ul, ol {
-
        }
+
list-style: none;
-
        .team > div:first-child {
+
}
-
            width: 1024px;
+
img {
-
            margin: 0 auto;
+
display: block;
-
        }
+
position: absolute;
-
        .team .nami {
+
}
-
            position: relative;
+
a {
-
            height: 130px;
+
color: inherit;
-
            background-repeat: repeat-x;
+
text-decoration: none;
-
        }
+
}
-
        .team .plas {
+
 
-
            margin-top: 40px;
+
.header {
-
            position: relative;
+
height: 240px;
-
            z-index: 5;
+
width: 100%;
-
            -webkit-transition: all ease 0.4s;
+
background: rgb(210,233,253);
-
            -moz-transition: all ease 0.4s;
+
position: relative;
-
            -ms-transition: all ease 0.4s;
+
}
-
            -o-transition: all ease 0.4s;
+
.header .igemLogo {
-
            transition: all ease 0.4s;
+
top: 27px;
-
        }
+
left: 66px;
-
        .team .plas:hover {
+
transition: 0.3s;
-
            margin-top:30px;
+
-moz-transition: 0.3s;
-
        }
+
-o-transition: 0.3s;
-
        header {
+
-webkit-transition: 0.3s;
-
            background-color: #609fd2;
+
}
-
        }
+
.header .igemLogo:hover {
-
        header > div {
+
transform: rotate(360deg);
-
            width: 765px;
+
-moz-transform: rotate(360deg);
-
            margin: 0 auto;
+
-ms-transform: rotate(360deg);
-
            height: 53px;
+
-o-transform: rotate(360deg);
-
        }
+
-webkit-transform: rotate(360deg);
-
        header > div > img.igemlogo {
+
}
-
            position: relative;
+
.header .waveUp {
-
            z-index: 10;
+
position: absolute;
-
        }
+
bottom: 0px;
-
        header > div > div {
+
width: 100%;
-
            display: inline-block;
+
height: 110px;
-
            margin: -53px auto 0 85px;
+
background: url(images/waveUp.png) repeat-x;
-
            padding-top: 8px;
+
}
-
            float: left;
+
.header .waveDown {
-
        }
+
position: absolute;
-
        header > div > img.teamlogo {
+
bottom: 0px;
-
            margin-top: -45px;
+
width: 100%;
-
            position: relative;
+
height: 70px;
-
            z-index: 10;
+
background: url(images/waveDown2.png) repeat-x;
-
            width: 83px;
+
z-index: 1;
-
            height: 83px;
+
}
-
            margin-left: 682px;
+
.header .objLeft {
-
        }
+
left: 211px;
-
        .team {
+
top: 26px;
-
            height: 240px;
+
z-index: 0;
-
            background-color: #d2e9fd;
+
}
-
        }
+
.header .objRight {
-
        .team > div:first-child {
+
right: 230px;
-
            width: 1024px;
+
top: 28px;
-
            margin: 0 auto;
+
transition: 0.5s;
-
        }
+
-webkit-transition: 0.5s;
-
        .team .nami {
+
z-index: 0;
-
            position: relative;
+
}
-
            height: 130px;
+
.header .objRight:hover {
-
            background-repeat: repeat-x;
+
margin-top: 10px;
-
        }
+
}
-
        .team .plas {
+
.header .nav {
-
            margin-top: -55px;
+
top: 200px;
-
            position: relative;
+
z-index: 2;
-
            z-index: 5;
+
}
-
            width: 100px;
+
.header .nav ul{ width:800px; margin:auto;}
-
            height: 100px;
+
.main {
-
            -webkit-transition: all ease 0.4s;
+
width: 100%;
-
            -moz-transition: all ease 0.4s;
+
background-image: url(images/background.png);
-
            -ms-transition: all ease 0.4s;
+
background-color: rgb(96,159,210);
-
            -o-transition: all ease 0.4s;
+
position:relative;
-
            transition: all ease 0.4s;
+
}
-
        }
+
.main .mainBox {
-
        .team .plas:hover {
+
width: 800px;
-
            margin-top:-65px;
+
height: 1000px;
-
         }
+
background: rgb(114,187,227);
-
     </style>
+
margin: 0 auto;
-
<script>
+
}
-
        if ($('.firstHeading')) $('.firstHeading').remove();
+
.main .menu{
-
        $('#top-section').css({ 'position': 'relative' });
+
position: absolute;
-
        $('#bodyContent p:eq(0)').css({ margin: 0 });
+
top: 0px;
-
        $('#top-section').css({ position: 'fixed' });
+
}
 +
.main dt,.main dd{
 +
    border:1px dashed #000;
 +
color:#006CD9;
 +
background:#FAFAFA;
 +
height:30px;
 +
line-height:30px;
 +
text-align:center;
 +
}
 +
.footer {
 +
width: 100%;
 +
height: 100px;
 +
background: rgb(39,119,183);
 +
}
 +
.footer #top {
 +
height: 150px;
 +
position: fixed;
 +
bottom: 30px;
 +
right: 30px;
 +
z-index: 1000;
 +
transition: 0.5s;
 +
}
 +
.footer #top:hover {
 +
transform: rotate(180deg);
 +
-moz-transform: rotate(180deg);
 +
-ms-transform: rotate(180deg);
 +
-o-transform: rotate(180deg);
 +
-webkit-transform: rotate(180deg);
 +
}
 +
@charset "utf-8";
 +
/* CSS Document */
 +
.nav {
 +
position:relative;
 +
}
 +
.nav li {
 +
padding: 0 8px;
 +
float: left;
 +
position: relative;
 +
min-width: 80px;
 +
height: 40px;
 +
color: rgb(60,60,60);
 +
font-size: 24px;
 +
line-height: 40px;
 +
text-align: center;
 +
transition: 0.3s;
 +
-moz-transition: 0.3s;
 +
-o-transition: 0.3s;
 +
-webkit-transition: 0.3s;
 +
}
 +
.nav li:hover {
 +
background: rgb(146,205,253);
 +
color: #fff;
 +
}
 +
.nav .pMenu ul {
 +
display: none;
 +
position: absolute;
 +
top: 100%;
 +
left: 0px;
 +
overflow: hidden;
 +
border-bottom-left-radius: 6px;
 +
border-bottom-right-radius: 6px;
 +
}
 +
.nav .pMenu ul li {
 +
min-width: 220px;
 +
background: rgb(146,205,253);
 +
color: #fff;
 +
transition: 0.4s;
 +
-moz-transition: 0.4s;
 +
-o-transition: 0.4s;
 +
-webkit-transition: 0.4s;
 +
}
 +
.nav .pMenu ul li:hover {
 +
background: rgb(98,175,243);
 +
}
 +
#stt{ width:230px;  font-size:12px;}
 +
dl{ line-height:25px;border-bottom:#999 1px dashed;}
 +
</style>
 +
<div class = "header"> <img class = "igemLogo" src="images/IGEMLogoS.png">
 +
  <div class = "waveUp"></div>
 +
  <div class = "waveDown"></div>
 +
  <div style="margin:auto; width:500px;"><img src="images/plasmid adventure.png" ></div> <img id = "objLeft" class = "objLeft" src="images/objLeft.png"><img class = "objRight" src="images/objRight.png">
 +
  <div class = "nav">
 +
    <ul>
 +
      <li>HOME</li>
 +
      <li class = "pMenu">TEAM
 +
         <ul>
 +
          <li><a href="#">team members</a></li>
 +
          <li><a href="#">instructor</a></li>
 +
          <li><a href="#">Acknowledgement</a></li>
 +
        </ul>
 +
      </li>
 +
      <li>PROJECT</li>
 +
      <li>JUDING</li>
 +
      <li>SAFETY</li>
 +
      <li>NOTEBOOK</li>
 +
     </ul>
 +
    <script>
 +
  var originalLeft = $("#objLeft").offset().left;
 +
  $("#objLeft").hover(function(){
 +
if($("#objLeft").offset().left == originalLeft) $(this).animate({marginTop:'10px'});
 +
  },function(){
 +
    $(this).animate({marginTop:'0px'});
 +
  });
 +
  $(".nav>ul li").mouseover(function(){
 +
if($(this).offset().left < $("#objLeft").offset().left) document.getElementById("objLeft").src = "images/objLeft2.png";
 +
else document.getElementById("objLeft").src = "images/objLeft.png";
 +
$("#objLeft").stop(false).animate({left:$(this).offset().left-50},800);
 +
  });
 +
  $(".nav>ul").mouseout(function(){
 +
document.getElementById("objLeft").src = "images/objLeft2.png";
 +
$("#objLeft").stop(false).animate({left:originalLeft},800,function(){
 +
  document.getElementById("objLeft").src = "images/objLeft.png";
 +
});
 +
  });
     </script>
     </script>
-
<div class="team">
+
  </div>
-
        <div>
+
  <script>
-
            <img src="https://static.igem.org/mediawiki/2014/a/a1/OUC_China_Content_Title.png" style="margin:0 auto;display:block" />
+
  // JavaScript Document
-
            <img class="plas" src="https://static.igem.org/mediawiki/2014/4/41/OUC-China_Index_Plasmid1.png" style="float:left" />
+
$(".pMenu").mouseover(function(){
-
            <img class="plas" src="https://static.igem.org/mediawiki/2014/e/e6/OUC-China_Index_Plasmid2.png" style="float:right" />
+
  $(this).find("ul").slideDown();
-
        </div>
+
});
-
        <div class="nami" style="background-image:url(https://static.igem.org/mediawiki/2014/7/7e/OUC-China_Index_Tsunami1.png);margin-top:-20px;z-index:1"> </div>
+
$(".pMenu").mouseleave(function(){
-
        <div class="nami" style="background-image:url(https://static.igem.org/mediawiki/2014/8/83/OUC-China_Index_Tsunami2.png);margin-top:-130px;z-index:10"> </div>
+
  $(this).find("ul").slideUp(function(){
-
    </div>
+
    $(this).clearQueue();
-
    <header>
+
  });
-
        <div>
+
});
-
            <img class="igemlogo" src="https://static.igem.org/mediawiki/2014/c/c6/OUC-China_Content_IGEM.png" usemap="IGEM" />
+
  </script>  
-
            <map name="IGEM">
+
</div>
-
                <area shape="rect" href="https://igem.org/Main_Page" coords="0,0,80,54" alt="IGEM Homepage">
+
<div class = "main">
-
            </map>
+
  <div class = "mainBox"></div>
-
            <div class="navbar navbar-inverse" style="margin-bottom:0">
+
  <!--<ul class = "menu">
-
                <div class="navbar-collapse collapse navbar-inverse-collapse">
+
    <li><a href="#">team introduction</a></li>
-
                    <ul class="nav navbar-nav">
+
    <li><a href="#">member</a></li>
-
                        <li><a href="https://2014.igem.org/Team:OUC-China">HOME</a></li>
+
  </ul>
-
                        <li class="dropdown active">
+
  更改-->
-
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">TEAM <b class="caret"></b></a>
+
  <script type="text/javascript">
-
                            <ul class="dropdown-menu">
+
  $(function()
-
                                <li><a href="https://2014.igem.org/Team:OUC-China/Team">Team members</a></li>
+
  { 
-
                                <li><a href="https://2014.igem.org/Team:OUC-China/Team_Instructor">Instructor</a></li>
+
      //隐藏除第一个dl里的dd外所有的dd
-
                                <li><a href="https://2014.igem.org/Team:OUC-China/Team_Acknowledgment">Acknowledgment</a></li>
+
  //$("#stt dl dd").hide();
-
                                <li><a href="https://2014.igem.org/Team:OUC-China/Team_Lab">Lab</a></li>
+
  //点击时触发一个函数
-
                                <li><a href="https://igem.org/Team.cgi?year=2014&team_name=OUC-China">Official team profile</a></li>
+
  $("#stt dt").click(function()
-
                            </ul>
+
  {
-
                        </li>
+
  $b=$(this).siblings("dd");//除了当前，其他dd
-
                        <li class="dropdown">
+
  if($b.is(":visible"))//判断是否是展开的，如果展开执行下面代码
-
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">PROJECT <b class="caret"></b></a>
+
  {
-
                            <ul class="dropdown-menu">
+
$($b).slideUp();
-
                                <li><a href="https://2014.igem.org/Team:OUC-China/Project">Overview</a></li>
+
  $(this).parents("dl").siblings("dl").children("dd").slideUp();
-
                                <li><a href="https://2014.igem.org/Team:OUC-China/Project_Background">Background</a></li>
+
  }
-
                                <li><a href="https://2014.igem.org/Team:OUC-China/Project_Design">Design</a></li>
+
  else//不是执行else代码
-
                                <li><a href="https://2014.igem.org/Team:OUC-China/Project_Result">Result</a></li>
+
  {
-
                                <li><a href="https://2014.igem.org/Team:OUC-China/Project_Future">Future</a></li>
+
$($b).slideDown();
-
                                <li><a href="https://2014.igem.org/Team:OUC-China/Project_Modeling">Modeling</a></li>
+
$(this).parents("dl").siblings("dl").children("dd").slideUp();
-
                            </ul>
+
  }
-
                        </li>
+
  });
-
                        <li class="dropdown">
+
 
-
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">JUDGING <b class="caret"></b></a>
+
  })
-
                            <ul class="dropdown-menu">
+
</script>
-
                                <li><a href="https://2014.igem.org/Team:OUC-China/Judging">Biobrick</a></li>
+
<div style="width:1300px; margin:auto;">
-
                                <li><a href="https://2014.igem.org/Team:OUC-China/Judging_Achievment">Achievment</a></li>
+
  <div id="stt" class="menu">
-
                            </ul>
+
  <dl>
-
                        </li>
+
    <dt>
-
                        <li class="dropdown">
+
        <span>team introduction</span>
-
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">SAFETY <b class="caret"></b></a>
+
    </dt>
-
                            <ul class="dropdown-menu">
+
    <dd>team</dd>
-
                                <li><a href="https://2014.igem.org/Team:OUC-China/Safety">Boi safety</a></li>
+
    <dd>introduction</dd>
-
                                <li><a href="https://2014.igem.org/Team:OUC-China/Safety_Lab_safety">Lab safety</a></li>
+
  </dl>
-
                                <li><a href="https://2014.igem.org/Team:OUC-China/Safety_Policy_Practise">Policy&Practise</a></li>
+
    <dl>
-
                            </ul>
+
    <dt>        
-
                        </li>
+
        <span>member</span>
-
                        <li class="dropdown">
+
    </dt>
-
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">NOTEBOOK <b class="caret"></b></a>
+
    <dd>member</dd>
-
                            <ul class="dropdown-menu">
+
    <dd>member</dd>
-
                                <li><a href="https://2014.igem.org/Team:OUC-China/HumanPractice">Lab note</a></li>
+
  </dl>
-
                                <li><a href="https://2014.igem.org/Team:OUC-China/HumanPractice_Modeling_note">Modeling note</a></li>
+
</div>
-
                                <li><a href="https://2014.igem.org/Team:OUC-China/HumanPractice_Protocols">Protocols</a></li>
+
</div>
-
                            </ul>
+
</div>
-
                        </li>
+
<div class = "footer"> <img id = "top" src="images/toTop.png"/>  
-
                    </ul>
+
  <script>
-
                </div>
+
  $("#top").click(function(){
-
            </div>
+
     $(document).scrollTop(0);
-
            <img class="teamlogo" src="https://static.igem.org/mediawiki/2014/0/00/OUC_China_Content_Team.png" />
+
  });
-
        </div>
+
  </script>  
-
    </header>
+
</div>
-
     <div style="width: 80%;min-width:1024px;background-color:#d2e9fd;padding:10px;margin:0 auto">
+
-
<!--这里是页面主内容，默认已经提供了和外边框10px的间距-->
+
-
    </div>
+
-
    <img src="https://static.igem.org/mediawiki/2014/9/9a/OUC-China_Index_Anchor.png" class="anchor" onclick="document.documentElement.scrollTop = document.body.scrollTop = 0;" />
+
</html>
</html>

Revision as of 11:35, 16 October 2014

Retrieved from "http://2014.igem.org/Team:OUC-China/Team_Instructor"