(Prototype team page) |
|||
(25 intermediate revisions by 6 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; | ||
+ | } | ||
− | + | #HQ_page p { | |
− | + | margin: 0 !important; | |
+ | } | ||
− | + | #content { | |
− | + | padding: 0px; | |
− | + | width: 100%; | |
+ | margin-top: 0px; | ||
+ | margin-left: 0px; | ||
+ | } | ||
− | + | #bodyContent h1, | |
+ | #bodyContent h2, | ||
+ | #bodyContent h3, | ||
+ | #bodyContent h4, | ||
+ | #bodyContent h5 { | ||
+ | margin-bottom: 0px; | ||
+ | } | ||
+ | #team_name { | ||
+ | display: none | ||
+ | } | ||
+ | .global_wrapper { | ||
+ | padding: 0px 0px 0px 0px; | ||
+ | } | ||
− | + | #top_menu_14 { | |
− | + | height: 16px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | * { | |
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | list-style: none; | ||
+ | list-style-type: none; | ||
+ | text-decoration: none !important; | ||
+ | } | ||
− | + | body { | |
− | + | margin: 0; | |
− | + | padding: 0; | |
− | + | background-color: #F3F3F3; | |
− | + | font-size: 16px; | |
− | + | font-family: Arial, Verdana, Sans-serif; | |
− | + | letter-spacing: 0; | |
− | + | color: #FFFFFF; | |
− | + | } | |
− | + | ||
+ | .daohang { | ||
+ | background-color: #323643; | ||
+ | position: relative; | ||
+ | color: #ffffff; | ||
+ | height: 64px; | ||
+ | top: -2px; | ||
+ | } | ||
− | + | .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: 900px) { | ||
+ | |||
+ | .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: 200px; | ||
+ | /* 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 { | ||
+ | line-height: 55px; | ||
+ | font-weight: bold; | ||
+ | height:auto; | ||
+ | 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; | ||
+ | height:auto; | ||
+ | /* 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; | ||
+ | height:auto; | ||
+ | /* font-weight: bold; */ | ||
+ | font-family: 'Product Sans', sans-serif; | ||
+ | font-size: 24px; | ||
+ | color: #484848; | ||
+ | /* margin-bottom: 20px; */ | ||
+ | } | ||
+ | |||
+ | table { | ||
+ | color: #3B3B3B; | ||
+ | } | ||
+ | |||
+ | .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> | ||
+ | |||
+ | |||
+ | </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 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">Material</div> | ||
+ | |||
+ | <div class="h2"><b>1. </b>Bacteria Strains used in this work</div> | ||
+ | <table class="table table-bordered table-hover"> | ||
+ | <thead> | ||
+ | <tr> | ||
+ | <th>Strain</th> | ||
+ | <th>Description</th> | ||
+ | <th>Usage</th> | ||
+ | <th>Sourse</th> | ||
+ | </tr> | ||
+ | </thead> | ||
+ | <tbody> | ||
+ | <tr> | ||
+ | <td><i>E.coli</i> trans-5α</td> | ||
+ | <td class="success">Basic strain of calcium conversion</td> | ||
+ | <td class="success">Plasmid construction, molecular cloning</td> | ||
+ | <td class="success">Purchase by Shanghai Weidi Biotechnology</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td><i>E.coli</i> MG1655</td> | ||
+ | <td class="success">Type strain</td> | ||
+ | <td class="success">Phenotypic validation</td> | ||
+ | <td class="success">Provide by Dr. Chenli Liu (SIAT CSynBER) </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td><i>S.</i> typhimurium SL1344</td> | ||
+ | <td class="success">Type strain</td> | ||
+ | <td class="success">Phenotypic validation</td> | ||
+ | <td class="success">Provide by Dr. Shan Li (Bio-Medical Center of HZAU)</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td><i>S.</i> typhimurium SL1344 (<i>ΔsifA</i>)</td> | ||
+ | <td class="success">Decrease toxicity and infectivity</td> | ||
+ | <td class="success">Phenotypic validation</td> | ||
+ | <td class="success">This work</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td><i>S.</i> typhimurium SL1344 (<i>ΔsipD</i>)</td> | ||
+ | <td class="success">Knockout Type III secretion system</td> | ||
+ | <td class="success">Phenotypic validation</td> | ||
+ | <td class="success">This work</td> | ||
+ | </tr> | ||
+ | |||
+ | </tbody> | ||
+ | </table> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <div class="h2"><b>2. </b>Culture Condition</div> | ||
+ | <table class="table table-bordered table-hover"> | ||
+ | <thead> | ||
+ | <tr> | ||
+ | <td>Culture medium</td> | ||
+ | <td>Compositions</td> | ||
+ | </tr> | ||
+ | |||
+ | </thead> | ||
+ | <tbody> | ||
+ | <tr> | ||
+ | <td>Luria Broth (LB)</td> | ||
+ | <td>0.5% yeast extraction,1% NaCl and 1% tryptone (add 15 g/L agar when prepare solid | ||
+ | culture)</td> | ||
+ | |||
+ | </tr> | ||
+ | <tr> | ||
+ | <td>Super Optimal Broth (SOB)</td> | ||
+ | <td>0.5% yeast extraction, 0.05% NaCl and 2% tryptone (add 15 g/L agar when prepare solid | ||
+ | culture) (add 5ml 2 mol/L MgCl<sub>2</sub> before use)</td> | ||
+ | </tr> | ||
+ | </tbody> | ||
+ | </table> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <div id="float02"> | ||
+ | <div class="h1">Method</div> | ||
+ | <div class="h2"><b>1. </b>Plasmid construction</div> | ||
+ | <p>Our fragments was PCR amplified with KOD (TOYOBO<sup>®</sup>) or PrimeSTAR (Takara<sup>®</sup>) | ||
+ | according to product length. <br><br> | ||
+ | Product is recycled with gel extraction kit from OMEGA<sup>®</sup> after electrophoresis. <br><br> | ||
+ | ClonExpress<sup>®</sup> II One Step Cloning Kit (Vyzyme) was used to ligate every fragment to | ||
+ | construct the most plasmids. <br><br> | ||
+ | All plasmid constructs were confirmed by sequencing at Sangon<sup>®</sup>, Inc. (Wuhan,China).<br><br> | ||
+ | A single frozen glycerol stock was used throughout this study for each bacterial strain.<br><br> | ||
+ | </p> | ||
+ | |||
+ | <div class="h2"><b>2. </b>Transformation</div> | ||
+ | <p> | ||
+ | 1. Add 3-5μl plasmid to 50μl F-trans5α (Weidi Biotechnology) competent cells and incubate 5min in ice | ||
+ | , coated plates, select monoclonal colony PCR. Add extra 42℃ heat shock 45s and incubate 10min step | ||
+ | will increase transformation efficiency. | ||
+ | Or 1.5kv, 4-5ms electroporate cell with 300-400 ng purified plasmid. Recover at 37°C 950 rpm for 1h. | ||
+ | <br><br> | ||
+ | 2. Plated on LB agar plates containing appropriate concentration of antibody for selection, grown | ||
+ | overnight at 37°C. And prepare PCR reaction to select individual bacterial colony. | ||
+ | </p> | ||
+ | <div class="h2"><b>3. </b>Fluorescence/growth measurememt</div> | ||
+ | <p> | ||
+ | Cell are cultured overnight in LB broth containing corresponding antibiotics, and diluted to OD is | ||
+ | 0.1 with fresh LB broth.<br><br> | ||
+ | Expression was induced at early log phase by addition of different ATc (150 ng/ml–15μg/ml) | ||
+ | concentrations. Culture the plate in 37℃, 150 rpm. Every hour put it into a plate reader to | ||
+ | measure its fluorescence/OD<sup>1</sup>. | ||
+ | </p> | ||
+ | </div> | ||
+ | |||
+ | <div id="float03"> | ||
+ | <div class="h1">Modeling impact our experiment</div> | ||
+ | <p>The higher ATc level might thwart bacterial growth. So we need to analyze a proper concentration of | ||
+ | ATc, We design a modeling to predict a suitable concentration of ATc (More result about our model | ||
+ | please check <a href="https://2018.igem.org/Team:HZAU-China/Model">modeling: Chemical control model</a>). | ||
+ | We induced our engineered strain with gradients of ATc. Take 100μl culture to plate on LB agar | ||
+ | plates containing appropriate concentration of antibody after 5 minutes, 30 minutes, 90 minutes of | ||
+ | induce and counting Colony Forming Units the next day. The results fit the model within a range of | ||
+ | ATc. So we choose a appropriate concentration of ATc (16μg/ml), aiming to maximize the expression of | ||
+ | GSDMD-N275 and minimize the negative effect of bacteria growth. | ||
+ | </p> | ||
+ | <div class="h1">Reference</div> | ||
+ | <p>1. Becskel, A. & Serrano, L. Engineering stability in gene networks by autoregulation. Nature 405, | ||
+ | 590–593 (2000).</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <!-- 侧边 --> | ||
+ | <div class="cebian"> | ||
+ | <!-- 滚动菜单栏 --> | ||
+ | <div class="daohangyi"> | ||
+ | <span class="biaoti">Experiments</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">Material</p> | ||
+ | <p class="daohanger">Method</p> | ||
+ | <p class="daohanger">Modeling impact our experiment</p> | ||
+ | <a> | ||
+ | <span>Back to Top</span> | ||
+ | </a> | ||
+ | </div> | ||
+ | <a class="daohangyi" href="https://2018.igem.org/Team:HZAU-China/Improve"> | ||
+ | <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> | ||
+ | </a> | ||
+ | <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> | ||
+ | <a class="daohangyi" href="https://2018.igem.org/Team:HZAU-China/Notebook"> | ||
+ | <span class="biaoti">Notebook</span> | ||
+ | <span class="xsjPic"><img src="https://static.igem.org/mediawiki/2018/7/7c/T--HZAU-China--ysj.svg" alt=""></span> | ||
+ | </a> | ||
+ | <!-- 滚动菜单栏 --> | ||
+ | </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 03:57, 18 October 2018
Strain | Description | Usage | Sourse |
---|---|---|---|
E.coli trans-5α | Basic strain of calcium conversion | Plasmid construction, molecular cloning | Purchase by Shanghai Weidi Biotechnology |
E.coli MG1655 | Type strain | Phenotypic validation | Provide by Dr. Chenli Liu (SIAT CSynBER) |
S. typhimurium SL1344 | Type strain | Phenotypic validation | Provide by Dr. Shan Li (Bio-Medical Center of HZAU) |
S. typhimurium SL1344 (ΔsifA) | Decrease toxicity and infectivity | Phenotypic validation | This work |
S. typhimurium SL1344 (ΔsipD) | Knockout Type III secretion system | Phenotypic validation | This work |
Culture medium | Compositions |
Luria Broth (LB) | 0.5% yeast extraction,1% NaCl and 1% tryptone (add 15 g/L agar when prepare solid culture) |
Super Optimal Broth (SOB) | 0.5% yeast extraction, 0.05% NaCl and 2% tryptone (add 15 g/L agar when prepare solid culture) (add 5ml 2 mol/L MgCl2 before use) |
Our fragments was PCR amplified with KOD (TOYOBO®) or PrimeSTAR (Takara®)
according to product length.
Product is recycled with gel extraction kit from OMEGA® after electrophoresis.
ClonExpress® II One Step Cloning Kit (Vyzyme) was used to ligate every fragment to
construct the most plasmids.
All plasmid constructs were confirmed by sequencing at Sangon®, Inc. (Wuhan,China).
A single frozen glycerol stock was used throughout this study for each bacterial strain.
1. Add 3-5μl plasmid to 50μl F-trans5α (Weidi Biotechnology) competent cells and incubate 5min in ice
, coated plates, select monoclonal colony PCR. Add extra 42℃ heat shock 45s and incubate 10min step
will increase transformation efficiency.
Or 1.5kv, 4-5ms electroporate cell with 300-400 ng purified plasmid. Recover at 37°C 950 rpm for 1h.
2. Plated on LB agar plates containing appropriate concentration of antibody for selection, grown
overnight at 37°C. And prepare PCR reaction to select individual bacterial colony.
Cell are cultured overnight in LB broth containing corresponding antibiotics, and diluted to OD is
0.1 with fresh LB broth.
Expression was induced at early log phase by addition of different ATc (150 ng/ml–15μg/ml)
concentrations. Culture the plate in 37℃, 150 rpm. Every hour put it into a plate reader to
measure its fluorescence/OD1.
The higher ATc level might thwart bacterial growth. So we need to analyze a proper concentration of ATc, We design a modeling to predict a suitable concentration of ATc (More result about our model please check modeling: Chemical control model). We induced our engineered strain with gradients of ATc. Take 100μl culture to plate on LB agar plates containing appropriate concentration of antibody after 5 minutes, 30 minutes, 90 minutes of induce and counting Colony Forming Units the next day. The results fit the model within a range of ATc. So we choose a appropriate concentration of ATc (16μg/ml), aiming to maximize the expression of GSDMD-N275 and minimize the negative effect of bacteria growth.
1. Becskel, A. & Serrano, L. Engineering stability in gene networks by autoregulation. Nature 405, 590–593 (2000).