Difference between revisions of "Team:TJU China/Notebook/Group1"

(Created page with "body{ background: url("./img/notebook_group_bg.png"); background-size: 100%; } .notebook_month{ font-style: italic; margin-left: 50px; float: left; wid...")
 
 
(16 intermediate revisions by the same user not shown)
Line 1: Line 1:
body{
+
<!DOCTYPE >
    background: url("./img/notebook_group_bg.png");
+
<html>
    background-size: 100%;
+
 
}
+
<head>
.notebook_month{
+
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    font-style: italic;
+
    <link rel="stylesheet" href="https://2018.igem.org/Template:TJU_China/default_CSS?action=raw&ctype=text/css" type="text/css">
    margin-left: 50px;
+
    <link rel="stylesheet" href="https://2018.igem.org/Template:TJU_China/nav_css?action=raw&ctype=text/css" type="text/css">
    float: left;
+
    <style>
    width: 50px;
+
        body {
    margin-top: 10px;
+
            background: url("./img/notebook_group_bg.png");
    position: fixed;
+
            background-size: 100%;
}
+
        }
.notebook_month p{
+
 
    margin-top: 55px;
+
        .notebook_month {
}
+
            font-style: italic;
.notebook_timeline{
+
            margin-left: 50px;
    position: fixed;
+
            float: left;
    float: left;
+
            width: 50px;
    width: 6px;
+
            margin-top: 4px;
    height:660px;
+
            position: fixed;
    background: -webkit-linear-gradient(#bed742, #4e72b8); /* Safari 5.1 - 6.0 */
+
        }
    background: -o-linear-gradient(#bed742, #4e72b8); /* Opera 11.1 - 12.0 */
+
 
    background: -moz-linear-gradient(#bed742, #4e72b8); /* Firefox 3.6 - 15 */
+
        .notebook_month_p {
    background: linear-gradient(#bed742, #4e72b8); /* 标准的语法(必须放在最后) */
+
            margin-top: 55px;
    margin-left: 170px;
+
            font-size: 22px;
}
+
        }
.notebook_button_list{
+
 
    position: fixed;
+
        .notebook_timeline {
    margin-left: 100px;
+
            position: fixed;
}
+
            float: left;
.notebook_button_list button{
+
            width: 6px;
    float: left;
+
            height: 660px;
    height: 30px;
+
            background: #4e72b8;
    width: 30px;
+
            margin-left: 170px;
    border-radius:50%;
+
        }
    border:none;
+
 
    background: -webkit-linear-gradient(left, #81C0C0 , #D2A2CC); /* Safari 5.1 - 6.0 */
+
        .notebook_button_list {
    background: -o-linear-gradient(right, #81C0C0, #D2A2CC); /* Opera 11.1 - 12.0 */
+
            position: fixed;
    background: -moz-linear-gradient(right, #81C0C0, #D2A2CC); /* Firefox 3.6 - 15 */
+
            margin-left: 100px;
    background: linear-gradient(to right, #81C0C0 , #D2A2CC); /* 标准的语法(必须放在最后) */
+
        }
 +
 
 +
        .notebook_button_list button {
 +
            float: left;
 +
            height: 30px;
 +
            width: 30px;
 +
            border-radius: 50%;
 +
            border: none;
 +
            background: -webkit-linear-gradient(left, #81C0C0, #D2A2CC);
 +
            /* Safari 5.1 - 6.0 */
 +
            background: -o-linear-gradient(right, #81C0C0, #D2A2CC);
 +
            /* Opera 11.1 - 12.0 */
 +
            background: -moz-linear-gradient(right, #81C0C0, #D2A2CC);
 +
            /* Firefox 3.6 - 15 */
 +
            background: linear-gradient(to right, #81C0C0, #D2A2CC);
 +
            /* 标准的语法(必须放在最后) */
 +
        }
 +
 
 +
        .notebook_button_list button:hover {
 +
            background: -webkit-linear-gradient(left, #005757, #8600FF);
 +
            /* Safari 5.1 - 6.0 */
 +
            background: -o-linear-gradient(right, #005757, #8600FF);
 +
            /* Opera 11.1 - 12.0 */
 +
            background: -moz-linear-gradient(right, #005757, #8600FF);
 +
            /* Firefox 3.6 - 15 */
 +
            background: linear-gradient(to right, #005757, #8600FF);
 +
            /* 标准的语法(必须放在最后) */
 +
        }
 +
 
 +
        .notebook_button1 {
 +
            outline: none;
 +
            position: relative;
 +
            left: 58px;
 +
            top: 54px;
 +
        }
 +
 
 +
        .notebook_button2 {
 +
            outline: none;
 +
            position: relative;
 +
            left: 28px;
 +
            top: 127px;
 +
        }
 +
 
 +
        .notebook_button3 {
 +
            outline: none;
 +
            position: relative;
 +
            left: -2px;
 +
            top: 200px;
 +
        }
 +
 
 +
        .notebook_button4 {
 +
            outline: none;
 +
            position: relative;
 +
            left: -32px;
 +
            top: 275px;
 +
        }
 +
 
 +
        .notebook_button5 {
 +
            outline: none;
 +
            position: relative;
 +
            left: -62px;
 +
            top: 347px;
 +
        }
 +
 
 +
        .notebook_button6 {
 +
            outline: none;
 +
            position: relative;
 +
            left: -92px;
 +
            top: 418px;
 +
        }
 +
 
 +
        .notebook_button7 {
 +
            outline: none;
 +
            position: relative;
 +
            left: -122px;
 +
            top: 493px;
 +
        }
 +
 
 +
        .notebook_button8 {
 +
            outline: none;
 +
            position: relative;
 +
            left: -152px;
 +
            top: 565px;
 +
        }
 +
 
 +
        #notebook_March {
 +
            display: block;
 +
        }
 +
 
 +
        #notebook_April {
 +
            display: none;
 +
        }
 +
 
 +
        #notebook_May {
 +
            display: none;
 +
        }
 +
 
 +
        #notebook_June {
 +
            display: none;
 +
        }
 +
 
 +
        #notebook_July {
 +
            display: none;
 +
        }
 +
 
 +
        #notebook_August {
 +
            display: none;
 +
        }
 +
 
 +
        #notebook_September {
 +
            display: none;
 +
        }
 +
 
 +
        #notebook_October {
 +
            display: none;
 +
        }
 +
 
 +
        .notebook_information {
 +
            float: left;
 +
            margin-left: 300px;
 +
            margin-top: 100px;
 +
        }
 +
 
 +
        .notebook_week {
 +
            margin-top: 25px;
 +
        }
 +
 
 +
        .notebook_week_p {
 +
            text-align: left;
 +
            font-size: 20px;
 +
            text-indent: 2em;
 +
            margin-top: 30px;
 +
            line-height: 1.5;
 +
        }
 +
        .notebook_week img{
 +
            margin-top: 30px;
 +
        }
 +
 
 +
        .notebook_information_word1 {
 +
            margin-top: 40px;
 +
            display: none;
 +
        }
 +
 
 +
        .notebook_information_button1 {
 +
 
 +
            color: #ffffff;
 +
            background: #4e72b8;
 +
            width: 80px;
 +
            height: 40px;
 +
            border: 0px;
 +
            cursor: pointer;
 +
            border-radius: 10px;
 +
            font-size: 18px;
 +
            outline: none;
 +
            margin-top: 30px;
 +
        }
 +
 
 +
        .notebook_information_button2 {
 +
            margin-top: 50px;
 +
            color: #ffffff;
 +
            background: #4e72b8;
 +
            width: 80px;
 +
            height: 40px;
 +
            border: 0px;
 +
            cursor: pointer;
 +
            border-radius: 10px;
 +
            font-size: 18px;
 +
            outline: none;
 +
        }
 +
 
 +
        .notebook_information_word2 {
 +
            margin-top: 40px;
 +
            display: none;
 +
        }
 +
 
 +
        .notebook_information_button3 {
 +
            margin-top: 50px;
 +
            color: #ffffff;
 +
            background: #4e72b8;
 +
            width: 80px;
 +
            height: 40px;
 +
            border: 0px;
 +
            cursor: pointer;
 +
            border-radius: 10px;
 +
            font-size: 18px;
 +
            outline: none;
 +
        }
 +
 
 +
        .notebook_information_word3 {
 +
            margin-top: 40px;
 +
            display: none;
 +
        }
 +
 
 +
        .notebook_information_button4 {
 +
            margin-top: 50px;
 +
            color: #ffffff;
 +
            background: #4e72b8;
 +
            width: 80px;
 +
            height: 40px;
 +
            border: 0px;
 +
            cursor: pointer;
 +
            border-radius: 10px;
 +
            font-size: 18px;
 +
            outline: none;
 +
        }
 +
 
 +
        .notebook_information_word4 {
 +
            margin-top: 40px;
 +
            display: none;
 +
        }
 +
 
 +
        .notebook_Month_head {
 +
            margin-top: -10px;
 +
            font-size: 25px;
 +
        }
 +
    </style>
 +
</head>
 +
 
 +
<body>
 +
    <div class="nav">
 +
        <div class="logo">
 +
            <img class="logo_picture" src="https://static.igem.org/mediawiki/2018/f/f7/T--TJU_China--TJU_China.png">
 +
        </div>
 +
        <ul style="margin-left:80px;" class="main">
 +
            <li>
 +
                <div class="nav_logo_pic" style="width:24px;height:24px;margin-top:13px;">
 +
                    <img src="https://static.igem.org/mediawiki/2018/3/37/T--TJU_China--home.png">
 +
                </div>
 +
                <a href="https://2018.igem.org/Team:TJU_China">Home</a>
 +
            </li>
 +
            <li>
 +
                <div class="nav_logo_pic">
 +
                    <img src="https://static.igem.org/mediawiki/2018/9/91/T--TJU_China--project.png">
 +
                </div>
 +
                <a href="https://2018.igem.org/Team:TJU_China/Description">
 +
                    Project
 +
                </a>
 +
                <ul class="drop menu1">
 +
                    <li>
 +
                        <a href="https://2018.igem.org/Team:TJU_China/Description">Description</a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="https://2018.igem.org/Team:TJU_China/Experiments">Experiments</a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="https://2018.igem.org/Team:TJU_China/Notebook">Notebook</a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="https://2018.igem.org/Team:TJU_China/Demonstrate">Demonstrate</a>
 +
                    </li>
 +
                </ul>
 +
 
 +
            </li>
 +
            <li>
 +
 
 +
                <div class="nav_logo_pic">
 +
                    <img src="https://static.igem.org/mediawiki/2018/0/0b/T--TJU_China--parts.png">
 +
                </div>
 +
                <a href="https://2018.igem.org/Team:TJU_China/Parts">
 +
                    Parts
 +
                </a>
 +
                <ul class="drop menu2">
 +
                    <li>
 +
                        <a href="https://2018.igem.org/Team:TJU_China/Parts#Parts_Overview">Parts Overview</a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="https://2018.igem.org/Team:TJU_China/Parts#Basic">Basic</a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="https://2018.igem.org/Team:TJU_China/Parts#Composite">Composite</a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="https://2018.igem.org/Team:TJU_China/Parts#Collection">Collection</a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="https://2018.igem.org/Team:TJU_China/Parts#Improve">Improve</a>
 +
                    </li>
 +
                </ul>
 +
            </li>
 +
            <li>
 +
                <div class="nav_logo_pic">
 +
                    <img src="https://static.igem.org/mediawiki/2018/5/57/T--TJU_China--drylab.png">
 +
                </div>
 +
                <a href="https://2018.igem.org/Team:TJU_China/Model">Model</a>
 +
            </li>
 +
            <li>
 +
                <div class="nav_logo_pic">
 +
                    <img src="https://static.igem.org/mediawiki/2018/e/ea/T--TJU_China--hp.png">
 +
                </div>
 +
                <a href="https://2018.igem.org/Team:TJU_China/Human_Practices">
 +
                    HP
 +
                </a>
 +
                <ul class="drop menu3">
 +
                    <li>
 +
                        <a href="https://2018.igem.org/Team:TJU_China/Human_Practices">Human Practices</a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="https://2018.igem.org/Team:TJU_China/Public_Engagement">Public Engagement</a>
 +
                    </li>
 +
                </ul>
 +
            </li>
 +
            <li>
 +
                <div class="nav_logo_pic">
 +
                    <img src="https://static.igem.org/mediawiki/2018/0/01/T--TJU_China--team.png">
 +
                </div>
 +
                <a href="https://2018.igem.org/Team:TJU_China/Team">
 +
                    Team
 +
                </a>
 +
                <ul class="drop menu7">
 +
                    <li style="list-style-type: none;">
 +
                        <a href="https://2018.igem.org/Team:TJU_China/Team">Members</a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="https://2018.igem.org/Team:TJU_China/Collaborations">Collaboration</a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="https://2018.igem.org/Team:TJU_China/Attributions">Attributions</a>
 +
                    </li>
 +
                </ul>
 +
            </li>
 +
 
 +
        </ul>
 +
 
 +
    </div>
 +
    <div style=" margin-top:28px;z-index:10; border-top: solid #4e72b8 2px;width: 100%; position: fixed;"></div>
 +
    <div class="notebook_month">
 +
        <div class="notebook_month_p">Mar.</div>
 +
        <div class="notebook_month_p">Apr.</div>
 +
        <div class="notebook_month_p">May</div>
 +
        <div class="notebook_month_p">Jun.</div>
 +
        <div class="notebook_month_p">Jul.</div>
 +
        <div class="notebook_month_p">Aug.</div>
 +
        <div class="notebook_month_p">Sep.</div>
 +
        <div class="notebook_month_p">Oct.</div>
 +
    </div>
 +
    <div class="notebook_timeline">
 +
    </div>
 +
    <div class="notebook_button_list">
 +
        <button class="notebook_button1" id="notebook_btn1"></button>
 +
        <button class="notebook_button2" id="notebook_btn2"></button>
 +
        <button class="notebook_button3" id="notebook_btn3"></button>
 +
        <button class="notebook_button4" id="notebook_btn4"></button>
 +
        <button class="notebook_button5" id="notebook_btn5"></button>
 +
        <button class="notebook_button6" id="notebook_btn6"></button>
 +
        <button class="notebook_button7" id="notebook_btn7"></button>
 +
        <button class="notebook_button8" id="notebook_btn8"></button>
 +
    </div>
 +
    class="notebook_week_p"
 +
    <div class="notebook_information">
 +
        <div id="notebook_March">
 +
            <div class="notebook_Month_head">March</div>
 +
            <div class="notebook_week_p">Group1 get started at July.</div>
 +
           
 +
        </div>
 +
        <div id="notebook_April">
 +
            <div class="notebook_Month_head">April</div>
 +
            <div class="notebook_week_p">Group1 get started at July.</div>
 +
           
 +
        </div>
 +
        <div id="notebook_May">
 +
            <div class="notebook_Month_head">May</div>
 +
            <div class="notebook_week_p">Group1 get started at July.</div>
 +
           
 +
        </div>
 +
        <div id="notebook_June">
 +
            <div class="notebook_Month_head">June</div>
 +
            <div class="notebook_week_p">Group1 get started at July.</div>
 +
           
 +
        </div>
 +
        <div id="notebook_July">
 +
            <div class="notebook_Month_head">July</div>
 +
            <div class="notebook_week">
 +
                <div>
 +
                    <button id="7week2" class="notebook_information_button2">week2</button>
 +
                </div>
 +
                <div id="7notebook_week2" class="notebook_information_word2" style="display:none;">
 +
                    <div class="notebook_week_p">Activate smURFP glycerol.</div>
 +
                    <img src="https://static.igem.org/mediawiki/2018/8/88/T--TJU_China--g1.1.png">
 +
                    <div class="notebook_week_p">
 +
                        <b>Figure 1.</b> Incubate to activate the smURFP plasmid PCR amplification of smURFP fragments.</div>
 +
                    <img src="https://static.igem.org/mediawiki/2018/6/67/T--TJU_China--g1.2.png">
 +
                    <div class="notebook_week_p">
 +
                        <b>Figure 2.</b> The result of nucleic acid gel electrophoresis of smURFP after PCR. Lane M, Marker.
 +
                        Lane1-8,smURFP.
 +
                        <br>Gel Extraction purification of the PCR product.
 +
                        <br>Find the arsenic ion plasmid inside the box and transform the plasmid into E.coli DH5α.</div>
 +
                </div>
 +
 
 +
 
 +
                <div>
 +
                    <button id="7week3" class="notebook_information_button3">week3</button>
 +
                </div>
 +
                <div id="7notebook_week3" class="notebook_information_word3" style="display:none;">
 +
                    <div class="notebook_week_p">Transform the plasmid(Bba-J33201) inside the box.
 +
                        <br>Amplification of PCR fragments.
 +
                        <br>PCR amplification of arsenic ion loop.</div>
 +
                    <img src="https://static.igem.org/mediawiki/2018/2/2b/T--TJU_China--g1.3.png">
 +
                    <div class="notebook_week_p">
 +
                        <b>Figure 3.</b> The result of nucleic acid gel electrophoresis of Bba-J33201 after PCR. Lane M, Marker.
 +
                        Lane 1-6,BBa-J33201.</div>
 +
                    <div class="notebook_week_p">PCR amplification of ArsR promoter and ArsR protein fragment.
 +
                        <br>Transform plasmid pKM586 into E.coli BL21.
 +
                        <br>Activate and extract pKM586 plasmid.</div>
 +
                </div>
 +
 
 +
                <div>
 +
                    <button id="7week4" class="notebook_information_button4">week4</button>
 +
                </div>
 +
                <div id="7notebook_week4" class="notebook_information_word4" style="display:none;">
 +
                    <div class="notebook_week_p">Activate smURFP glycerol.</div>
 +
                    <img src="https://static.igem.org/mediawiki/2018/7/74/T--TJU_China--g1.4.png">
 +
                    <div class="notebook_week_p">
 +
                        <b>Figure 4.</b> The result of nucleic acid gel electrophoresis after overlapping of ArsR Promoter and
 +
                        smURFP. Lane M, Marker. Lane 1-10, ArsR Promoter+smURFP</div>
 +
                </div>
 +
 
 +
            </div>
 +
 
 +
        </div>
 +
 
 +
        <div id="notebook_August">
 +
            <div class="notebook_Month_head">August</div>
 +
            <div class="notebook_week">
 +
                <div>
 +
                    <button id="8week1" class="notebook_information_button1">week1</button>
 +
                </div>
 +
                <div id="8notebook_week1" class="notebook_information_word1" style="display:none;">
 +
                    <div class="notebook_week_p">Double digestion of pKM586 plasmid.</div>
 +
                    <img src="https://static.igem.org/mediawiki/2018/7/74/T--TJU_China--g1.5.png">
 +
                    <div class="notebook_week_p">
 +
                        <b>Figure 5.</b> Double digestion of pKM586 with AatII and BamHI. Lane M, Marker. Lane 1,pKM586; Lane
 +
                        2-3, plasmid pKM586 after double enzyme digestion
 +
 
 +
                        <br>Overlap ArsR + Arsr Promoter,but failed.
 +
 
 +
                        <br>Overlap ArsR Promoter + smURFP, failed.
 +
                        <br>Enzyme digestion of pwj66.</div>
 +
                </div>
 +
 
 +
 
 +
                <div>
 +
                    <button id="8week2" class="notebook_information_button2">week2</button>
 +
                </div>
 +
                <div id="8notebook_week2" class="notebook_information_word2" style="display:none;">
 +
                    <div class="notebook_week_p">Enzyme digestion of pwj66.
 +
                        <br>Connect pwj66+ TARGETDNA.
 +
                        <br>Double digestion of pKM586.
 +
                        <br>Overlap ArsR + Arsr Promoter.
 +
                        <br>Overlap ArsR Promoter + smURFP.
 +
                        <br>PCR of ParsR promoter ArsR protein fragment.</div>
 +
                    <img src="https://static.igem.org/mediawiki/2018/1/13/T--TJU_China--g1.6.png">
 +
                    <div class="notebook_week_p">
 +
                        <b>Figure 6.</b>LB media of pKM586 after transformed</div>
 +
                </div>
 +
 
 +
 
 +
                <div>
 +
                    <button id="8week3" class="notebook_information_button3">week3</button>
 +
                </div>
 +
                <div id="8notebook_week3" class="notebook_information_word3" style="display:none;">
 +
                    <div class="notebook_week_p">Enzyme digestion of pwj66.
 +
                        <br>Connect pwj66+ spacer.
 +
                        <br>Double digestion pkm586.
 +
                        <br>Overlap ArsR + Arsr Promoter.
 +
                        <br>Overlap ArsR Promoter + smURFP.</div>
 +
                    <img src="https://static.igem.org/mediawiki/2018/6/64/T--TJU_China--g1.7.png">
 +
                    <div class="notebook_week_p">
 +
                        <b>Figure 7.</b>The result of nucleic acid gel electrophoresis after overlapping of ArsR Promoter and
 +
                        smURFP. Lane M, Marker. Lane 1-7, ArsR Promoter+smURFP. PCR of ParsR promoter ArsR protein fragment.</div>
 +
                </div>
 +
                <div>
 +
                    <button id="8week4" class="notebook_information_button4">week4</button>
 +
                </div>
 +
                <div id="8notebook_week4" class="notebook_information_word4" style="display:none;">
 +
                    <div class="notebook_week_p">Anneal two J23104 oligo chains.
 +
                        <br>PCR amplification of Bba-J23104 fragments. .
 +
                        <br>Overlap J23104 + ArsR protein fragment.
 +
                        <br>Overlap smURFP + ArsR promoter.</div>
 +
                    <img src="https://static.igem.org/mediawiki/2018/9/92/T--TJU_China--g1.8.png">
 +
                    <div class="notebook_week_p">
 +
                        <b>Figure 8.</b> The result of nucleic acid gel electrophoresis after overlapping of ArsR Promoter and
 +
                        smURFP. Lane M, Marker. Lane 1, smURFP. Lane 2-4, ArsR Promoter+smURFP.</div>
 +
                    <div class="notebook_week_p">Overlapping the two overlapped fragments.
 +
                        <br>Gel Extraction purification.
 +
                        <br>Double enzyme digestion of the entire arsenic loop.
 +
                        <br>Double digestion of pKM586.</div>
 +
                    <img src="https://static.igem.org/mediawiki/2018/4/47/T--TJU_China--g1.9.png">
 +
                    <div class="notebook_week_p">
 +
                        <b>Figure 9.</b>Double digestion of pKM586 with AatII and BamHI. Lane M, Marker. Lane 1,Plasmid pKM586.
 +
                        Lane 2, Plasmid pKM586 after double enzyme digestion
 +
                        <br>Connection the two fragments after enzyme digestion
 +
                        <br>Transform the product into E.coli DH5α</div>
 +
                </div>
 +
 
 +
            </div>
 +
        </div>
 +
        <div id="notebook_September">
 +
            <div class="notebook_Month_head">September</div>
 +
            <div class="notebook_week">
 +
                <div>
 +
                    <button id="9week1" class="notebook_information_button1">week1</button>
 +
                </div>
 +
                <div id="9notebook_week1" class="notebook_information_word1" style="display:none;">
 +
                    <div class="notebook_week_p">We did a full fragment overlap of the arsenic loop and the result failed. Double digestion of pKM586
 +
                        vector, plasmid extraction results and double enzyme digestion results are not ideal</div>
 +
                    <img src="https://static.igem.org/mediawiki/2018/3/3e/T--TJU_China--g1.10.png">
 +
                    <div class="notebook_week_p">
 +
                        <b>Figure 10.</b>Double digestion of pKM586 with AatII and BamHI. Lane M, Marker. Lane 1, pKM586; Lane
 +
                        2-3, plasmid pKM586 after double enzyme digestion</div>
 +
                </div>
 +
                <div>
 +
                    <button id="9week2" class="notebook_information_button2">week2</button>
 +
                </div>
 +
                <div id="9notebook_week2" class="notebook_information_word2" style="display:none;">
 +
                    <div class="notebook_week_p">We modified the arsenic loop full-segment overlap system and the PCR program, and the results were successful.</div>
 +
                    <img src="https://static.igem.org/mediawiki/2018/7/79/T--TJU_China--g1.11.png">
 +
                    <div class="notebook_week_p">
 +
                        <b>Figure 11.</b>The result of nucleic acid gel electrophoresis after overlapping the whole arsenic
 +
                        loop. Lane M, Marker. Lane1-7 the whole arsenic loop.</div>
 +
                    <div class="notebook_week_p">Reconstruction of pKM586 original plasmid, the quality of plasmid extraction is not high</div>
 +
                </div>
 +
                <div>
 +
                    <button id="9week3" class="notebook_information_button3">week3</button>
 +
                </div>
 +
                <div id="9notebook_week3" class="notebook_information_word3" style="display:none;">
 +
                    <div class="notebook_week_p">Try pKM586 step-by-step double enzyme digestion pre-experiment, resulting in significant improvement
 +
                        in cutting efficiency. The arsenic loop complete fragment double digestion and pKM586 double digestion
 +
                        product gel recovery, as well as ligation transformation.</div>
 +
                    <img src="https://static.igem.org/mediawiki/2018/8/83/T--TJU_China--g1.12.png">
 +
                    <div class="notebook_week_p">
 +
                        <b>Figure 12.</b>the arsenic loop after transformed into DH5α</div>
 +
                </div>
 +
                <div>
 +
                    <button id="9week4" class="notebook_information_button4">week4</button>
 +
                </div>
 +
                <div id="9notebook_week4" class="notebook_information_word4" style="display:none;">
 +
                    <div class="notebook_week_p">The plasmid was extracted and verified by double enzyme digestion. The result was successful.</div>
 +
                    <img src="https://static.igem.org/mediawiki/2018/f/f0/T--TJU_China--g1.13.png">
 +
                    <div class="notebook_week_p">
 +
                        <b>Figure 13.</b>Double digestion to verify the ligation product. Lane M, Marker. Lane 1, Plasmid pKM586.
 +
                        Lane 2, Plasmid pKM586 single digestion with BamHI. Lane 3, Plasmid pKM586 double digestion with
 +
                        AatII and BamHI. Lane 4, Plasmid ArS. Lane 5, Plasmid ArS single digestion with BamHI. Lane 6, Plasmid
 +
                        ArS double gigestion with AatII and BamHI. Lane 7, Plasmid ArS. Lane 8, Plasmid ArS single digestion
 +
                        with BamHI. Lane 9, Plasmid ArS double digestion with AatII and BamHI.</div>
 +
                </div>
 +
 
 +
            </div>
 +
        </div>
 +
        <div id="notebook_October">
 +
            <div class="notebook_Month_head">October</div>
 +
            <div class="notebook_week">
 +
                <div>
 +
                    <button id="10week1" class="notebook_information_button1">week1</button>
 +
                </div>
 +
                <div id="10notebook_week1" class="notebook_information_word1" style="display:none;">
 +
                    <div class="notebook_week_p">Transform the successfully constructed plasmid into E. coli BL21, pick a single colony, incubate the
 +
                        tube for the first arsenic ion delivery experiment, but the result shows no fluorescence.</div>
 +
                    <img src="https://static.igem.org/mediawiki/2018/9/94/T--TJU_China--g1.14.png">
 +
                    <div class="notebook_week_p">
 +
                        <b>Figure 14.</b>the arsenic loop after transformed into BL21</div>
 +
                </div>
 +
                <div>
 +
                    <button id="10week2" class="notebook_information_button2">week2</button>
 +
                </div>
 +
                <div id="10notebook_week2" class="notebook_information_word2" style="display:none;">
 +
                    <div class="notebook_week_p">After the successful construction of the plasmid, we began to try to test whether the transformed E.
 +
                        coli can express fluorescence after adding arsenic ions. We chose to culture the tube for 6 hours
 +
                        and then add different concentrations of arsenic ions for detection. For the second time, we failed
 +
                        again.
 +
                        <br>And we continue to try to change the condition to make it express fluorescence.</div>
 +
                </div>
 +
 
 +
            </div>
 +
        </div>
 +
 
 +
 
 +
 
 +
    </div>
 +
 
 +
 
 +
    <script>
 +
 
 +
        window.onload = function () {
 +
            var notebookMonthDivArray = [];
 +
            var monthString = ['March', 'April', 'May', 'June', 'July', 'August', 'September', 'October'];
 +
            for (var i = 0; i < 8; ++i) {
 +
                notebookMonthDivArray[i] = this.document.getElementById('notebook_' + monthString[i]);
 +
            }
 +
 
 +
 
 +
            var notebookMonthButtonArray = [];
 +
            for (var i = 0; i < 8; ++i) {
 +
                notebookMonthButtonArray[i] = this.document.getElementById('notebook_btn' + (i + 1));
 +
            }
 +
 
 +
            function all_div_none() {
 +
                for (var i = 0; i < 8; ++i) {
 +
                    notebookMonthDivArray[i].style.display = 'none';
 +
                }
 +
            }
 +
 
 +
            for (var i = 0; i < 8; ++i) {
 +
                (function (i) {
 +
                    notebookMonthButtonArray[i].onclick = function () {
 +
                        all_div_none();
 +
                        notebookMonthDivArray[i].style.display = 'block';
 +
                    }
 +
                })(i);
 +
            }
 +
            //点击隐藏显示
 +
            function notebook_display(week, notebookweek) {
 +
                var p = document.getElementById(week);
 +
                var w = document.getElementById(notebookweek);
 +
                p.onclick = function () {
 +
                    if (w.style.display == 'none') {
 +
                        w.style.display = 'block';
 +
                    }
 +
                    else {
 +
                        w.style.display = 'none';
 +
                    }
 +
                }
 +
            }
 +
 
 +
 
 +
 
 +
            notebook_display('7week2', '7notebook_week2');
 +
            notebook_display('7week3', '7notebook_week3');
 +
            notebook_display('7week4', '7notebook_week4');
 +
 
 +
            notebook_display('8week1', '8notebook_week1');
 +
            notebook_display('8week2', '8notebook_week2');
 +
            notebook_display('8week3', '8notebook_week3');
 +
            notebook_display('8week4', '8notebook_week4');
 +
 
 +
            notebook_display('9week1', '9notebook_week1');
 +
            notebook_display('9week2', '9notebook_week2');
 +
            notebook_display('9week3', '9notebook_week3');
 +
            notebook_display('9week4', '9notebook_week4');
 +
 
 +
            notebook_display('10week1', '10notebook_week1');
 +
            notebook_display('10week2', '10notebook_week2');
 +
            notebook_display('10week3', '10notebook_week3');
 +
            notebook_display('10week4', '10notebook_week4');
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
        }
 +
    </script>
 +
</body>
 +
<!--
 +
                    <div class="notebook_week_p"></div>
 +
                    <img src="">
 +
                    <div class="notebook_week_p"><b>Figure .</b></div>       
 
      
 
      
}
+
 
.notebook_button_list button:hover{
+
-->
    background: -webkit-linear-gradient(left, #005757 , #8600FF); /* Safari 5.1 - 6.0 */
+
 
    background: -o-linear-gradient(right, #005757, #8600FF); /* Opera 11.1 - 12.0 */
+
</html>
    background: -moz-linear-gradient(right, #005757, #8600FF); /* Firefox 3.6 - 15 */
+
    background: linear-gradient(to right, #005757 , #8600FF); /* 标准的语法(必须放在最后) */
+
}
+
.notebook_button1{
+
    outline: none;
+
    position: relative;
+
    left: 58px;
+
    top:63px;
+
}
+
.notebook_button2{
+
    outline: none;
+
    position: relative;
+
    left: 28px;
+
    top:138px;
+
}
+
.notebook_button3{
+
    outline: none;
+
    position: relative;
+
    left: -2px;
+
    top:213px;
+
}
+
.notebook_button4{
+
    outline: none;
+
    position: relative;
+
    left: -32px;
+
    top:290px;
+
}
+
.notebook_button5{
+
    outline: none;
+
    position: relative;
+
    left: -62px;
+
    top:365px;
+
}
+
.notebook_button6{
+
    outline: none;
+
    position: relative;
+
    left: -92px;
+
    top:440px;
+
}
+
.notebook_button7{
+
    outline: none;
+
    position: relative;
+
    left: -122px;
+
    top:518px;
+
}
+
.notebook_button8{
+
    outline: none;
+
    position: relative;
+
    left: -152px;
+
    top:593px;
+
}
+
#notebook_March{
+
    display: block;
+
}
+
#notebook_April{
+
    display: none;
+
}
+
#notebook_May{
+
    display: none;
+
}
+
#notebook_June{
+
    display: none;
+
}
+
#notebook_July{
+
    display: none;
+
}
+
#notebook_August{
+
    display: none;
+
}
+
#notebook_September{
+
    display: none;
+
}
+
#notebook_October{
+
    display: none;
+
}
+
.notebook_information{
+
    float: left;
+
    margin-left: 300px;
+
    margin-top: 100px;
+
}
+
.notebook_week{
+
    margin-top: 50px;
+
}
+
.notebook_week p{
+
    text-align: left;
+
    font-size: 20px;
+
    text-indent: 2em;
+
}
+
.notebook_information_word1{
+
    margin-top: 40px;
+
    display: none;
+
}
+
.notebook_information_button1{
+
   
+
    color: #ffffff;
+
    background: #4e72b8;
+
    width: 80px;
+
    height: 40px;
+
    border: 0px;
+
    cursor: pointer;
+
    border-radius: 10px;
+
    font-size: 18px;
+
    outline: none;
+
}
+
.notebook_information_button2{
+
    margin-top: 80px;
+
    color: #ffffff;
+
    background: #4e72b8;
+
    width: 80px;
+
    height: 40px;
+
    border: 0px;
+
    cursor: pointer;
+
    border-radius: 10px;
+
    font-size: 18px;
+
    outline: none;
+
}
+
.notebook_information_word2{
+
    margin-top: 40px;
+
    display: none;
+
}
+
.notebook_information_button3{
+
    margin-top: 80px;
+
    color: #ffffff;
+
    background: #4e72b8;
+
    width: 80px;
+
    height: 40px;
+
    border: 0px;
+
    cursor: pointer;
+
    border-radius: 10px;
+
    font-size: 18px;
+
    outline: none;
+
}
+
.notebook_information_word3{
+
    margin-top: 40px;
+
    display: none;
+
}
+
.notebook_information_button4{
+
    margin-top: 80px;
+
    color: #ffffff;
+
    background: #4e72b8;
+
    width: 80px;
+
    height: 40px;
+
    border: 0px;
+
    cursor: pointer;
+
    border-radius: 10px;
+
    font-size: 18px;
+
    outline: none;
+
}
+
.notebook_information_word4{
+
    margin-top: 40px;
+
    display: none;
+
}
+
.notebook_Month_head{
+
    margin-top: 50px;
+
}
+

Latest revision as of 12:11, 17 October 2018

<!DOCTYPE >

Mar.
Apr.
May
Jun.
Jul.
Aug.
Sep.
Oct.
class="notebook_week_p"
March
Group1 get started at July.
April
Group1 get started at July.
May
Group1 get started at July.
June
Group1 get started at July.
July
August
September
October