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

Line 1: Line 1:
 
<!DOCTYPE html>
 
<!DOCTYPE html>
 
<html lang="en">
 
<html lang="en">
 +
 
<head>
 
<head>
 
   <meta charset="UTF-8">
 
   <meta charset="UTF-8">
Line 6: Line 7:
 
   <style type="text/css">
 
   <style type="text/css">
 
     /* HTML5 display-role reset for older browsers */
 
     /* HTML5 display-role reset for older browsers */
 +
 
     article,
 
     article,
 
     aside,
 
     aside,
Line 165: Line 167:
 
     #top_title,
 
     #top_title,
 
     #team_submenu {
 
     #team_submenu {
−
        display: none;
+
      display: none;
 
     }
 
     }
  
 
     #content {
 
     #content {
−
        padding: 0px;
+
      padding: 0px;
−
        width: 100%;
+
      width: 100%;
−
        margin-top: 0px;
+
      margin-top: 0px;
−
        margin-left: 0px;
+
      margin-left: 0px;
−
        margin:0 0 0 0;
+
 
     }
 
     }
  
Line 181: Line 182:
 
     #bodyContent h4,
 
     #bodyContent h4,
 
     #bodyContent h5 {
 
     #bodyContent h5 {
−
        margin-bottom: 0px;
+
      margin-bottom: 0px;
 
     }
 
     }
  
 
     #team_name {
 
     #team_name {
−
        display: none
+
      display: none
 
     }
 
     }
  
 
     .global_wrapper {
 
     .global_wrapper {
−
        padding: 0px 0px 0px 0px;
+
      padding: 0px 0px 0px 0px;
 
     }
 
     }
  
 
     #top_menu_14 {
 
     #top_menu_14 {
−
        height: 16px;
+
      height: 16px;
 
     }
 
     }
 
   </style>
 
   </style>
Line 211: Line 212:
 
     }
 
     }
  
−
     .HZAU_2017_menu {
+
     .menu {
 
       display: block;
 
       display: block;
 
       position: fixed;
 
       position: fixed;
Line 226: Line 227:
 
     }
 
     }
  
−
     .HZAU_2017_menu ul {
+
     .menu ul {
 
       position: absolute;
 
       position: absolute;
 
       top: 50%;
 
       top: 50%;
 
       margin-top: -80px;
 
       margin-top: -80px;
−
      margin-left: 0px;
 
 
       left: 0px;
 
       left: 0px;
 
       width: 100%;
 
       width: 100%;
 
       padding-left: 0px;
 
       padding-left: 0px;
−
      font-size: 16px;
 
 
     }
 
     }
  
−
     .HZAU_2017_menu li {
+
     .menu li {
 
       width: 100%;
 
       width: 100%;
 
     }
 
     }
  
−
     .HZAU_2017_menu li a {
+
     .menu li a {
 
       display: inline-block;
 
       display: inline-block;
 
       width: 100%;
 
       width: 100%;
 
       height: 100%;
 
       height: 100%;
 
       padding: 20px 0px 20px 0px;
 
       padding: 20px 0px 20px 0px;
−
      margin-left: 13px;
 
 
       text-align: left;
 
       text-align: left;
 
       color: rgb(249, 228, 137);
 
       color: rgb(249, 228, 137);
Line 252: Line 250:
 
       font-style: arial;
 
       font-style: arial;
 
       line-height: 90%;
 
       line-height: 90%;
 +
      margin-left: 13px;
 
     }
 
     }
  
−
     .HZAU_2017_menu li:hover {
+
     .menu li:hover {
 
       background: rgb(249, 228, 137);
 
       background: rgb(249, 228, 137);
 
       color: #000;
 
       color: #000;
 
     }
 
     }
  
−
     .HZAU_2017_menu li a:hover {
+
     .menu li a:hover {
−
      color: #000;
+
−
    }
+
−
 
+
−
    .current {
+
 
       background: rgb(249, 228, 137);
 
       background: rgb(249, 228, 137);
−
       color: #000;
+
       color: black;
 
     }
 
     }
  
Line 291: Line 286:
 
       line-height: 120%;
 
       line-height: 120%;
 
       text-align: justify;
 
       text-align: justify;
−
      color:#000;
 
 
     }
 
     }
  
−
    #item1 {}
 
  
 
     .tu_1 {
 
     .tu_1 {
Line 310: Line 303:
 
     }
 
     }
  
−
    #item2 {}
 
−
 
−
    #item3 {}
 
−
 
−
    #item4 {}
 
 
   </style>
 
   </style>
 
</head>
 
</head>
Line 420: Line 408:
 
     </ul>
 
     </ul>
 
   </div>
 
   </div>
−
   <div class="HZAU_2017_menu">
+
   <div class="menu">
 
     <img src="https://static.igem.org/mediawiki/2017/8/8e/HZAU_2017_background_1.png" class="beijin">
 
     <img src="https://static.igem.org/mediawiki/2017/8/8e/HZAU_2017_background_1.png" class="beijin">
 
     <ul class="daohang">
 
     <ul class="daohang">
−
       <li class="current" onmouseover="bianse_1()" onmouseout="bianse_11()">
+
       <li class="current" id="menu_1" onmouseover="bianse_1()" onmouseout="bianse_11()">
 
         <a href="#" id="bianse_1">Background</a>
 
         <a href="#" id="bianse_1">Background</a>
 
       </li>
 
       </li>
−
       <li onmouseover="bianse_2()" onmouseout="bianse_21()">
+
       <li id="menu_2" onmouseover="bianse_2()" onmouseout="bianse_21()">
 
         <a href="#item2_1" id="bianse_2">Information</a>
 
         <a href="#item2_1" id="bianse_2">Information</a>
 
       </li>
 
       </li>
−
       <li onmouseover="bianse_3()" onmouseout="bianse_31()">
+
       <li id="menu_3" onmouseover="bianse_3()" onmouseout="bianse_31()">
 
         <a href="#item3_1" id="bianse_3">Why light control</a>
 
         <a href="#item3_1" id="bianse_3">Why light control</a>
 
       </li>
 
       </li>
Line 445: Line 433:
 
     </div>
 
     </div>
 
     <img src="https://static.igem.org/mediawiki/2017/b/bc/HZAU_2017_tu1_1.png" class="tu_1">
 
     <img src="https://static.igem.org/mediawiki/2017/b/bc/HZAU_2017_tu1_1.png" class="tu_1">
−
     <div id="item2_1" style="padding:8px"></div>
+
     <div id="item2_1" style="padding:16px"></div>
 
     <div class="item" id="item2">
 
     <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
 
       <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
Line 465: Line 453:
 
     </div>
 
     </div>
 
     <img src="https://static.igem.org/mediawiki/2017/5/51/HZAU_2017_tu2_1.png" class="tu_2">
 
     <img src="https://static.igem.org/mediawiki/2017/5/51/HZAU_2017_tu2_1.png" class="tu_2">
−
     <div id="item3_1" style="padding:8px"></div>
+
     <div id="item3_1" style="padding:16px"></div>
 
     <div class="item" id="item3">
 
     <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
 
       <a class="zhengwen">There will be about 1h for an entire genome replication, but cell division can reach about 20min per generation. this
Line 477: Line 465:
 
     </div>
 
     </div>
 
     <a class="ppp"></a>
 
     <a class="ppp"></a>
−
     <div id="item4_1" style="padding:8px"></div>
+
     <div id="item4_1" style="padding:16px"></div>
 
     <div class="item" id="item4">
 
     <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
 
       <a class="zhengwen">But barely pause the replication in some circumstance can't satisfy our needs, and long time inhibition will prolong
Line 485: Line 473:
 
     </div>
 
     </div>
 
   </div>
 
   </div>
−
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+
 
 
   <script>
 
   <script>
 
     document.getElementById("bianse_1").style.color = "black";
 
     document.getElementById("bianse_1").style.color = "black";
−
     $(function () {
+
     document.getElementById("menu_1").style.backgroundColor = "rgb(249,228,137)";
−
      var HZAU_2017_menuLi = $(".HZAU_2017_menu li");
+
    window.onscroll = function () {
−
      var item1 = $("#item1");
+
      var t = document.documentElement.scrollTop || document.body.scrollTop;
−
      var item2 = $("#item2");
+
      if (t > 0 && t < 677.8) {
−
      var item3 = $("#item3");
+
        document.getElementById("bianse_1").style.color = "black";
−
      var item4 = $("#item4");
+
        document.getElementById("bianse_2").style.color = "rgb(249,228,137)";
−
      var item5 = $("#item5");
+
        document.getElementById("bianse_3").style.color = "rgb(249,228,137)";
−
 
+
        document.getElementById("menu_1").style.backgroundColor = "rgb(249,228,137)";
−
 
+
        document.getElementById("menu_2").style.backgroundColor = "";
−
      $(window).scroll(function () {
+
        document.getElementById("menu_3").style.backgroundColor = "";
−
        var scrollTop = $(window).scrollTop();
+
      }
−
        var item1offsetTop = item1.position().top;
+
      if (t >= 677.8 && t<1605.2) {
−
        var item2offsetTop = item2.position().top;
+
        document.getElementById("bianse_1").style.color = "rgb(249,228,137)";
−
        var item3offsetTop = item3.position().top;
+
        document.getElementById("bianse_2").style.color = "black";
−
        var item4offsetTop = item4.position().top;
+
        document.getElementById("bianse_3").style.color = "rgb(249,228,137)";
−
 
+
        document.getElementById("menu_2").style.backgroundColor = "rgb(249,228,137)";
−
 
+
        document.getElementById("menu_1").style.backgroundColor = "";
−
 
+
        document.getElementById("menu_3").style.backgroundColor = "";
−
        HZAU_2017_menuLi.removeClass("current");
+
      }
−
        if (scrollTop < item2offsetTop) {
+
      if (t >= 1605.2) {
−
          HZAU_2017_menuLi.eq(0).addClass("current");
+
        document.getElementById("bianse_1").style.color = "rgb(249,228,137)";
−
          document.getElementById("bianse_1").style.color = "black";
+
        document.getElementById("bianse_2").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("bianse_3").style.color = "rgb(249,228,137)";
+
        document.getElementById("menu_3").style.backgroundColor = "rgb(249,228,137)";
−
          document.getElementById("bianse_2").onmouseover = function () {
+
        document.getElementById("menu_1").style.backgroundColor = "";
−
            document.getElementById("bianse_2").style.color = "black";
+
        document.getElementById("menu_2").style.backgroundColor = "";
−
          }
+
       }
−
          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)";
+
−
          }
+
−
          document.getElementById("bianse_1").onmouseout = function () {
+
−
            document.getElementById("bianse_1").style.color = "black";
+
−
          }
+
−
        }
+
−
        if (scrollTop >= item2offsetTop && scrollTop < item3offsetTop) {
+
−
          HZAU_2017_menuLi.eq(1).addClass("current");
+
−
          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("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_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)";
+
−
          }
+
−
          document.getElementById("bianse_2").onmouseout = function () {
+
−
            document.getElementById("bianse_2").style.color = "black";
+
−
          }
+
−
        }
+
−
        if (scrollTop >= item3offsetTop) {
+
−
          HZAU_2017_menuLi.eq(2).addClass("current");
+
−
          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("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").onmouseout = function () {
+
−
            document.getElementById("bianse_3").style.color = "black";
+
−
          }
+
−
        }
+
−
       });
+
−
     });
+
 
   </script>
 
   </script>
 
</body>
 
</body>
  
 
</html>
 
</html>

Revision as of 03:26, 24 October 2017

<!DOCTYPE html>

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. For more information please click here.