Team:OUC-China/Team Instructor

From 2014.igem.org

(Difference between revisions)
 
(24 intermediate revisions not shown)
Line 1: Line 1:
{{CSS/Main}}
{{CSS/Main}}
<html>
<html>
-
<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/bootstrap.css?action=raw&amp;ctype=text/css" rel="stylesheet" />
-
<style>
+
    <link href="https://2014.igem.org/Team:OUC-China/css/topsection.css?action=raw&ctype=text/css" rel="stylesheet" />
-
@charset "utf-8";
+
    <script src="https://2014.igem.org/Team:OUC-China/js/jquery.js?action=raw&ctype=text/javascript"></script>
-
/* CSS Document */
+
    <script src="https://2014.igem.org/Team:OUC-China/js/bootstrap.js?action=raw&ctype=text/javascript"></script>
-
body, div, p, ul, li, h1, h2, h3, h4, h5, h6 {
+
    <style>
-
margin: 0px;
+
        body {
-
padding: 0px;
+
            background-color: #609fd2;
-
font-family: "微软雅黑";
+
            background-repeat: repeat;
-
}
+
            background-image: url(https://static.igem.org/mediawiki/2014/1/19/OUC-China_Content_Background.png);
-
body{
+
            position: relative;
-
    min-width:1350px;
+
        }
-
}
+
        header {
-
ul, ol {
+
            background-color: #609fd2;
-
list-style: none;
+
        }
-
}
+
        header > div {
-
img {
+
            margin: 0 auto;
-
display: block;
+
            margin-bottom: 0 !important;
-
position: absolute;
+
            width: 778px;
-
}
+
        }
-
a {
+
        .member > img {
-
color: inherit;
+
            width: 250px;
-
text-decoration: none;
+
            height: 250px;
-
}
+
            border: 5px solid #ffffff;
-
 
+
            border-radius: 50%;
-
.header {
+
            display: inline-block;
-
height: 240px;
+
            margin: 20px;
-
width: 100%;
+
            position: inherit;
-
background: rgb(210,233,253);
+
        }
-
position: relative;
+
        .member > div {
-
}
+
            display: inline-block;
-
.header .igemLogo {
+
            position: relative;
-
top: 27px;
+
        }
-
left: 66px;
+
        .memberight {
-
transition: 0.3s;
+
            text-align: right;
-
-moz-transition: 0.3s;
+
        }
-
-o-transition: 0.3s;
+
        .nav > li > a,.nav > li.dropdown > a,.navbar .dropdown-menu>li>a, .navbar .dropdown-menu>li>a:focus {
-
-webkit-transition: 0.3s;
+
            color: #ffffff !important;
-
}
+
            font-size: 20px;
-
.header .igemLogo:hover {
+
        }
-
transform: rotate(360deg);
+
        .popover {
-
-moz-transform: rotate(360deg);
+
            z-index: 1 !important;
-
-ms-transform: rotate(360deg);
+
        }
-
-o-transform: rotate(360deg);
+
        .affix{
-
-webkit-transform: rotate(360deg);
+
            position: fixed;
-
}
+
            top: 0;
-
.header .waveUp {
+
        }
-
position: absolute;
+
        .affix-top{
-
bottom: 0px;
+
            position: absolute;
-
width: 100%;
+
            top: 286px;
-
height: 110px;
+
        }
-
background: url(images/waveUp.png) repeat-x;
+
        .affix a:hover, .affix-top a:hover, .affix li.active, .affix-top li.active, .affix li.active a, .affix-top li.active a {
-
}
+
            background-color: #d2e9fd !important;
-
.header .waveDown {
+
            color: #000000 !important;
-
position: absolute;
+
        }
-
bottom: 0px;
+
        #childNavigator .nav {
-
width: 100%;
+
            margin-left: 0!important;
-
height: 70px;
+
        }
-
background: url(images/waveDown2.png) repeat-x;
+
        #childNavigator > .nav > li > a {
-
z-index: 1;
+
            font-size: 16px;
-
}
+
        }
-
.header .objLeft {
+
        #childNavigator > .nav > li > .nav > li > a {
-
left: 211px;
+
            padding-left: 20%;
-
top: 26px;
+
            font-size: 14px;
-
z-index: 0;
+
        }  
-
}
+
        .topSection {
-
.header .objRight {
+
            height: 240px;
-
right: 230px;
+
            padding-top: 10px;
-
top: 28px;
+
            background-color: rgb(210,233,253);
-
transition: 0.5s;
+
            margin-top: -11px;
-
-webkit-transition: 0.5s;
+
        }
-
z-index: 0;
+
        .topSection .igemLogo {
-
}
+
            position:absolute;
-
.header .objRight:hover {
+
            top: 10px;
-
margin-top: 10px;
+
            left: 10px;
-
}
+
        }
-
.header .nav {
+
        .topSection .waveUp {
-
top: 200px;
+
            margin-top: -10px;
-
z-index: 2;
+
            width: 100%;
-
}
+
            height: 110px;
-
.header .nav ul{ width:800px; margin:auto;}
+
            background: url(https://static.igem.org/mediawiki/2014/f/f0/WaveUp.png) repeat-x;
-
.main {
+
            z-index: 0;
-
width: 100%;
+
        }
-
background-image: url(images/background.png);
+
        .topSection .waveDown {
-
background-color: rgb(96,159,210);
+
            margin-top: -70px;
-
position:relative;
+
            width: 100%;
-
}
+
            height: 70px;
-
.main .mainBox {
+
            background: url(https://static.igem.org/mediawiki/2014/d/d0/WaveDown2.png) repeat-x;
-
width: 800px;
+
            z-index: 2;
-
height: 1000px;
+
            position: relative;
-
background: rgb(114,187,227);
+
        }
-
margin: 0 auto;
+
        .topSection .leftPlas {
-
}
+
            display: block;
-
.main .menu{
+
            position: absolute;
-
position: absolute;
+
            top: 26px;
-
top: 0px;
+
            z-index: 1;
-
}
+
            left: 211px;
-
.main dt,.main dd{
+
            -webkit-transition: all ease 0.5s;
-
    border:1px dashed #000;
+
            -moz-transition: all ease 0.5s;
-
color:#006CD9;
+
            -ms-transition: all ease 0.5s;
-
background:#FAFAFA;
+
            transition: all ease 0.5s;
-
height:30px;
+
        }
-
line-height:30px;
+
        .topSection .leftPlas:hover {
-
text-align:center;
+
            margin-top: -5px;
-
}
+
        }
-
.footer {
+
        .topSection .rightPlas {
-
width: 100%;
+
            display: block;
-
height: 100px;
+
            position: absolute;
-
background: rgb(39,119,183);
+
            top: 26px;
-
}
+
            z-index: 1;
-
.footer #top {
+
            right: 211px;
-
height: 150px;
+
         }
-
position: fixed;
+
     </style>
-
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>
     <script>
-
  var originalLeft = $("#objLeft").offset().left;
+
        if ($('.firstHeading')) $('.firstHeading').remove();
-
  $("#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="topSection">
 +
        <img class="igemLogo" src="https://static.igem.org/mediawiki/2014/c/c6/OUC-China_Content_IGEM.png">
 +
        <img src="https://static.igem.org/mediawiki/2014/a/a1/OUC_China_Content_Title.png" style="display:block;margin:0 auto">
 +
        <div class="waveUp"></div>
 +
        <div class="waveDown"></div>
 +
        <img class="leftPlas" src="https://static.igem.org/mediawiki/2014/4/41/OUC-China_Index_Plasmid1.png" />
 +
        <img class="rightPlas" src="https://static.igem.org/mediawiki/2014/e/e6/OUC-China_Index_Plasmid2.png" />
 +
    </div>
 +
    <header>
 +
        <div class="navbar navbar-inverse">
 +
            <div class="navbar-collapse collapse navbar-inverse-collapse">
 +
                <ul class="nav navbar-nav">
 +
                    <li><a href="https://2014.igem.org/Team:OUC-China">HOME</a></li>
 +
                    <li class="dropdown active">
 +
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">TEAM <b class="caret"></b></a>
 +
                        <ul class="dropdown-menu">
 +
                            <li><a href="https://2014.igem.org/Team:OUC-China/Team">Team members</a></li>
 +
                            <li class="active"><a href="https://2014.igem.org/Team:OUC-China/Team_Instructor">Instructor</a></li>
 +
                            <li><a href="https://2014.igem.org/Team:OUC-China/Team_Acknowledgment">Acknowledgment</a></li>
 +
                            <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>
 +
                        </ul>
 +
                    </li>
 +
                    <li class="dropdown">
 +
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">PROJECT <b class="caret"></b></a>
 +
                        <ul class="dropdown-menu">
 +
                            <li><a href="https://2014.igem.org/Team:OUC-China/Project">Overview</a></li>
 +
                            <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>
 +
                            <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>
 +
                            <li><a href="https://2014.igem.org/Team:OUC-China/Project_Modeling">Modeling</a></li>
 +
                            <li><a href="https://2014.igem.org/Team:OUC-China/Project_Policy_Practise">Policy&Practice</a></li>
 +
                        </ul>
 +
                    </li>
 +
                    <li class="dropdown">
 +
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">JUDGING <b class="caret"></b></a>
 +
                        <ul class="dropdown-menu">
 +
                            <li><a href="https://2014.igem.org/Team:OUC-China/Judging">Biobrick</a></li>
 +
                            <li><a href="https://2014.igem.org/Team:OUC-China/Judging_Achievment">Achievement</a></li>
 +
                        </ul>
 +
                    </li>
 +
                    <li class="dropdown">
 +
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">SAFETY <b class="caret"></b></a>
 +
                        <ul class="dropdown-menu">
 +
                            <li><a href="https://2014.igem.org/Team:OUC-China/Safety">Biosafety</a></li>
 +
                            <li><a href="https://2014.igem.org/Team:OUC-China/Safety_Lab_safety">Labsafety</a></li>
 +
                        </ul>
 +
                    </li>
 +
                  <li class="dropdown">
 +
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">NOTEBOOK <b class="caret"></b></a>
 +
                        <ul class="dropdown-menu">
 +
                            <li><a href="https://2014.igem.org/Team:OUC-China/Notebook">Lab note</a></li>
 +
                            <li><a href="https://2014.igem.org/Team:OUC-China/Notebook_Modeling_Note">Modeling note</a></li>
 +
                            <li><a href="https://2014.igem.org/Team:OUC-China/Notebook_Protocols">Protocols</a></li>
 +
                        </ul>
 +
                    </li>
 +
                </ul>
 +
            </div>
 +
        </div>
 +
        <script>
 +
            var leftPlas = $(".topSection .leftPlas");
 +
            var originalLeft = leftPlas.offset().left;
 +
            $("header .nav > li").mouseover(function () {
 +
                if ($(this).offset().left < leftPlas.offset().left) leftPlas[0].src = "https://static.igem.org/mediawiki/2014/8/8c/ObjLeft2.png";
 +
                else leftPlas[0].src = "https://static.igem.org/mediawiki/2014/4/41/OUC-China_Index_Plasmid1.png";
 +
                leftPlas.css({ left: $(this).offset().left - 50 });
 +
            }).mouseout(function () {
 +
                leftPlas[0].src = "https://static.igem.org/mediawiki/2014/8/8c/ObjLeft2.png";
 +
                leftPlas.css({ left: originalLeft });
 +
                setTimeout(function () { leftPlas[0].src = "https://static.igem.org/mediawiki/2014/4/41/OUC-China_Index_Plasmid1.png"; }, 500);
 +
            });
 +
        </script>
 +
    </header>
 +
    <div id="mainContent" style="width:1024px;background-color:#d2e9fd;padding:10px;margin:0 auto">
 +
        <style>
 +
            #mainContent img {
 +
                border: 5px solid #609fd2;
 +
                margin: 5px 5px 5px 0;
 +
            }
 +
        </style>
 +
        <h1 class="text-primary">Instructor</h1>
 +
        <img src="https://static.igem.org/mediawiki/2014/1/19/OUC-China_Member_ZhangXiaohua.jpg" style="display:inline-block" />
 +
        <div style="display:inline-block ">
 +
            <h2>Zhang Xiaohua</h2>
 +
            <p class="text-success">E-mail: xhzhang@ouc.edu.cn</p>
 +
            <p class="text-primary">Academic title: Professor, Doctoral supervisor</p>
 +
            <p>Research interest: Marine microbiology, pathogenic microbes in sea-breeding animal</p>
 +
        </div>
 +
        <img src="https://static.igem.org/mediawiki/2014/1/17/OUC-China_Member_YangGuanpin.JPG" style="display:inline-block" />
 +
        <div style="display:inline-block ">
 +
            <h2>Yang Guanpin</h2>
 +
            <p class="text-success">E-mail: yguanpin@mail.ouc.edu.cn</p>
 +
            <p class="text-primary">Academic title: Professor, Doctoral supervisor</p>
 +
            <p>Research interest: Marine economical breeding, marine microbiology</p>
 +
        </div>
 +
    </div>
 +
    <script>
 +
        $(document.body).scrollspy({ target: '#childNavigator' });
 +
        $('#childNavigator').affix({ offset: { top: 285 } });
 +
    </script>
 +
<div class = "footer">
 +
  <style>
 +
    .footer { padding: 10px; background-color: rgb(45,111,165); }
 +
    .footer > div { width: 418px; margin: 0 auto; padding-top: 50px; }
 +
    .footer > div > img { float: left; height: 100px; display: inline-block; position: relative; margin-left: 6px; margin-right: 6px; }
 +
    .footer > p { text-align: center; color: #ffffff }
 +
    .footer > p > a { color: #ffffff; }
 +
  </style>
 +
  <div>
 +
    <img src="https://static.igem.org/mediawiki/2014/a/ad/OUC-China_Index_OrgLogo.png" />
 +
    <img src="https://static.igem.org/mediawiki/2014/e/ec/OUC-China_Index_OrgTitle.jpg" />
 +
    <img src="https://static.igem.org/mediawiki/2014/9/96/OUC-China_Foot_ouclogo.png" />
 +
    <div style="clear:both"></div>
   </div>
   </div>
-
   <script>
+
   <p>contact us: <a href="mailto:oucigem@163.com">oucigem@163.com</a></p>
-
  // JavaScript Document
+
-
$(".pMenu").mouseover(function(){
+
-
  $(this).find("ul").slideDown();
+
-
});
+
-
$(".pMenu").mouseleave(function(){
+
-
  $(this).find("ul").slideUp(function(){
+
-
    $(this).clearQueue();
+
-
  });
+
-
});
+
-
  </script>
+
-
</div>
+
-
<div class = "main">
+
-
  <div class = "mainBox"></div>
+
-
  <!--<ul class = "menu">
+
-
    <li><a href="#">team introduction</a></li>
+
-
    <li><a href="#">member</a></li>
+
-
  </ul>
+
-
  更改-->
+
-
  <script type="text/javascript">
+
-
  $(function()
+
-
  { 
+
-
      //隐藏除第一个dl里的dd外所有的dd
+
-
  //$("#stt dl dd").hide();
+
-
  //点击时触发一个函数
+
-
  $("#stt dt").click(function()
+
-
  {
+
-
  $b=$(this).siblings("dd");//除了当前，其他dd
+
-
  if($b.is(":visible"))//判断是否是展开的，如果展开执行下面代码
+
-
  {
+
-
$($b).slideUp();
+
-
  $(this).parents("dl").siblings("dl").children("dd").slideUp();
+
-
  }
+
-
  else//不是执行else代码
+
-
  {
+
-
$($b).slideDown();
+
-
$(this).parents("dl").siblings("dl").children("dd").slideUp();
+
-
  }
+
-
  });
+
-
 
+
-
  })
+
-
</script>
+
-
<div style="width:1300px; margin:auto;">
+
-
  <div id="stt" class="menu">
+
-
  <dl>
+
-
    <dt>
+
-
        <span>team introduction</span>
+
-
    </dt>
+
-
    <dd>team</dd>
+
-
    <dd>introduction</dd>
+
-
  </dl>
+
-
    <dl>
+
-
    <dt>       
+
-
        <span>member</span>
+
-
    </dt>
+
-
    <dd>member</dd>
+
-
    <dd>member</dd>
+
-
  </dl>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
<div class = "footer"> <img id = "top" src="images/toTop.png"/>
+
-
  <script>
+
-
  $("#top").click(function(){
+
-
    $(document).scrollTop(0);
+
-
  });
+
-
  </script>  
+
</div>
</div>
 +
<img class="anchor" onclick="document.documentElement.scrollTop = document.body.scrollTop = 0;" src="https://static.igem.org/mediawiki/2014/b/b6/ToTop.png">
</html>
</html>

Latest revision as of 02:45, 18 October 2014

Instructor

Zhang Xiaohua

E-mail: xhzhang@ouc.edu.cn

Academic title: Professor, Doctoral supervisor

Research interest: Marine microbiology, pathogenic microbes in sea-breeding animal

Yang Guanpin

E-mail: yguanpin@mail.ouc.edu.cn

Academic title: Professor, Doctoral supervisor

Research interest: Marine economical breeding, marine microbiology

contact us: oucigem@163.com

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