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

 
Line 4: Line 4:
 
<head>
 
<head>
 
   <meta charset="utf-8">
 
   <meta charset="utf-8">
  <title>Bootstrap 实例</title>
 
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
 
   <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
Line 10: Line 9:
 
   <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
   <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
   <style>
 
   <style>
     body {
+
     /*小导航栏样式*/
      position: relative;
+
    }
+
  
 
     ul.nav-pills {
 
     ul.nav-pills {
       top: 20px;
+
       background: url(https://static.igem.org/mediawiki/2017/3/35/T--HZAU-China--background.png);
 +
      background-size: 100% auto;
 +
      background-repeat: no-repeat;
 
       position: fixed;
 
       position: fixed;
 +
      display: block;
 +
      top: 50%;
 +
      margin-top: -144.5px;
 +
      height: 289px;
 +
      width: 200px;
 +
      overflow: hidden;
 
     }
 
     }
  
     div.col-sm-9 div {
+
     ul.nav-pills>li {
       height: 250px;
+
       position: relative;
       font-size: 28px;
+
       top: 50%;
 
     }
 
     }
  
     #section1 {
+
     #change_top {
       color: #fff;
+
       margin-top: -60px;
      background-color: #1E88E5;
+
 
     }
 
     }
  
     #section2 {
+
     /*小导航栏触碰后变色*/
      color: #fff;
+
      background-color: #673ab7;
+
    }
+
  
     #section3 {
+
     /*改变超链接的位置*/
      color: #fff;
+
      background-color: #ff9800;
+
    }
+
  
     #section41 {
+
     #section1 {
       color: #fff;
+
       position: relative;
       background-color: #00bcd4;
+
       top: -66px;
 
     }
 
     }
  
     #section42 {
+
     #section2 {
       color: #fff;
+
       position: relative;
       background-color: #009688;
+
       top: -66px;
 
     }
 
     }
  
     @media screen and (max-width: 810px) {
+
     #section3 {
      #section1,
+
       position: relative;
      #section2,
+
       top: -66px;
      #section3,
+
       #section41,
+
       #section42 {
+
        margin-left: 150px;
+
      }
+
 
     }
 
     }
 
   </style>
 
   </style>
Line 68: Line 61:
 
       margin: 0px;
 
       margin: 0px;
 
       background-color: #ffffff;
 
       background-color: #ffffff;
    }
 
 
    /*小导航栏触碰后变色*/
 
 
    .HZAU_content a:hover {
 
      color: black;
 
      text-decoration: none;
 
    }
 
 
    .HZAU_content a {
 
      color: black;
 
    }
 
 
    /*小导航栏样式*/
 
 
    .HZAU_2017_menu {
 
      display: block;
 
      position: fixed;
 
      left: 50%;
 
      margin-left: -570px;
 
      top: 50%;
 
      margin-top: -144.5px;
 
      height: auto;
 
      width: 200px;
 
      overflow: hidden;
 
    }
 
 
    .beijin {
 
      height: auto;
 
      width: 100%;
 
 
     }
 
     }
  
Line 140: Line 103:
 
     /*内容框子的样式*/
 
     /*内容框子的样式*/
  
     .HZAU_content {
+
     .col-sm-9 {
 
       position: absolute;
 
       position: absolute;
 
       top: 43px;
 
       top: 43px;
Line 151: Line 114:
  
 
     /*内容中几种文体的样式*/
 
     /*内容中几种文体的样式*/
 +
 +
    .col-sm-9>a:hover {
 +
      color: #000;
 +
      text-decoration: none;
 +
    }
  
 
     .biaoti {
 
     .biaoti {
Line 185: Line 153:
 
     }
 
     }
  
     .HZAU_content img {
+
    /*图片的样式*/
 +
 
 +
     .col-sm-9 img {
 
       margin: 0 auto;
 
       margin: 0 auto;
 
       display: block;
 
       display: block;
Line 198: Line 168:
 
     }
 
     }
 
   </style>
 
   </style>
 +
  <!--点击展开部分的样式-->
 
   <style>
 
   <style>
 
     span.caret_black {
 
     span.caret_black {
Line 214: Line 185:
 
     }
 
     }
  
     #menu-toggle {
+
     #HZAUmenu-toggle {
 
       display: none;
 
       display: none;
      /* hide the checkbox */
 
 
     }
 
     }
  
     #menu {
+
     #HZAUmenu {
 
       display: none;
 
       display: none;
 
       font-size: 17.5px;
 
       font-size: 17.5px;
Line 225: Line 195:
 
       width: 800px;
 
       width: 800px;
 
       margin: 0;
 
       margin: 0;
 +
      color: black;
 
     }
 
     }
  
     #menu-toggle:checked+#menu {
+
     #HZAUmenu-toggle:checked+#HZAUmenu {
 
       display: block;
 
       display: block;
 
     }
 
     }
Line 234: Line 205:
  
 
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
 
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
 
 
   <div class="container">
 
   <div class="container">
 
     <div class="row">
 
     <div class="row">
Line 241: Line 211:
 
           <div class="container-fluid">
 
           <div class="container-fluid">
 
             <ul class="nav nav-pills nav-stacked">
 
             <ul class="nav nav-pills nav-stacked">
               <li class="active">
+
               <li class="active" id="change_top">
 
                 <a href="#section1">Section 1</a>
 
                 <a href="#section1">Section 1</a>
 
               </li>
 
               </li>
Line 249: Line 219:
 
               <li>
 
               <li>
 
                 <a href="#section3">Section 3</a>
 
                 <a href="#section3">Section 3</a>
              </li>
 
              <li class="dropdown">
 
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4
 
                  <span class="caret"></span>
 
                </a>
 
                <ul class="dropdown-menu">
 
                  <li>
 
                    <a href="#section41">Section 4-1</a>
 
                  </li>
 
                  <li>
 
                    <a href="#section42">Section 4-2</a>
 
                  </li>
 
                </ul>
 
 
               </li>
 
               </li>
 
             </ul>
 
             </ul>
Line 267: Line 224:
 
         </div>
 
         </div>
 
       </nav>
 
       </nav>
       <div class="HZAU_content">
+
       <div class="col-sm-9">
         <div class="col-sm-9">
+
         <div>
 
           <div id="section1">
 
           <div id="section1">
            <h1>Section 1</h1>
 
            <p>Try to scroll this section and look at the navigation list while scrolling!</p>
 
 
           </div>
 
           </div>
 +
        </div>
 +
        <a class="biaoti">Description</a>
 +
        <a class="zhengwen">The replication of prokaryotes can be divided into three phases, B C and D, while there are multi-rounds of replication
 +
          happened in one cell. So both the phase and the copy number of genome is various in a culture.</a>
 +
        <div>
 +
          <label for="HZAUmenu-toggle" class="zhengwen">To know more about replication
 +
            <span class="caret_black"></span>
 +
          </label>
 +
          <input type="checkbox" id="HZAUmenu-toggle" />
 +
          <ul id="HZAUmenu">
 +
            <a>The replication process of E.coli can be divided into three phases, phase B, phase C and phase D. B is also called
 +
              pre-replication phase in which cells are preparing for DNA replication, like G1 phase of eukaryotes. C is also
 +
              called replication phase in which the genome is under replication corresponding to phase S in eukaryotic cell
 +
              cycle. The last D phase, of course, is called post-replication phase, in which chromosome separates and one
 +
              cell divides into two corresponding to G2 and M phase in eukaryotes. Among the three phases, C and D are relatively
 +
              constant, about 40 min and 20 min separately, so when to initiate a replication determines the whole cell cycle.
 +
              Recent research reveals a relationship between replication initiation and cell volume, but many details are
 +
              still remain unknown. But what we know is that a protein, DnaA, plays an important role in this process.
 +
              <br> DnaA is a versatile protein possessing many different functions related to cell cycle, among which the most
 +
              important one is to attached to the OriC, the origins of chromosome replication, and initiates replication.
 +
              So controlling cell cycle by interrupting the attachment of DnaA and corresponding DNA sequence with dCas9
 +
              is an efficient approach.
 +
              <br> The whole cell cycle of eukaryotes and prokaryotes show a certain similarity, but there is difference between
 +
              them. The cell cycle of prokaryotes can overlap, which means the next round of replication initiates before
 +
              the last replication complete, while eukaryotic cell cycle initiates one after another. Experiments have shown
 +
              that even an isogenetic bacteria grown in the same culture show a difference in both replication phase and
 +
              genome copy numbers and this becomes a huge noise when constructing the 3D genome structure and building up
 +
              a circuit related to genome gene. Besides, the development of synthetic biology requires a system to control
 +
              the reproduction of engineered organisms. So we believe that our project would be a useful tool no matter in
 +
              theoretical areas or application areas.
 +
            </a>
 +
          </ul>
 +
        </div>
 +
        <img src="https://static.igem.org/mediawiki/2017/4/44/T--HZAU-China--BCDperiod.png" class="tu_1">
 +
        <div>
 
           <div id="section2">
 
           <div id="section2">
            <h1>Section 2</h1>
 
            <p>Try to scroll this section and look at the navigation list while scrolling!</p>
 
 
           </div>
 
           </div>
 +
        </div>
 +
        <a class="zhengwen">Our problem arises from a research about constructing 4D genome of eukaryote. So we begin to wonder why there isn’t
 +
          a 4D genome project of prokaryote. After research we find that due to its complicated replication mechanism, there
 +
          will be a huge noise while detecting its structure, which hinder the research on prokaryotic genome.
 +
          <br>Besides, the heterogenicity of cells are gathering importance recently in different fields.</a>
 +
        <img src="https://static.igem.org/mediawiki/2017/a/a6/T--HZAU-China--computorHand.png" class="tu_2">
 +
        <div>
 
           <div id="section3">
 
           <div id="section3">
            <h1>Section 3</h1>
 
            <p>Try to scroll this section and look at the navigation list while scrolling!</p>
 
          </div>
 
          <div id="section41">
 
            <h1>Section 4-1</h1>
 
            <p>Try to scroll this section and look at the navigation list while scrolling!</p>
 
          </div>
 
          <div id="section42">
 
            <h1>Section 4-2</h1>
 
            <p>Try to scroll this section and look at the navigation list while scrolling!</p>
 
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 +
        <a class="zhengwen">Therefore we begin to think if there could be a methods to eliminate the heterogeneity. While thinking deeper into
 +
          this problem, it becomes interesting that what would happen if all the cells are synchronized, will there be a
 +
          new phenomenon that can change the traditional statements?
 +
          <br>So in our mind the ideal synchronization methods should be not only simply inhibit the cell cycle but at the same
 +
          time can free the inhibition according to our decision. As we all know, the manipulation of machine is much more
 +
          accurate than hum beings, and there is a trend to let machine help us to control the organisms, so we want our
 +
          synchronization system can also be controlled by machine, by program.</a>
 
       </div>
 
       </div>
 
     </div>
 
     </div>

Latest revision as of 14:04, 31 October 2017

Description The replication of prokaryotes can be divided into three phases, B C and D, while there are multi-rounds of replication happened in one cell. So both the phase and the copy number of genome is various in a culture.
Our problem arises from a research about constructing 4D genome of eukaryote. So we begin to wonder why there isn’t a 4D genome project of prokaryote. After research we find that due to its complicated replication mechanism, there will be a huge noise while detecting its structure, which hinder the research on prokaryotic genome.
Besides, the heterogenicity of cells are gathering importance recently in different fields.
Therefore we begin to think if there could be a methods to eliminate the heterogeneity. While thinking deeper into this problem, it becomes interesting that what would happen if all the cells are synchronized, will there be a new phenomenon that can change the traditional statements?
So in our mind the ideal synchronization methods should be not only simply inhibit the cell cycle but at the same time can free the inhibition according to our decision. As we all know, the manipulation of machine is much more accurate than hum beings, and there is a trend to let machine help us to control the organisms, so we want our synchronization system can also be controlled by machine, by program.