Difference between revisions of "Team:HZAU-China/Notebook"

(Prototype team page)
 
 
(12 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
{{HZAU-China}}
+
{{HZAU-China/Bootstrap}}
 
<html>
 
<html>
  
 +
<head>
 +
    <meta charset="UTF-8">
 +
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 +
    <link href="bootstrap.min.css" rel="stylesheet">
 +
    <!-- 导航栏CSS -->
 +
    <style type="text/css">
 +
        #sideMenu,
 +
        #top_title,
 +
        #team_submenu {
 +
            display: none;
 +
        }
  
−
<div class="column full_size">
+
        #HQ_page p {
 +
            margin: 0 !important;
 +
        }
  
−
<h1>Notebook</h1>
+
        #content {
−
<p> Document the dates you worked on your project. This should be a detailed account of the work done each day for your project.</p>
+
            padding: 0px;
 +
            width: 100%;
 +
            margin-top: 0px;
 +
            margin-left: 0px;
 +
        }
  
−
</div>
+
        #bodyContent h1,
−
<div class="clear"></div>
+
        #bodyContent h2,
 +
        #bodyContent h3,
 +
        #bodyContent h4,
 +
        #bodyContent h5 {
 +
            margin-bottom: 0px;
 +
        }
  
 +
        #team_name {
 +
            display: none
 +
        }
  
 +
        .global_wrapper {
 +
            padding: 0px 0px 0px 0px;
 +
        }
  
−
<div class="column two_thirds_size">
+
        #top_menu_14 {
−
<h3>What should this page have?</h3>
+
            height: 16px;
−
<ul>
+
        }
−
<li>Chronological notes of what your team is doing.</li>
+
−
<li> Brief descriptions of daily important events.</li>
+
−
<li>Pictures of your progress. </li>
+
−
<li>Mention who participated in what task.</li>
+
−
</ul>
+
  
−
</div>
+
        * {
 +
            margin: 0;
 +
            padding: 0;
 +
            list-style: none;
 +
            list-style-type: none;
 +
            text-decoration: none !important;
 +
        }
  
−
<div class="column third_size">
+
        body {
−
<div class="highlight decoration_A_full">
+
            margin: 0;
−
<h3>Inspiration</h3>
+
            padding: 0;
−
<p>You can see what others teams have done to organize their notes:</p>
+
            background-color: #F3F3F3;
 +
            font-size: 16px;
 +
            font-family: Arial, Verdana, Sans-serif;
 +
            letter-spacing: 0;
 +
            color: #FFFFFF;
 +
        }
  
−
<ul>  
+
        .daohang {
−
<li><a href="https://2014.igem.org/Team:ATOMS-Turkiye/Notebook">2014 ATOMS-Turkiye</a></li>
+
            background-color: #323643;
−
<li><a href="https://2014.igem.org/Team:Tec-Monterrey/ITESM14_project.html#tab_notebook">2014 Tec Monterrey</a></li>
+
            position: relative;
−
<li><a href="https://2014.igem.org/Team:Kyoto/Notebook/Magnetosome_Formation#title">2014 Kyoto</a></li>
+
            color: #ffffff;
−
<li><a href="https://2014.igem.org/Team:Cornell/notebook">2014 Cornell</a></li>
+
            height: 64px;
−
</ul>
+
            top: -2px;
−
</div>
+
        }
−
</div>
+
 
 +
        .logo-daohang {
 +
            height: 64px;
 +
            left: 10%;
 +
            float: left;
 +
            position: relative;
 +
        }
 +
 
 +
        .daohang a {
 +
            display: block;
 +
            text-decoration: none;
 +
        }
 +
 
 +
        .daohang .shade {
 +
            position: absolute;
 +
            width: 100%;
 +
            height: 160px;
 +
            top: 64px;
 +
            left: 0;
 +
            z-index: 1;
 +
            background-color: #EEEEEE;
 +
            box-shadow: 0 5px 15px #CCCCCC;
 +
            display: none;
 +
            border-bottom: #ffffff solid 1px;
 +
            border-bottom: rgba(255, 255, 255, 0.3) solid 1px;
 +
        }
 +
 
 +
        .daohang .caidan {
 +
            position: absolute;
 +
            top: 0;
 +
            right: 10%;
 +
            margin: 0;
 +
            z-index: 2;
 +
            padding: 0;
 +
            list-style: none;
 +
            width: 730px;
 +
            float: right;
 +
            overflow: hidden;
 +
            height: 64px;
 +
        }
 +
 
 +
        .daohang .caidan>li {
 +
            padding: 0;
 +
            float: left;
 +
            margin: 0;
 +
            text-align: center;
 +
            height: 224px;
 +
        }
 +
 
 +
        .daohang .shortName {
 +
            width: 110px;
 +
        }
 +
 
 +
        .daohang .longName {
 +
            width: 170px;
 +
        }
 +
 
 +
        .daohang .nav_head {
 +
            height: 64px;
 +
            line-height: 64px;
 +
            color: #ffffff;
 +
            font-size: 16px !important;
 +
        }
 +
 
 +
        .daohang .xsjPic {
 +
            display: inline-block;
 +
            width: 10px;
 +
            height: 10px;
 +
            vertical-align: middle;
 +
            background-size: 100% 100%;
 +
            background-image: url("https://static.igem.org/mediawiki/2018/6/63/T--HZAU-China--xsj.svg")
 +
        }
 +
 
 +
        .daohang .xjtPic {
 +
            display: inline-block;
 +
            width: 10px;
 +
            height: 10px;
 +
            vertical-align: middle;
 +
            background-size: 100% 100%;
 +
            background-image: url("https://static.igem.org/mediawiki/2018/8/8d/T--HZAU-China--xjt.svg")
 +
        }
 +
 
 +
        .daohang a:hover span {
 +
            transform: rotateY(180deg);
 +
            -webkit-transform: rotateY(180deg);
 +
            -moz-transform: rotateY(180deg);
 +
            -o-transform: rotateY(180deg);
 +
            -ms-transform: rotateY(180deg);
 +
            transition: all 0.5s ease-in-out;
 +
            -webkit-transition: all 0.5s ease-in-out;
 +
            -moz-transition: all 0.5s ease-in-out;
 +
            -o-transition: all 0.5s ease-in-out;
 +
        }
 +
 
 +
        .daohang .item {
 +
            font-size: 16px;
 +
            height: 40px;
 +
            line-height: 40px;
 +
            color: #333333;
 +
            position: relative;
 +
        }
 +
 
 +
        .daohang .caidan:hover {
 +
            height: 264px;
 +
            transition: height 0.3s;
 +
        }
 +
 
 +
        .daohang .caidan:hover+.shade {
 +
            display: block;
 +
        }
 +
 
 +
        .daohang .caidan>li.hiLight:hover {
 +
            background-color: #ffffff;
 +
        }
 +
 
 +
        .daohang .caidan>li:hover .nav_head {
 +
            background-color: #EA0D04;
 +
        }
 +
 
 +
        .daohang .caidan>li:hover .item {}
 +
 
 +
 
 +
        .daohang .shortName .item:before {
 +
            content: '';
 +
            display: block;
 +
            position: absolute;
 +
            width: 80px;
 +
            height: 1px;
 +
            bottom: 5px;
 +
            left: 15px;
 +
            background-color: #CCCCCC;
 +
        }
 +
 
 +
        .daohang .shortName .item:hover:after {
 +
            content: '';
 +
            display: block;
 +
            position: absolute;
 +
            width: 80px;
 +
            height: 2px;
 +
            bottom: 5px;
 +
            left: 15px;
 +
            background-color: #f51720;
 +
        }
 +
 
 +
        .daohang .longName .item:before {
 +
            content: '';
 +
            display: block;
 +
            position: absolute;
 +
            width: 130px;
 +
            height: 1px;
 +
            bottom: 5px;
 +
            left: 20px;
 +
            background-color: #CCCCCC;
 +
        }
 +
 
 +
        .daohang .longName .item:hover:after {
 +
            content: '';
 +
            display: block;
 +
            position: absolute;
 +
            width: 130px;
 +
            height: 2px;
 +
            bottom: 5px;
 +
            left: 20px;
 +
            background-color: #f51720;
 +
        }
 +
 
 +
        @media screen and (max-width: 1200px) {
 +
            .logo-daohang {
 +
                left: 3%;
 +
            }
 +
 
 +
            .daohangyi {
 +
                font-size: 12px;
 +
            }
 +
        }
 +
 
 +
        @media screen and (max-width: 880px) {
 +
 
 +
            .daohang .caidan {
 +
                right: 0;
 +
                width: 100%;
 +
            }
 +
 
 +
            .logo-daohang {
 +
                display: none;
 +
            }
 +
 
 +
            .daohang .shortName {
 +
                width: 15vw;
 +
            }
 +
 
 +
            .daohang .longName {
 +
                width: 25vw;
 +
            }
 +
 
 +
            .daohangyi img {
 +
                display: none;
 +
            }
 +
 
 +
            .daohang .longName .item:before {
 +
                width: 150px;
 +
                left: 20px;
 +
            }
 +
 
 +
            .daohang .longName .item:hover:after {
 +
                width: 150px;
 +
                left: 20px;
 +
            }
 +
        }
 +
    </style>
 +
    <!-- 内容CSS -->
 +
    <style class="text/css">
 +
        .clearfix:after {
 +
            content: ".";
 +
            display: block;
 +
            height: 0;
 +
            clear: both;
 +
            visibility: hidden;
 +
 
 +
        }
 +
 
 +
        .neirong {
 +
            width: 100%;
 +
            height: auto;
 +
            background-color: #F3F3F3;
 +
        }
 +
 
 +
        .zhengwen {
 +
            width: 80%;
 +
            /* height: auto; */
 +
            margin: 20px 40px 0 0;
 +
            /* right: 2%; */
 +
            /* top: 90px; */
 +
            padding: 50px 3%;
 +
            float: right;
 +
            /* position: relative; */
 +
            background-color: #FFF;
 +
            box-shadow: 0 1px 3px #676767;
 +
            /* border: 2px solid black; */
 +
            /* border-radius: 3px; */
 +
            /* overflow: hidden; */
 +
            /* display: block; */
 +
            /* font-family: Arial, Verdana, Sans-serif; */
 +
        }
 +
 
 +
        .cebian {
 +
            width: 180px;
 +
            /* height: 80vh; */
 +
            float: left;
 +
            /* left: 1vw; */
 +
            top: 150px;
 +
            position: fixed;
 +
            box-shadow: 0 1px 3px #676767;
 +
            /* border:2px solid black */
 +
            /* background-color: #323643 */
 +
        }
 +
 
 +
        .zhengwen p{
 +
            text-align: justify !important;
 +
            font-family:  'Times New Roman',Helvetica,'Open Sans',  Arial, sans-serif !important;
 +
            color: #3B3B3B;
 +
            font-size: 26px !important;
 +
            padding-right: 20px;
 +
        }
 +
 
 +
        .daimg {
 +
            width: 100%;
 +
            height: auto;
 +
            margin: 20px 0;
 +
            box-shadow: 0 1px 3px #676767;
 +
        }
 +
 
 +
        .h1 {
 +
            height: 80px;
 +
            line-height: 80px;
 +
            font-weight: bold;
 +
            font-family: 'Product Sans', sans-serif;
 +
            font-size: 40px;
 +
            color: #3B3B3B;
 +
            border-bottom: 2px solid #676767;
 +
            margin-bottom: 20px;
 +
        }
 +
 
 +
        .h2 {
 +
            height: 40px;
 +
            line-height: 40px;
 +
            font-weight: bold;
 +
            /* font-weight: bold; */
 +
            font-family: 'Product Sans', sans-serif;
 +
            font-size: 30px;
 +
            color: #484848;
 +
            /* margin-bottom: 20px; */
 +
        }
 +
 
 +
        .h3 {
 +
            height: 30px;
 +
            line-height: 30px;
 +
            font-weight: bold;
 +
            /* font-weight: bold; */
 +
            font-family: 'Product Sans', sans-serif;
 +
            font-size: 24px;
 +
            color: #484848;
 +
            /* margin-bottom: 20px; */
 +
        }
 +
 
 +
        .zhengwen .tuandui_list {
 +
            position: relative;
 +
            margin-top: 40px;
 +
            height: 520px;
 +
            overflow: hidden;
 +
        }
 +
 
 +
        .tuandui_list>li {
 +
            padding: 0;
 +
            width: 20%;
 +
            float: left;
 +
            position: relative;
 +
            margin: 0 2.4%;
 +
            text-align: center;
 +
        }
 +
 
 +
        .zhengwen .laoshi_list {
 +
            position: relative;
 +
            margin-top: 40px;
 +
            height: 430px;
 +
        }
 +
 
 +
        .laoshi_list>li {
 +
            padding: 0;
 +
            width: 20%;
 +
            float: left;
 +
            position: relative;
 +
            margin: 0 2.4%;
 +
            text-align: center;
 +
        }
 +
 
 +
        .duiyuan {
 +
            margin: 20px 0;
 +
            /* border: 1px solid red; */
 +
        }
 +
 
 +
        .laoshi {
 +
            margin: 20px 0;
 +
        }
 +
 
 +
        .duiyuan img {
 +
            width: 100%;
 +
            height: auto;
 +
            border-top: 3px solid #323643;
 +
            border-left: 3px solid #323643;
 +
            border-right: 3px solid #323643;
 +
        }
 +
 
 +
        .laoshi img {
 +
            width: 100%;
 +
            height: 50vh;
 +
            border-top: 3px solid #323643;
 +
            border-left: 3px solid #323643;
 +
            border-right: 3px solid #323643;
 +
        }
 +
 
 +
        .duiyuan .xingming {
 +
            width: 100%;
 +
            height: 50px;
 +
            line-height: 50px;
 +
            background-color: #323643;
 +
            border-left: 3px solid #323643;
 +
            border-right: 3px solid #323643;
 +
            font-size: 16px;
 +
            color: white;
 +
            box-shadow: 0 1px 3px #CCCCCC;
 +
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 +
            font-size: 24px;
 +
            font-weight: bold;
 +
            text-align: center;
 +
        }
 +
 
 +
        .laoshi .xingming {
 +
            width: 100%;
 +
            height: 50px;
 +
            line-height: 50px;
 +
            background-color: #323643;
 +
            border-left: 3px solid #323643;
 +
            border-right: 3px solid #323643;
 +
            font-size: 16px;
 +
            color: white;
 +
            box-shadow: 0 1px 3px #CCCCCC;
 +
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 +
            font-size: 24px;
 +
            font-weight: bold;
 +
            text-align: center;
 +
        }
 +
 
 +
        .duiyuan .jieshao {
 +
            width: 100%;
 +
            height: 200px;
 +
            background-color: #f6eee0;
 +
            border-bottom: 3px solid #323643;
 +
            border-left: 3px solid #323643;
 +
            border-right: 3px solid #323643;
 +
            /* border-bottom-left-radius: 5px;
 +
            border-bottom-right-radius: 5px; */
 +
        }
 +
 
 +
        .duiyuan .jieshao .saohua {
 +
            padding: 10px 4px 0px 4px !important;
 +
            color: black;
 +
            font-family: Arial;
 +
            font-style: italic;
 +
            font-size: 15px !important;
 +
            list-style-type: none;
 +
            text-align: justify;
 +
            line-height: 18px;
 +
        }
 +
    </style>
 +
    <!-- 滚动菜单栏CSS -->
 +
    <style>
 +
        #float01 {}
 +
   
 +
            #float02 {}
 +
   
 +
            div.floatCtro {
 +
                width: 100%;
 +
                /* height: auto; */
 +
                margin: 0;
 +
                position: relative;
 +
                background: #fff;
 +
   
 +
            }
 +
   
 +
            .daohangyi {
 +
                display: block;
 +
                width: 100%;
 +
                /* height: auto; */
 +
                /* text-align: left !important; */
 +
                color: #ffffff !important;
 +
                font-size: 16px;
 +
                padding:0;
 +
                background-color: #323643;
 +
                border-bottom: 1px solid black;
 +
                padding:0 3%;
 +
                text-decoration: none !important;
 +
            }
 +
   
 +
            div.floatCtro .daohanger {
 +
                width: 100%;
 +
                text-align: left !important;
 +
                height: auto;
 +
                line-height: 25px;
 +
                font-family: Arial;
 +
                font-size: 14px !important;
 +
                color: #676767;
 +
                margin: 0;
 +
                padding:10px 8%;
 +
                cursor: pointer;
 +
                background: #fff;
 +
            }
 +
   
 +
            div.floatCtro a {
 +
                display: inline-block;
 +
                display: none;
 +
                width: 100%;
 +
                height: 40px;
 +
                padding:10px 8%;
 +
                /* margin: 10px 0 0 0; */
 +
                background: #FFF;
 +
                color: #000 !important;
 +
                vertical-align: middle;
 +
                cursor: pointer;
 +
            }
 +
   
 +
            div.floatCtro a span {
 +
                display: block;
 +
                height: auto;
 +
                text-align: left !important;
 +
                line-height: 18px;
 +
                font-family: Arial;
 +
                font-size: 16px;
 +
            }
 +
   
 +
            div.floatCtro a:hover {
 +
                /* background: #76b39d; */
 +
                color: #EA0D04 !important;
 +
                zoom: 1;
 +
            }
 +
   
 +
            /* .cebian a:hover {
 +
                color: #f6eee0 !important;
 +
            } */
 +
   
 +
            div.floatCtro .daohanger:hover {
 +
                /* background: #76b39d; */
 +
                color: #1fa67a;
 +
                text-decoration: underline !important;
 +
            }
 +
   
 +
            div.floatCtro .daohanger.cur {
 +
                /* background: #1fa67a; */
 +
                color: #1fa67a;
 +
            }
 +
   
 +
            .biaoti {
 +
                display: inline-block;
 +
                margin: 8px 0;
 +
                /* width: 50%; */
 +
                /* margin-left: 6%; */
 +
                /* text-align: center; */
 +
                text-decoration: none !important;
 +
            }
 +
   
 +
            .daohangyi img {
 +
                display: inline-block;
 +
                width: 12px;
 +
                height: 12px;
 +
                vertical-align: middle;
 +
                background-size: 100% 100%;
 +
   
 +
            }
 +
            .cebian div:hover img{
 +
                transform: rotateY(180deg);           
 +
                -webkit-transform: rotateY(180deg);           
 +
                -moz-transform: rotateY(180deg);           
 +
                -o-transform: rotateY(180deg);           
 +
                -ms-transform: rotateY(180deg);
 +
                transition: all 0.5s ease-in-out;           
 +
                -webkit-transition: all 0.5s ease-in-out;           
 +
                -moz-transition: all 0.5s ease-in-out;           
 +
                -o-transition: all 0.5s ease-in-out;
 +
            }
 +
            .cebian a:hover img{
 +
                transform: rotate(360deg);           
 +
                -webkit-transform: rotate(360deg);           
 +
                -moz-transform: rotate(360deg);           
 +
                -o-transform: rotate(360deg);           
 +
                -ms-transform: rotate(360deg);
 +
                transition: all 0.5s ease-in-out;           
 +
                -webkit-transition: all 0.5s ease-in-out;           
 +
                -moz-transition: all 0.5s ease-in-out;           
 +
                -o-transition: all 0.5s ease-in-out;
 +
            }
 +
   
 +
            @media screen and (max-width: 1200px) {           
 +
             
 +
                .cebian {
 +
                width: 15%;
 +
                }
 +
   
 +
                .zhengwen {
 +
                margin: 20px 20px 0 0;
 +
   
 +
                .daohangyi {
 +
                    font-size: 14px;
 +
                }
 +
                .daohangyi img {
 +
                    display: none;
 +
                } 
 +
            }
 +
   
 +
            @media screen and (max-width: 900px) {
 +
   
 +
                .daohangyi img {
 +
                    display: none;
 +
                } 
 +
               
 +
                .laoshi img {
 +
                    height: 30vh;
 +
                }
 +
            }
 +
    </style>
 +
    <!-- 折叠框CSS -->
 +
    <style>
 +
        .collapseDiv {
 +
              color: #333;
 +
              border-radius: 4px;
 +
              background-color: #F3F3F3;
 +
              border: 1px solid transparent;
 +
              border-color: #ddd;
 +
              box-shadow: 0 1px 1px #F3F3F3;
 +
              margin-top: 5px;
 +
              margin-bottom: 0;
 +
            }
 +
            .collapseDiv label {
 +
              cursor: pointer;
 +
              font-size: 24px  !important;
 +
              /* font-weight: bold; */
 +
              color: green  !important;
 +
              border-color: #F3F3F3  !important;
 +
              padding: 5px 15px 5px 18px  !important;
 +
              background-color: #f5f5f5  !important;
 +
              margin: 0  !important;
 +
              border-radius: 5px  !important;
 +
            }
 +
   
 +
            #zhedie-toggle1,
 +
            #zhedie-toggle2,
 +
            #zhedie-toggle3,
 +
            #zhedie-toggle4 {
 +
                display: none;
 +
            }
 +
   
 +
            #zhedie1,
 +
            #zhedie2,
 +
            #zhedie3,
 +
            #zhedie4 {
 +
                display: none;
 +
                font-size: 18px;
 +
                padding: 0 50px 0 50px;
 +
                width: 100%;
 +
                margin: 0;
 +
                color: black;
 +
            }
 +
   
 +
            #zhedie-toggle1:checked+#zhedie1,
 +
            #zhedie-toggle2:checked+#zhedie2,
 +
            #zhedie-toggle3:checked+#zhedie3,
 +
            #zhedie-toggle4:checked+#zhedie4 {
 +
                display: block;
 +
            }
 +
   
 +
           
 +
   
 +
   
 +
            .collapse_body {
 +
              background-color: #fff;
 +
              position: relative;
 +
              height: 0;
 +
              overflow: hidden;
 +
              -webkit-transition-timing-function: ease;
 +
              -o-transition-timing-function: ease;
 +
              transition-timing-function: ease;
 +
              -webkit-transition-duration: .35s;
 +
              -o-transition-duration: .35s;
 +
              transition-duration: .35s;
 +
              -webkit-transition-property: height, visibility;
 +
              -o-transition-property: height, visibility;
 +
              transition-property: height, visibility
 +
            }
 +
            .collapse_content {
 +
              font-size: 20px;
 +
              border-top: 1px solid #ddd;
 +
              background-color: #fff;
 +
              padding: 15px;
 +
            }
 +
    </style>
 +
 
 +
</head>
 +
 
 +
<body>
 +
    <!-- 导航栏 -->
 +
    <nav class="daohang">
 +
        <a href="https://2018.igem.org/Team:HZAU-China"><img src="https://static.igem.org/mediawiki/2018/7/75/T--HZAU-China--logo-nav.png"
 +
                class="logo-daohang"></a>
 +
        <ul class="caidan">
 +
            <li class="hiLight shortName">
 +
                <a class="nav_head" href="https://2018.igem.org/Team:HZAU-China">
 +
                    <span>Project</span>
 +
                    <span class="xsjPic"></span>
 +
                </a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Description">Description</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Design">Design</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Results">Results</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Demonstrate">Demonstrate</a>
 +
            </li>
 +
            <li class="hiLight shortName">
 +
                <a class="nav_head" href="#">
 +
                    <span>Wetlab</span>
 +
                    <span class="xjtPic"></span>
 +
                </a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Experiments">Experiments</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Improve">Improve</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/InterLab">InterLab</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Notebook">Notebook</a>
 +
 
 +
            </li>
 +
            <li class="hiLight shortName">
 +
                <a class="nav_head" href="#">
 +
                    <span>Drylab</span>
 +
                    <span class="xjtPic"></span>
 +
                </a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Model">Model</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Software">Software</a>
 +
            </li>
 +
            <li class="hiLight longName">
 +
                <a class="nav_head" href="#">
 +
                    <span>Human&nbsp;Practices</span>
 +
                    <span class="xjtPic"></span>
 +
                </a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Safety">Safety</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Human_Practices">Human Practices</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Public_Engagement">Public Engagement</a>
 +
            </li>
 +
            <li class="hiLight shortName">
 +
                <a class="nav_head" href="#">
 +
                    <span>About Us</span>
 +
                    <span class="xjtPic"></span>
 +
                </a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Team">Team</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Attributions">Attributions</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Collaborations">Collaborations</a>
 +
            </li>
 +
            <li class="hiLight shortName">
 +
                <a class="nav_head" href="#">
 +
                    <span>Parts</span>
 +
                    <span class="xjtPic"></span>
 +
                </a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Basic_Part">Basic</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Composite_Part">Composite</a>
 +
            </li>
 +
        </ul>
 +
        <div class="shade"></div>
 +
    </nav>
 +
    <!-- 内容 -->
 +
    <div class="neirong clearfix">
 +
        <!-- 正文 -->
 +
        <div class="zhengwen">
 +
            <div id="float01" class="cur">
 +
                <div class="h1">Processing of experiment results</div>
 +
                <h2><b>1.</b> Verification of Poisson distribution</h2>
 +
                <p>
 +
                    We infect tumor cells (HeLa GSDMD KO cell line) with <i>Salmonella</i> carrying the GFP gene for a period of time and
 +
                    then count them, and the result is that the distribution of <i>Salmonella</i> in the tumor cells
 +
                    is consistent with a Poisson distribution.
 +
                </p>
 +
                <br><br>
 +
                <div style="width: 80%; margin: 20px auto">
 +
                    <img src="https://static.igem.org/mediawiki/2018/8/86/T--HZAU-China--Notebook-fig1.png" width="100%" alt="">
 +
                </div>
 +
                <p style="width: 100%; text-align: center !important;"><b>Figure 1.</b> Infection of HeLa GSDMD KO cells by <i>Salmonella</i> and the result of analysis.</p><br>
 +
                <p>The amounts of host cells and bacteria were measured in experiments.
 +
                </p>
 +
            </div>
 +
            <div id="float02">
 +
                <p>The concentration of bacteria was calculated according to MOI (multiplicity of infection) and cell density.<br><br>
 +
                    We adjusted the parameter As to match the curve with the results of the Salmonella infection experiment. When As is
 +
                    equal to 0.0003, the curve simulated by the mathematical model matches the experimental measurements.
 +
                </p>
 +
                <div style="width: 80%; margin: 20px auto">
 +
                    <img src="https://static.igem.org/mediawiki/2018/8/84/T--HZAU-China--Notebook-fig2.png" width="100%" alt="">
 +
                </div>
 +
                <p style="width: 100%; text-align: center !important;"><b>Figure 2.</b> Parameter fitting of the tumor
 +
                    cells infection experiments. Red points are experimental results.
 +
                </p><br>
 +
                <p>
 +
                    The parameters ‘Nsal’ and ‘Tumor’ are already known before the experiment. When the parameter ‘As’ is 0.0003,
 +
                    the model results best fit the experimental results.  </p>
 +
 
 +
            </div>
 +
        </div>
 +
        <!-- 侧边 -->
 +
        <div class="cebian">
 +
            <!-- 滚动菜单栏 -->
 +
            <a class="daohangyi" href="https://2018.igem.org/Team:HZAU-China/Experiments">
 +
                <span class="biaoti">Experiments</span>
 +
                <span class="xsjPic"><img src="https://static.igem.org/mediawiki/2018/7/7c/T--HZAU-China--ysj.svg" alt=""></span>
 +
            </a>
 +
            <div class="daohangyi">
 +
                <span class="biaoti">Improve</span>
 +
                <span class="xsjPic"><img src="https://static.igem.org/mediawiki/2018/7/7c/T--HZAU-China--ysj.svg" alt=""></span>
 +
            </div>
 +
            <a class="daohangyi" href="https://2018.igem.org/Team:HZAU-China/InterLab">
 +
                <span class="biaoti">InterLab</span>
 +
                <span class="xsjPic"><img src="https://static.igem.org/mediawiki/2018/7/7c/T--HZAU-China--ysj.svg" alt=""></span>
 +
            </a>
 +
            <div class="daohangyi" href="#">
 +
                <span class="biaoti">Notebook</span>
 +
                <span class="xsjPic"><img src="https://static.igem.org/mediawiki/2018/8/8d/T--HZAU-China--xjt.svg" alt=""></span>
 +
 
 +
            </div>
 +
            <div class="floatCtro">
 +
                <!-- <p class="daohanger">Calibration</p>
 +
                <p class="daohanger">Cell Measurement</p>
 +
                <p class="daohanger">Summary</p> -->
 +
                <a>
 +
                    <span>Back&nbsp;to&nbsp;Top</span>
 +
                </a>
 +
            </div>
 +
            <div class="daohangyi" style="height:20px">
 +
            </div>
 +
            <!-- 滚动菜单栏 -->
 +
        </div>
 +
    </div>
 +
 
 +
    <!-- 滚动菜单栏jQuery -->
 +
    <script src="jquery.js" type="text/javascript"></script>
 +
    <script>
 +
        $(function () {
 +
            var AllHet = $(window).height();
 +
            var mainHet = $('.floatCtro').height();
 +
            var fixedTop = (AllHet - mainHet) / 2
 +
            //  $('div.floatCtro').css({top:fixedTop+'px'});
 +
            $('div.floatCtro p').click(function () {
 +
                var ind = $('div.floatCtro p').index(this) + 1;
 +
                var topVal = $('#float0' + ind).offset().top;
 +
                $('body,html').animate({ scrollTop: topVal }, 1000)
 +
            })
 +
            $('div.floatCtro a').click(function () {
 +
                $('body,html').animate({ scrollTop: 0 }, 1000)
 +
            })
 +
            $(window).scroll(scrolls)
 +
            scrolls()
 +
            function scrolls() {
 +
                var f1, f2, bck;
 +
                var fixRight = $('div.floatCtro p');
 +
                var blackTop = $('div.floatCtro a')
 +
                var sTop = $(window).scrollTop();
 +
                fl = $('#float01').offset().top;
 +
                f2 = $('#float02').offset().top;
 +
 
 +
 
 +
                if (sTop <= f2 - 100) {
 +
                    blackTop.fadeOut(300).css('display', 'none')
 +
                }
 +
                else {
 +
                    blackTop.fadeIn(300).css('display', 'block')
 +
                }
 +
 
 +
                if (sTop >= fl) {
 +
                    fixRight.eq(0).addClass('cur').siblings().removeClass('cur');
 +
                }
 +
                if (sTop >= f2 - 100) {
 +
                    fixRight.eq(1).addClass('cur').siblings().removeClass('cur');
 +
                }
 +
 
 +
            }
 +
        })
 +
    </script>
 +
    <!-- 滚动菜单栏jQuery -->
 +
 
 +
</body>
  
 
</html>
 
</html>

Latest revision as of 01:40, 18 October 2018

Processing of experiment results

1. Verification of Poisson distribution

We infect tumor cells (HeLa GSDMD KO cell line) with Salmonella carrying the GFP gene for a period of time and then count them, and the result is that the distribution of Salmonella in the tumor cells is consistent with a Poisson distribution.



Figure 1. Infection of HeLa GSDMD KO cells by Salmonella and the result of analysis.


The amounts of host cells and bacteria were measured in experiments.

The concentration of bacteria was calculated according to MOI (multiplicity of infection) and cell density.

We adjusted the parameter As to match the curve with the results of the Salmonella infection experiment. When As is equal to 0.0003, the curve simulated by the mathematical model matches the experimental measurements.

Figure 2. Parameter fitting of the tumor cells infection experiments. Red points are experimental results.


The parameters ‘Nsal’ and ‘Tumor’ are already known before the experiment. When the parameter ‘As’ is 0.0003, the model results best fit the experimental results.

Experiments
Improve
InterLab
Notebook
Back to Top