Difference between revisions of "Team:HZAU-China/Project/Description"

(Replaced content with "{Template:HZAU-China}")
Line 1: Line 1:
<!DOCTYPE html>
+
{Template:HZAU-China}
<html lang="en">
+
 
+
<head>
+
  <meta charset="UTF-8">
+
  <!--一些初始设置-->
+
  <style type="text/css">
+
    /* HTML5 display-role reset for older browsers */
+
 
+
    article,
+
    aside,
+
    details,
+
    figcaption,
+
    figure,
+
    footer,
+
    header,
+
    hgroup,
+
    nav,
+
    section {
+
      display: block;
+
    }
+
 
+
    ol,
+
    ul {
+
      list-style: none;
+
    }
+
 
+
    blockquote,
+
    q {
+
      quotes: none;
+
    }
+
 
+
    blockquote:before,
+
    blockquote:after,
+
    q:before,
+
    q:after {
+
      content: '';
+
      content: none;
+
    }
+
 
+
    table {
+
      border-collapse: collapse;
+
      border-spacing: 0;
+
    }
+
  </style>
+
  <!-- HZAU-navigation's style -->
+
  <style type="text/css">
+
    div.nav_body {
+
      position: fixed;
+
      padding: 0px;
+
      left: 0px;
+
      top: 16px;
+
      width: 100%;
+
      min-width: 950px;
+
      height: 36px;
+
      box-shadow: 0px 1px 3px #aaaaaa;
+
      z-index: 1;
+
      color: rgb(249, 228, 137);
+
      text-decoration-line: none;
+
      font-family: "Arial", Helvetica, sans-serif;
+
      background-color: #000;
+
      z-index: 99;
+
    }
+
 
+
    ul#nav_organ {
+
      float: right;
+
      list-style: none;
+
      margin: 6px auto;
+
      text-decoration-line: none;
+
      font-family: "Arial", Helvetica, sans-serif;
+
      color: rgb(249, 228, 137);
+
      background-color: #000;
+
    }
+
 
+
    ul#nav_organ li {
+
      display: block;
+
      float: left;
+
    }
+
 
+
    a.nav_tissue {
+
      padding: 8px 15px 8px 15px;
+
      line-height: 20px;
+
      text-decoration-line: none;
+
      font-family: "Arial", Helvetica, sans-serif;
+
      color: rgb(249, 228, 137);
+
      font-size: 16px;
+
    }
+
 
+
    span.caret {
+
      display: inline-block;
+
      margin-left: 2px;
+
      vertical-align: middle;
+
      width: 0;
+
      height: 0;
+
      border-left: 4px solid transparent;
+
      border-right: 4px solid transparent;
+
      border-top: 4px solid rgb(249, 228, 137);
+
    }
+
 
+
    .nav_cell {
+
      visibility: hidden;
+
      opacity: 0;
+
      display: block;
+
      box-sizing: border-box;
+
      left: auto;
+
      position: absolute;
+
      top: 30px;
+
      z-index: 1000;
+
      float: left;
+
      min-width: 160px;
+
      margin: 0 0 0 -4px;
+
      font-size: 14px;
+
      text-align: left;
+
      list-style: none;
+
      color: rgb(249, 228, 137);
+
      background-color: #000;
+
      background-clip: padding-box;
+
      border: 1px solid rgba(0, 0, 0, .15);
+
      border-radius: 4px;
+
      box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+
      -webkit-transition: opacity 0.4s linear;
+
      -moz-transition: opacity 0.4s linear;
+
      -ms-transition: opacity 0.4s linear;
+
      -o-transition: opacity 0.4s linear;
+
      transition: opacity 0.4s linear;
+
    }
+
 
+
    .mw-content-ltr ul,
+
    .mw-content-rtl .mw-content-ltr ul {
+
      margin: 0 0 0 -4px;
+
    }
+
 
+
    .shadow {
+
      box-shadow: 0px 1px 3px rgb(249, 228, 137);
+
    }
+
 
+
    .nav_cell>li {
+
      display: block;
+
      float: left;
+
      clear: both;
+
      height: 30px;
+
    }
+
 
+
    .nav_cell>li>a {
+
      padding-top: 3px;
+
      padding-bottom: 3px;
+
      padding-left: 20px;
+
      padding-right: 20px;
+
      text-decoration-line: none;
+
      color: rgb(249, 228, 137);
+
    }
+
 
+
    .menu_item:hover .nav_cell {
+
      visibility: visible;
+
      opacity: 1;
+
    }
+
  </style>
+
  <!--消除一些不兼容引起的错拍-->
+
  <style type="text/css">
+
    .ppp {
+
      display: block;
+
      padding: 100px;
+
    }
+
 
+
    #sideMenu,
+
    #top_title,
+
    #team_submenu {
+
      display: none;
+
    }
+
 
+
    #content {
+
      padding: 0px;
+
      width: 100%;
+
      margin-top: 0px;
+
      margin-left: 0px;
+
      margin: 0 0 0 0;
+
    }
+
 
+
    #bodyContent h1,
+
    #bodyContent h2,
+
    #bodyContent h3,
+
    #bodyContent h4,
+
    #bodyContent h5 {
+
      margin-bottom: 0px;
+
    }
+
 
+
    #team_name {
+
      display: none
+
    }
+
 
+
    .global_wrapper {
+
      padding: 0px 0px 0px 0px;
+
    }
+
 
+
    #top_menu_14 {
+
      height: 16px;
+
    }
+
  </style>
+
  <!--内容的样式-->
+
  <style>
+
    body {
+
      font-family: "Arial", Helvetica, sans-serif;
+
    }
+
 
+
    .HZAU_content {
+
      position: relative;
+
      right: 0px;
+
      width: 1000px;
+
      height: 3000px;
+
      margin: 0 0 0 250px;
+
      z-index: -1;
+
    }
+
 
+
    .HZAU_2017_menu {
+
      display: block;
+
      position: fixed;
+
      left: 15px;
+
      top: 100px;
+
      height: 337px;
+
      width: 233px;
+
      overflow: hidden;
+
    }
+
 
+
    .beijin {
+
      height: 337px;
+
      width: 233px;
+
    }
+
 
+
    .HZAU_2017_menu ul {
+
      position: absolute;
+
      top: 50%;
+
      margin-top: -80px;
+
      margin-left: 0px;
+
      left: 0px;
+
      width: 100%;
+
      padding-left: 0px;
+
      font-size: 16px;
+
    }
+
 
+
    .HZAU_2017_menu li {
+
      width: 100%;
+
    }
+
 
+
    .HZAU_2017_menu li a {
+
      display: inline-block;
+
      width: 100%;
+
      height: 100%;
+
      padding: 20px 0px 20px 0px;
+
      margin-left: 13px;
+
      text-align: left;
+
      color: rgb(249, 228, 137);
+
      text-decoration: none;
+
      font-style: arial;
+
      line-height: 90%;
+
    }
+
 
+
    .HZAU_2017_menu li:hover {
+
      background: rgb(249, 228, 137);
+
    }
+
 
+
    .HZAU_2017_menu li a:hover {
+
      color: #000;
+
    }
+
 
+
    .item {
+
      width: 100%;
+
      padding-left: 40px;
+
 
+
 
+
    }
+
 
+
    .biaoti {
+
      font-size: 50px;
+
      font-weight: bold;
+
      text-align: center;
+
      width: 100%;
+
      display: block;
+
      padding-bottom: 50px;
+
      padding-top: 50px;
+
      color: rgb(63, 59, 58);
+
    }
+
 
+
    .zhengwen {
+
      font-style: arial;
+
      font-size: 24px;
+
      line-height: 120%;
+
      text-align: justify;
+
      color: #000;
+
    }
+
 
+
    .tu_1 {
+
      position: relative;
+
      left: 450px;
+
      padding-top: 30px;
+
      padding-bottom: 30px;
+
    }
+
 
+
    .tu_2 {
+
      position: relative;
+
      left: 450px;
+
      padding-top: 30px;
+
      padding-bottom: 30px;
+
    }
+
  </style>
+
</head>
+
 
+
<body>
+
  <div class="nav_body">
+
    <a href="https://2017.igem.org/Team:HZAU-China" class="HZAU-logo" title="logo">
+
      <img src="https://static.igem.org/mediawiki/2017/b/be/HZAU_2017_logo_1.png" height="100%">
+
    </a>
+
    <ul id="nav_organ">
+
      <li class="Home">
+
        <a class="nav_tissue" href="https://2017.igem.org/Team:HZAU-China">Home</a>
+
      </li>
+
      <li class="Team">
+
        <a class="nav_tissue" href="https://2017.igem.org/Team:HZAU-China/Team">Team</a>
+
      </li>
+
      <li class="Project menu_item">
+
        <a class="nav_tissue" href="">Project
+
          <span class="caret"></span>
+
        </a>
+
        <ul class="nav_cell shadow">
+
          <li>
+
            <a href="https://2017.igem.org/Team:HZAU-China/Project/Description">Description</a>
+
          </li>
+
          <li>
+
            <a href="https://2017.igem.org/Team:HZAU-China/Project/Design">Design</a>
+
          </li>
+
          <li>
+
            <a href="https://2017.igem.org/Team:HZAU-China/Project/Experiments">Experiments</a>
+
          </li>
+
          <li>
+
            <a href="https://2017.igem.org/Team:HZAU-China/Project/Notebook">Notebook</a>
+
          </li>
+
          <li>
+
            <a href="https://2017.igem.org/Team:HZAU-China/Project/InterLab">InterLab</a>
+
          </li>
+
          <li>
+
            <a href="https://2017.igem.org/Team:HZAU-China/Project/Model">Model</a>
+
          </li>
+
          <li>
+
            <a href="https://2017.igem.org/Team:HZAU-China/Project/Results">Results</a>
+
          </li>
+
          <li>
+
            <a href="https://2017.igem.org/Team:HZAU-China/Project/Demonstrate">Demonstrate</a>
+
          </li>
+
          <li>
+
            <a href="https://2017.igem.org/Team:HZAU-China/Project/Improve">Improve</a>
+
          </li>
+
          <li>
+
            <a href="https://2017.igem.org/Team:HZAU-China/Project/Attributions">Attributions</a>
+
          </li>
+
        </ul>
+
      </li>
+
      <li class="Parts menu_item">
+
        <a class="nav_tissue" href="">Parts
+
          <span class="caret"></span>
+
        </a>
+
        <ul class="nav_cell shadow">
+
          <li>
+
            <a href="https://2017.igem.org/Team:HZAU-China/Parts/Parts">Parts</a>
+
          </li>
+
          <li>
+
            <a href="https://2017.igem.org/Team:HZAU-China/Parts/Basic Parts">Basic Parts</a>
+
          </li>
+
          <li>
+
            <a href="https://2017.igem.org/Team:HZAU-China/Parts/Composite Parts">Composite Parts</a>
+
          </li>
+
          <li>
+
            <a href="https://2017.igem.org/Team:HZAU-China/Parts/Part Collection">Part Collection</a>
+
          </li>
+
        </ul>
+
      </li>
+
      <li class="Safety">
+
        <a class="nav_tissue" href="">Safety</a>
+
      </li>
+
      <li class="HP menu_item">
+
        <a class="nav_tissue" href="">Human Practices
+
          <span class="caret"></span>
+
        </a>
+
        <ul class="nav_cell shadow">
+
          <li>
+
            <a href="https://2017.igem.org/Team:HZAU-China/Human Practices/Silver HP">Silver HP</a>
+
          </li>
+
          <li>
+
            <a href="https://2017.igem.org/Team:HZAU-China/Human Practices/Integrated and Gold">Integrated and Gold</a>
+
          </li>
+
          <li>
+
            <a href="https://2017.igem.org/Team:HZAU-China/Human Practices/Public Engagement">Public Engagement</a>
+
          </li>
+
        </ul>
+
      </li>
+
      <li class="Awards menu_item">
+
        <a class="nav_tissue" href="">Awards
+
          <span class="caret"></span>
+
        </a>
+
        <ul class="nav_cell shadow">
+
          <li>
+
            <a href="https://2017.igem.org/Team:HZAU-China/Awards/Hardware">Hardware</a>
+
          </li>
+
        </ul>
+
      </li>
+
      <li class="Judging Form">
+
        <a class="nav_tissue" href="https://2017.igem.org/Team:HZAU-China/Judging Form">Judging Form</a>
+
      </li>
+
    </ul>
+
  </div>
+
  <div class="HZAU_2017_menu">
+
    <img src="https://static.igem.org/mediawiki/2017/8/8e/HZAU_2017_background_1.png" class="beijin">
+
    <ul class="daohang">
+
      <li id="HZAU_menu_1">
+
        <a href="#" id="bianse_1">Background</a>
+
      </li>
+
      <li id="HZAU_menu_2">
+
        <a href="#item2_1" id="bianse_2">Information</a>
+
      </li>
+
      <li id="HZAU_menu_3">
+
        <a href="#item3_1" id="bianse_3">Why light control</a>
+
      </li>
+
    </ul>
+
  </div>
+
  <div class="HZAU_content wrap">
+
    <div class="item" id="item1">
+
      <a class="biaoti">Description</a>
+
      <a class="zhengwen">In the long history of life evolution, different species living in different environment developed the most adaptive
+
        surviving mechanism for them under the selection pressure, among which some unmatchable become widly preserved in
+
        different creatures, and the mechanism of replication is one of them. The majority of prokaryote share the same mechanism
+
        of self-replication including DNA replication, chromosome seperation and cell division. These three parts comprised
+
        the whole cell cycle, and the main model creature for researching the replication process is E.coli, which at the
+
        same time is the main object of our project.</a>
+
    </div>
+
    <img src="https://static.igem.org/mediawiki/2017/b/bc/HZAU_2017_tu1_1.png" class="tu_1">
+
    <div id="item2_1" style="padding:29px"></div>
+
    <div class="item" id="item2">
+
      <a class="zhengwen">The replication process of E.coli replication can be devided into phase B,C and D, three phases. Phase B, also called
+
        pre-replication phase, is for DNA replication proparation similar as G1 phase in eukaryote cell cycle. Phase C is
+
        regarded as replication phase during which the chromosome is replicating corespond to the S phase in eukaryote. The
+
        last phase, phase D, is called post-replication phase, in which the behave of chromosome seperation and cell division
+
        happend just like what happened in G2 and M phase of eukaryote cells. the time of C phase and D phase in a generation
+
        is relative constant, so what actually determines the cell cycle is the initiation of genome replication. We know
+
        that cell have to garantee that each cell should have at least one chormosome, and this requires a highly coordination
+
        between DNA replication and cell divsion. Though the delicate mechanism of the corrdination is still a puzzle, it
+
        is clear that DnaA protein plays a significant role in this event. DnaA is a versatile protein, it can not only behave
+
        like a helicase opening the duble-helix of replication initiation site, OriC, while have the function of raising
+
        other proteins forming into the replisome to prolong the replication, but also can anchor the replicationg choromosome
+
        on the cell membrane leading the following seperation of chromosome. But what makes it the linker between replication
+
        and division is that its concentration determines the initiation volume of replication. So according to these information,
+
        we think that regulating the combination of DNA and DnaA protein will be an efficient method to regulate cell replication.
+
        <a href="">For more information please click here.</a>
+
      </a>
+
    </div>
+
    <img src="https://static.igem.org/mediawiki/2017/5/51/HZAU_2017_tu2_1.png" class="tu_2">
+
    <div id="item3_1" style="padding:29px"></div>
+
    <div class="item" id="item3">
+
      <a class="zhengwen">There will be about 1h for an entire genome replication, but cell division can reach about 20min per generation. this
+
        reflects the multi-copy number of bacterial genome and only with this mechanism can E.coli reproduce in such a high
+
        speed. what's worse is that even isogenic cells grow in the same culture have a scattering distribution not only
+
        in phase but also in genome copy number. the strong heterogenic in cell cycle and genome copy number hinds the 3D
+
        genome research and may be a potential noise on genome gene expression. At the same time, the developing synthetic
+
        biology requires an approach that can control cell reproduction and can be easily incorporated into circuits, so
+
        that the whole system can be more safe and controlable. taking these into consider, we decided to use CRISPRi to
+
        inhibit its cell cycle, for more details please see design.</a>
+
    </div>
+
    <a class="ppp"></a>
+
    <div id="item4_1" style="padding:29px"></div>
+
    <div class="item" id="item4">
+
      <a class="zhengwen">But barely pause the replication in some circumstance can't satisfy our needs, and long time inhibition will prolong
+
        its length, so there is a need to totally control its replication, not only block but also open. with that purpose
+
        we decided to use optogentic to control this system, and the operablity of light to computer makes our system programable,
+
        which can be called 4C.</a>
+
    </div>
+
  </div>
+
  <script>
+
    document.getElementById("bianse_1").style.color = "black";
+
    document.getElementById("HZAU_menu_1").style.backgroundColor = "rgb(249,228,137)";
+
    window.onscroll = function () {
+
      var t = document.documentElement.scrollTop || document.body.scrollTop;
+
      if (t > 0 && t < 625.8) {
+
        document.getElementById("bianse_1").style.color = "black";
+
        document.getElementById("bianse_2").style.color = "rgb(249,228,137)";
+
        document.getElementById("bianse_3").style.color = "rgb(249,228,137)";
+
        document.getElementById("HZAU_menu_1").style.backgroundColor = "rgb(249,228,137)";
+
        document.getElementById("HZAU_menu_2").style.backgroundColor = "";
+
        document.getElementById("HZAU_menu_3").style.backgroundColor = "";
+
        document.getElementById("bianse_1").onmouseover = function () {
+
          document.getElementById("bianse_1").style.color = "black";
+
        }
+
        document.getElementById("bianse_1").onmouseout = function () {
+
          document.getElementById("bianse_1").style.color = "black";
+
        }
+
        document.getElementById("bianse_2").onmouseover = function () {
+
          document.getElementById("bianse_2").style.color = "black";
+
        }
+
        document.getElementById("bianse_2").onmouseout = function () {
+
          document.getElementById("bianse_2").style.color = "rgb(249,228,137)";
+
        }
+
        document.getElementById("bianse_3").onmouseover = function () {
+
          document.getElementById("bianse_3").style.color = "black";
+
        }
+
        document.getElementById("bianse_3").onmouseout = function () {
+
          document.getElementById("bianse_3").style.color = "rgb(249,228,137)";
+
        }
+
      }
+
      if (t >= 625.8 && t < 1605.2) {
+
        document.getElementById("bianse_1").style.color = "rgb(249,228,137)";
+
        document.getElementById("bianse_2").style.color = "black";
+
        document.getElementById("bianse_3").style.color = "rgb(249,228,137)";
+
        document.getElementById("HZAU_menu_1").style.backgroundColor = "";
+
        document.getElementById("HZAU_menu_2").style.backgroundColor = "rgb(249,228,137)";
+
        document.getElementById("HZAU_menu_3").style.backgroundColor = "";
+
 
+
        document.getElementById("bianse_1").onmouseover = function () {
+
          document.getElementById("bianse_1").style.color = "black";
+
        }
+
        document.getElementById("bianse_1").onmouseout = function () {
+
          document.getElementById("bianse_1").style.color = "rgb(249,228,137)";
+
        }
+
        document.getElementById("bianse_2").onmouseover = function () {
+
          document.getElementById("bianse_2").style.color = "black";
+
        }
+
        document.getElementById("bianse_2").onmouseout = function () {
+
          document.getElementById("bianse_2").style.color = "black";
+
        }
+
        document.getElementById("bianse_3").onmouseover = function () {
+
          document.getElementById("bianse_3").style.color = "black";
+
        }
+
        document.getElementById("bianse_3").onmouseout = function () {
+
          document.getElementById("bianse_3").style.color = "rgb(249,228,137)";
+
        }
+
      }
+
      if (t >= 1605.2) {
+
        document.getElementById("bianse_1").style.color = "rgb(249,228,137)";
+
        document.getElementById("bianse_2").style.color = "rgb(249,228,137)";
+
        document.getElementById("bianse_3").style.color = "black";
+
        document.getElementById("HZAU_menu_1").style.backgroundColor = "";
+
        document.getElementById("HZAU_menu_2").style.backgroundColor = "";
+
        document.getElementById("HZAU_menu_3").style.backgroundColor = "rgb(249,228,137)";
+
        document.getElementById("bianse_1").onmouseover = function () {
+
          document.getElementById("bianse_1").style.color = "black";
+
        }
+
        document.getElementById("bianse_1").onmouseout = function () {
+
          document.getElementById("bianse_1").style.color = "rgb(249,228,137)";
+
        }
+
        document.getElementById("bianse_2").onmouseover = function () {
+
          document.getElementById("bianse_2").style.color = "black";
+
        }
+
        document.getElementById("bianse_2").onmouseout = function () {
+
          document.getElementById("bianse_2").style.color = "rgb(249,228,137)";
+
        }
+
        document.getElementById("bianse_3").onmouseover = function () {
+
          document.getElementById("bianse_3").style.color = "black";
+
        }
+
        document.getElementById("bianse_3").onmouseout = function () {
+
          document.getElementById("bianse_3").style.color = "black";
+
        }
+
      }
+
    }
+
  </script>
+
</body>
+
 
+
</html>
+

Revision as of 12:27, 24 October 2017

{Template:HZAU-China}