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

Line 1: Line 1:
−
{{HZAU-China}}
+
<!DOCTYPE html>
 
<html>
 
<html>
−
 
 
<head>
 
<head>
−
  <meta charset="UTF-8">
+
<meta charset="utf-8">
−
  <!--内容的样式-->
+
<title>Bootstrap 实例</title>
−
  <style>
+
<meta name="viewport" content="width=device-width, initial-scale=1">
−
    body {
+
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
−
      font-family: "Arial", Helvetica, sans-serif;
+
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
−
      text-align: justify;
+
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
−
      margin: 0px;
+
<style>
−
      background-color: #ffffff;
+
body {
−
    }
+
position: relative;
 +
}
 +
ul.nav-pills {
 +
top: 20px;
 +
position: fixed;
 +
}
 +
div.col-sm-9 div {
 +
height: 250px;
 +
font-size: 28px;
 +
}
 +
#section1 {color: #fff; background-color: #1E88E5;}
 +
#section2 {color: #fff; background-color: #673ab7;}
 +
#section3 {color: #fff; background-color: #ff9800;}
 +
#section41 {color: #fff; background-color: #00bcd4;}
 +
#section42 {color: #fff; background-color: #009688;}
  
−
    .HZAU_content a:hover {
+
@media screen and (max-width: 810px) {
−
      color: black;
+
#section1, #section2, #section3, #section41, #section42  {
−
      text-decoration: none;
+
margin-left: 150px;
−
    }
+
}
 +
}
 +
</style>
 +
</head>
 +
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
  
−
    .HZAU_content a {
+
<div class="container">
−
      color: black;
+
<div class="row">
−
    }
+
<nav class="col-sm-3" id="myScrollspy">
 +
<div class="container-fluid">
 +
<div class="container-fluid">
 +
<ul class="nav nav-pills nav-stacked">
 +
<li class="active"><a href="#section1">Section 1</a></li>
 +
<li><a href="#section2">Section 2</a></li>
 +
<li><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>
 +
</ul>
 +
</div>
 +
</div>
 +
</nav>
 +
<div class="col-sm-9">
 +
<div id="section1">   
 +
<h1>Section 1</h1>
 +
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
 +
</div>
 +
<div id="section2">
 +
<h1>Section 2</h1>
 +
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
 +
</div>       
 +
<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>
  
−
    .HZAU_content {
 
−
      position: absolute;
 
−
      top: 43px;
 
−
      left: 250px;
 
−
      width: 1000px;
 
−
      height: 2100px;
 
−
      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;
 
−
    }
 
−
 
−
    .HZAU_item {
 
−
      position: absolute;
 
−
      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 {
 
−
      display: block;
 
−
      font-style: arial;
 
−
      font-size: 18px;
 
−
      line-height: 34px;
 
−
      text-align: justify;
 
−
      color: #000;
 
−
      margin-bottom: 9px;
 
−
      margin-left: 0px;
 
−
      margin-right: 0px;
 
−
      margin-top: 7.2px
 
−
    }
 
−
 
−
    .jiaozheng {
 
−
      position: relative;
 
−
    }
 
−
 
−
    .jiaozheng a {
 
−
      position: absolute;
 
−
      top: -66px;
 
−
    }
 
−
 
−
    .HZAU_content img {
 
−
      margin: 0 auto;
 
−
      display: block;
 
−
    }
 
−
 
−
    .tu_1 {
 
−
      width: 666px;
 
−
    }
 
−
 
−
    .tu_2 {
 
−
      width: 555px;
 
−
    }
 
−
  </style>
 
−
  <style>
 
−
    span.caret_black {
 
−
      display: inline-block;
 
−
      margin-left: 6px;
 
−
      vertical-align: middle;
 
−
      width: 0;
 
−
      height: 0;
 
−
      border-left: 6px solid transparent;
 
−
      border-right: 6px solid transparent;
 
−
      border-top: 6px solid black;
 
−
    }
 
−
 
−
    label {
 
−
      cursor: pointer;
 
−
    }
 
−
 
−
    #menu-toggle {
 
−
      display: none;
 
−
      /* hide the checkbox */
 
−
    }
 
−
 
−
    #menu {
 
−
      display: none;
 
−
      font-size: 17.5px;
 
−
      margin-left: 0px;
 
−
      padding-left: 25px;
 
−
    }
 
−
 
−
    #menu-toggle:checked+#menu {
 
−
      display: block;
 
−
    }
 
−
  </style>
 
−
</head>
 
−
 
−
<body>
 
−
  <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">
 
−
    <div class="HZAU_item">
 
−
      <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="menu-toggle" class="zhengwen" style="color:blue">To know more about replication
 
−
          <span class="caret_black"></span>
 
−
        </label>
 
−
        <input type="checkbox" id="menu-toggle" />
 
−
        <ul id="menu">
 
−
          <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/f/f1/HZAU_2017_BCDperiod.png" class="tu_1">
 
−
      <div class="jiaozheng">
 
−
        <a id="item2_1"></a>
 
−
      </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/d/d2/HZAU_2017_computorHand.png" class="tu_2">
 
−
      <div class="jiaozheng">
 
−
        <a id="item3_1"></a>
 
−
      </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>
 
 
</body>
 
</body>
−
<script>
 
−
 
−
</script>
 
−
 
 
</html>
 
</html>

Revision as of 12:28, 31 October 2017

<!DOCTYPE html> Bootstrap 实例

Section 1

Try to scroll this section and look at the navigation list while scrolling!

Section 2

Try to scroll this section and look at the navigation list while scrolling!

Section 3

Try to scroll this section and look at the navigation list while scrolling!

Section 4-1

Try to scroll this section and look at the navigation list while scrolling!

Section 4-2

Try to scroll this section and look at the navigation list while scrolling!