(Prototype team page) |
|||
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; | ||
+ | } | ||
− | <ul> | + | .daohang { |
− | <li><a href="https:// | + | background-color: #323643; |
− | <li><a href="https:// | + | position: relative; |
− | <li><a href="https:// | + | color: #ffffff; |
− | <li><a href="https:// | + | height: 64px; |
− | </ul> | + | top: -2px; |
− | </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: 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 constructe, 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"></td> | ||
+ | <td class="success">This work</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td><i>S. typhimurium</i>> 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. typhimurium</i>> 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. typhimurium</i>> 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> | ||
+ | |||
+ | <div id="float02"> | ||
+ | <div class="h2"><b>2.</b>Culture Condition</div> | ||
+ | <table class="table table-bordered table-hover"> | ||
+ | <thead> | ||
+ | <tr>Culture medium</tr> | ||
+ | <tr>Compositions</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> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <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> | ||
+ | Product is recycled with gel extraction kit from OMEGA<sup>®</sup> after electrophoresis. <br> | ||
+ | ClonExpress<sup>®</sup> II One Step Cloning Kit (Vyzyme) was used to ligate every fragment to construct the most plasmids. <br> | ||
+ | All plasmid constructs were confirmed by sequencing at Sangon<sup>®</sup>, Inc. (Wuhan,China).<br> | ||
+ | A single frozen glycerol stock was used throughout this study for each bacterial strain.<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 950rpm for 1h. <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> | ||
+ | Expression was induced at early log phase by addition of different atc (40–140 ng/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 id="float03"> | ||
+ | <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> | ||
+ | <!-- 侧边 --> | ||
+ | <div class="cebian"> | ||
+ | <!-- 滚动菜单栏 --> | ||
+ | <div class="daohangyi"> | ||
+ | <span class="biaoti">Safety</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">Introduction</p> | ||
+ | <p class="daohanger">Lab Safety</p> | ||
+ | <a> | ||
+ | <span>Back to Top</span> | ||
+ | </a> | ||
+ | </div> | ||
+ | <a class="daohangyi" href="https://2018.igem.org/Team:HZAU-China/Human_Practices"> | ||
+ | <span class="biaoti">Human Practices</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/Public_Engagement"> | ||
+ | <span class="biaoti">Public Engagement</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> |
Revision as of 05:02, 17 October 2018
Strain | Description | Usage | Sourse |
---|---|---|---|
E.coli trans-5α | Basic strain of calcium conversion | plasmid constructe, molecular cloning | Purchase by Shanghai Weidi Biotechnology |
E.coli MG1655 | Type strain | This work | |
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 | >
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.) |