Difference between revisions of "Team:HZAU-China/Public Engagement"
ShuguangWang (Talk | contribs) |
ShuguangWang (Talk | contribs) |
||
| Line 3: | Line 3: | ||
<head> | <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> | |
| − | + | <!-- 折叠框CSS --> | |
| − | + | <style> | |
| − | + | .collapseDiv { | |
| − | + | color: #333; | |
| − | + | border-radius: 4px; | |
| − | + | background-color: #F3F3F3; | |
| − | + | border: 1px solid transparent; | |
| − | + | border-color: #ddd; | |
| − | + | box-shadow: 0 1px 1px #F3F3F3; | |
| − | + | margin-top: 5px; | |
| − | + | margin-bottom: 0; | |
| − | + | } | |
| − | + | .collapseDiv label { | |
| − | + | cursor: pointer; | |
| − | + | font-size: 24px !important; | |
| − | + | /* font-weight: bold; */ | |
| − | + | color: green !important; | |
| − | + | border-color: #F3F3F3 !important; | |
| − | + | padding: 5px 15px 5px 18px !important; | |
| − | + | background-color: #f5f5f5 !important; | |
| − | + | margin: 0 !important; | |
| − | + | border-radius: 5px !important; | |
| − | + | } | |
| − | + | ||
| − | + | #zhedie-toggle1, | |
| − | + | #zhedie-toggle2, | |
| − | + | #zhedie-toggle3, | |
| − | + | #zhedie-toggle4 { | |
| − | + | display: none; | |
| − | + | } | |
| − | + | #zhedie1, | |
| − | + | #zhedie2, | |
| − | + | #zhedie3, | |
| − | + | #zhedie4 { | |
| − | + | display: none; | |
| − | + | font-size: 18px; | |
| − | + | padding: 0 50px 0 50px; | |
| − | + | width: 100%; | |
| − | + | margin: 0; | |
| − | + | color: black; | |
| − | + | } | |
| − | + | #zhedie-toggle1:checked+#zhedie1, | |
| − | + | #zhedie-toggle2:checked+#zhedie2, | |
| − | + | #zhedie-toggle3:checked+#zhedie3, | |
| − | + | #zhedie-toggle4:checked+#zhedie4 { | |
| − | + | display: block; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| + | .collapse_body { | ||
| + | background-color: #fff; | ||
| + | position: relative; | ||
| + | height: 0; | ||
| + | overflow: hidden; | ||
| + | -webkit-transition-timing-function: ease; | ||
| + | -o-transition-timing-function: ease; | ||
| + | transition-timing-function: ease; | ||
| + | -webkit-transition-duration: .35s; | ||
| + | -o-transition-duration: .35s; | ||
| + | transition-duration: .35s; | ||
| + | -webkit-transition-property: height, visibility; | ||
| + | -o-transition-property: height, visibility; | ||
| + | transition-property: height, visibility | ||
| + | } | ||
| + | .collapse_content { | ||
| + | font-size: 20px; | ||
| + | border-top: 1px solid #ddd; | ||
| + | background-color: #fff; | ||
| + | padding: 15px; | ||
| + | } | ||
| + | </style> | ||
</head> | </head> | ||
<body> | <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">N-terminal of Gasdermin D (1-275aa)</div> | ||
| + | <p>Pyroptosis is a form of lytic programmed cell death with inflammation. Recent studies reported that | ||
| + | the N-terminal of Gasdermin D (pore-forming domain) acts as an effector of pyroptosis. Full length | ||
| + | Gasdermin D is cleaved by Caspase 1 then release the PFD (pore-forming domain) which can | ||
| + | oligomerize on the cell membrane. Formation of pores causes cell swelling, rupturing of the | ||
| + | membrane and the massive leakage of cytosolic contents<sup>1</sup>.</p> | ||
| + | <div class="h2">The N-terminal of GSDMD execute the function of pyroptosis in cells</div> | ||
| + | <p>We respectively fused eGFP with GSDMD-N275 and GSDMD FL (full length). Then these plasmids were | ||
| + | transfected into Hela GSDMD KO cell. Microscopy of cells transfecting GSDMD-N275 undergoing | ||
| + | pyroptosis, but GSDMD full length did not induce pyroptosis (Figure 1). We also tested the cell | ||
| + | viability through ATP assay (CellTiter-Glo® Luminescent Cell Viability Assay) and demonstrated that | ||
| + | GSDMD-N275 and mutants of GSDMD FL had different ability to induce pyroptosis (Figure 2).</p> | ||
| + | <div style="width: 40%; margin: 30px auto"> | ||
| + | <img src="https://static.igem.org/mediawiki/2018/3/38/T--HZAU-China--interlab01.png" width=100% alt=""> | ||
| + | </div> | ||
| + | <p>Figure 1. pCS2-eGFP-GSDMD FL（left）, pCS2-eGFP-GSDMD-N275（right） were transfected respectively into | ||
| + | Hela G¬SDMD KO cells. Pyroptotic cells are pointed by red arrow.</p> | ||
| + | <div class="collapseDiv"> | ||
| + | <label for="zhedie-toggle1">Method</label> | ||
| + | <input type="checkbox" id="zhedie-toggle1" /> | ||
| + | <div id="zhedie1" class="text-success text-left"> | ||
| + | <b>Preparation of Cells for transfection</b><br> | ||
| + | 1. Grow Hela GSDMD KO cells in a humidified 37 °C, 5% CO<sub>2</sub> tissue-culture | ||
| + | incubator.<br> | ||
| + | 2. Count the cells using a hemocytometer. Seed in 24-well (5 × 10^4 per well) and grow.<br> | ||
| + | <b>Transfection</b><br> | ||
| + | 1. Dilute 0.5 μg DNA into 50 μl jetPRIME® buffer (supplied). Mix by vortexing.<br> | ||
| + | 2. Add 1 μl jetPRIME®, vortex for 10 s, spin down briefly.<br> | ||
| + | 3. Incubate for 10 min at RT.<br> | ||
| + | 4. Add 50μl of transfection mix per well drop wise onto the cells in serum containing | ||
| + | medium, and distribute evenly.<br> | ||
| + | 5. Gently rock the plates back and forth and from side to side.<br> | ||
| + | 6. If needed, replace transfection medium after 4 h by cell growth medium and return the | ||
| + | plates to the incubator.<br> | ||
| + | Observation is taken after 1.5 h<br><br> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div style="width: 50%; margin: 30px auto"> | ||
| + | <img src="https://static.igem.org/mediawiki/2018/f/f5/T--HZAU-China--basicPart2.png" width=100% alt=""> | ||
| + | </div> | ||
| + | <p>Figure 2. pCS2-Flag-GSDMD FL, pCS2-Flag-GSDMD-N275, pCS2-Flag-GSDMD L290D, pCS2-Flag-GSDMD Y373, | ||
| + | pCS2-Flag-GSDMD A377D were transfected respectively into 293T cells. ATP-based cell viability was | ||
| + | measured (n=6).</p> | ||
| + | <div class="collapseDiv"> | ||
| + | <label for="zhedie-toggle2">Method</label> | ||
| + | <input type="checkbox" id="zhedie-toggle2" /> | ||
| + | <div id="zhedie2" class="text-success text-left"> | ||
| + | <b>Preparation of Cells for Infection</b><br> | ||
| + | 1. Grow Hela GSDMD KO cells in a humidified 37 °C, 5% CO<sub>2</sub> tissue-culture | ||
| + | incubator.<br> | ||
| + | 2. Count the cells using a hemocytometer. Seed in 24-well (9× 10^4 per well) and grow | ||
| + | overnight.<br> | ||
| + | <b>Preparation of Bacteria</b><br> | ||
| + | 1. Grow bacteria overnight 16 h in 2 mL LB in a 15-mL tube. Incubate at 37 °C in a shaking | ||
| + | incubator (200 rpm).<br> | ||
| + | 2. Subculture bacteria by transferring 300 μL of the overnight culture into 5 mL of LB in a | ||
| + | loosely capped 50-mL tube. Incubate at 37 °C in a shaking incubator (200 rpm) to late log | ||
| + | phase.<br> | ||
| + | 3. Pellet 1 mL of the Salmonella subculture by centrifugation at 1000 g in a microfuge for | ||
| + | 2 min at room temperature.<br> | ||
| + | 4. Remove 900 μL of supernatant and gently resuspend the pellet in 900 μL PBS.<br> | ||
| + | <b>Infection</b><br> | ||
| + | 1. Aspirate media and rinse the monolayer twice with PBS.<br> | ||
| + | 2. Inoculate cells with bacteria (MOI = 100) by adding bacteria directly to the | ||
| + | cell-culture supernatant.<br> | ||
| + | 3. Incubate for 3 h at 37 °C in 5% CO<sub>2</sub>.<br> | ||
| + | 4. Aspirate media and rinse the monolayer twice with PBS.<br> | ||
| + | 5. Add fresh GM containing 100 μg/mL gentamicin and incubate at 37 °C in 5% CO<sub>2</sub>.<br> | ||
| + | Observation is taken after 2 h.<br><br> | ||
| − | + | </div> | |
| − | + | </div> | |
| − | + | <div class="h2">The N-terminal of GSDMD lyses bacteria</div> | |
| − | + | <p>Expression of the N terminal of GSDMD fused with eGFP (eGFP-GSDMD-N275) was under the control of P<sub>tet</sub> | |
| − | + | in Δ<i>sifA</i> SL1344. | |
| − | + | The colony-forming unit (CFU) was measured for counting the number of viable bacteria (Figure 3). | |
| − | + | This result shows that eGFP-GSDMD-N275 exhibits cytotoxicity in bacteria.</p> | |
| − | + | <div style="width: 30%; margin: 30px auto"> | |
| − | + | <img src="https://static.igem.org/mediawiki/2018/f/fb/T--HZAU-China--basicPart3.jpg" width=100% alt=""> | |
| − | + | </div> | |
| − | + | <p>Figure 3. In each group, ATc (16μg/ml) was added into medium when bacteria grown to logarithmic | |
| + | phase (OD = 0.6~0.8). Vector refers to bacteria containing a high copy number plasmid which only | ||
| + | expresses TetR under the control of P<sub>tet</sub>. Bacterial colony-forming units (CFU) for | ||
| + | vector and eGFP-GSDMD-N275 are shown in the logarithmic form (log10) (n=3). </p> | ||
| + | <div class="collapseDiv"> | ||
| + | <label for="zhedie-toggle3">Method</label> | ||
| + | <input type="checkbox" id="zhedie-toggle3" /> | ||
| + | <div id="zhedie3" class="text-success text-left"> | ||
| + | 1. Cell are cultured overnight in LB broth containing corresponding antibiotics, and | ||
| + | dilute each 1 volume overnight cultures with 100 volume fresh LB containing antibiotics. | ||
| + | Culture in 37℃ 200 rpm.<br> | ||
| + | 2. When OD reaching to 0.6-0.8, add anhydrotetracycline with final concentration of | ||
| + | μg/ml to induce the expression of EGFP-GSDMD-N275.<br> | ||
| + | 3. Take 100 μl diluted culture to plate on LB agar plates containing appropriate | ||
| + | concentration of antibody after 1.5 hours of induce.<br> | ||
| + | Observation is taken overnight.<br><br> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="h2">The N-terminal of GSDMD from lytic bacteria induce cell pyroptosis.</div> | ||
| + | <p>Expression of the N-terminal of GSDMD fused with eGFP (eGFP-GSDMD-N275) was under the control of Tet | ||
| + | promoter in Δ<i>sifA</i> SL1344. Hela GSDMD KO cell line were infected with ΔsifA SL1344. Inducer | ||
| + | ATc | ||
| + | (16μg/mL) were added after 3 h infection. Microscopy showed that eGFP-GSDMD-N275 located in | ||
| + | cytoplasm after 5 min of induction and trigger pyroptosis after 30 min of induction (Figure 4). | ||
| + | After 1.5 h of induction, Hela GSDMD KO cells undergo second necrosis caused by bacterial infection | ||
| + | without inducer. Morphology of this process is similar to pyroptosis<sup>2</sup>. Thus, these | ||
| + | population of | ||
| + | ruptured cells were counted. There are two folds change between control group and induced group | ||
| + | (Figure 5). So ruptured cells in induced group were triggered pyroptosis by eGFP-GSDMD-N275 but not | ||
| + | by bacterial infection.</p> | ||
| + | <div style="width: 90%; margin: 0 auto"> | ||
| + | <img src="https://static.igem.org/mediawiki/2018/b/b3/T--HZAU-China--basicPart4.png" width=100% alt=""> | ||
| + | </div> | ||
| + | <p>Figure 4. Hela GSDMD KO cell line were infected with ΔsifA SL1344 containing high copy number | ||
| + | plasmids which express eGFP-GSDMD-N275 under the control of ATc. Photos were captured after 5 min | ||
| + | of induction. </p> | ||
| + | <div style="width: 50%; margin: 0 auto"> | ||
| + | <img src="https://static.igem.org/mediawiki/2018/2/22/T--HZAU-China--basicPart5.png" width=100% alt=""> | ||
| + | </div> | ||
| + | <p>Figure 5. Ruptured cells in a field of view were counted.</p> | ||
| + | <div class="collapseDiv"> | ||
| + | <label for="zhedie-toggle4">Method</label> | ||
| + | <input type="checkbox" id="zhedie-toggle4" /> | ||
| + | <div id="zhedie4" class="text-success text-left"> | ||
| + | <b>Preparation of Cells for Infection</b><br> | ||
| + | 1. Grow Hela GSDMD KO cells in a humidified 37 °C, 5% CO<sub>2</sub> tissue-culture | ||
| + | incubator.<br> | ||
| + | 2. Count the cells using a hemocytometer. Seed in 24-well (5 × 10^4 per well) and grow | ||
| + | overnight.<br> | ||
| + | <b>Preparation of Bacteria</b><br> | ||
| + | 1. Grow bacteria overnight 16 h in 2 mL LB in a 15-mL tube. Incubate at 37 °C in a shaking | ||
| + | incubator (200 rpm).<br> | ||
| + | 2. Subculture bacteria by transferring 300 μL of the overnight culture into 5 mL of LB in a | ||
| + | loosely capped 50-mL tube. Incubate at 37 °C in a shaking incubator (200 rpm) to late log | ||
| + | phase.<br> | ||
| + | 3. Pellet 1 mL of the Salmonella subculture by centrifugation at 1000 g in a microfuge for | ||
| + | 2 min at room temperature.<br> | ||
| + | 4. Remove 900 μL of supernatant and gently resuspend the pellet in 900 μL PBS.<br> | ||
| + | <b>Infection</b><br> | ||
| + | 1. Aspirate media and rinse the monolayer twice with PBS.<br> | ||
| + | 2. Inoculate cells with bacteria (MOI = 100) by adding bacteria directly to the | ||
| + | cell-culture supernatant.<br> | ||
| + | 3. Incubate for 2 h at 37 °C in 5% CO<sub>2</sub>.<br> | ||
| + | 4. Aspirate media and wash.<br> | ||
| + | 5. Add fresh GM containing 100 μg/mL gentamicin and 16 μg/mL incubate at 37 °C in 5% CO<sub>2</sub>.<br> | ||
| + | Observation is taken after 5 min, 30 min, 1.5 h.<br><br> | ||
| − | + | </div> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | <div id="float02"> | |
| − | + | <div class="h1">Basic Part Table</div> | |
| − | + | <div style="width: 85%; margin: 30px auto"> | |
| − | + | <table class="table table-bordered table-hover"> | |
| − | + | <thead> | |
| − | + | <th>Name</th> | |
| − | + | <th>Type</th> | |
| − | + | <th>Description</th> | |
| − | + | <th>Designer</th> | |
| + | <th>Length(bp)</th> | ||
| + | </tr> | ||
| + | </thead> | ||
| + | <tbody> | ||
| + | <tr> | ||
| + | <td><a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K2632002">BBa_K2632002</a></td> | ||
| + | <td>Promoter</td> | ||
| + | <td>Promoter sifA</td> | ||
| + | <td>Mo Qiqin</td> | ||
| + | <td>331</td> | ||
| + | </tr> | ||
| + | <tr> | ||
| + | <td><a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K2632003">BBa_K2632003</a></td> | ||
| + | <td>Coding</td> | ||
| + | <td>N-terminal of GasderminD (1-275aa)</td> | ||
| + | <td>Zhujun Xia</td> | ||
| + | <td>825</td> | ||
| + | </tr> | ||
| + | <tr> | ||
| + | <td><a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K2632004">BBa_K2632004</a></td> | ||
| + | <td>Coding</td> | ||
| + | <td>Full length Gasdermin D</td> | ||
| + | <td>Zhujun Xia</td> | ||
| + | <td>1455</td> | ||
| + | </tr> | ||
| + | <tr> | ||
| + | <td><a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K2632005">BBa_K2632005</a></td> | ||
| + | <td>Coding</td> | ||
| + | <td>L290D mutant of full length Gasdermin D</td> | ||
| + | <td>Zhujun Xia</td> | ||
| + | <td>1455</td> | ||
| + | </tr> | ||
| + | <tr> | ||
| + | <td><a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K2632007">BBa_K2632007</a></td> | ||
| + | <td>Coding</td> | ||
| + | <td>A377D mutant of full length Gasdermin D.</td> | ||
| + | <td>Zhujun Xia</td> | ||
| + | <td>1455</td> | ||
| + | </tr> | ||
| + | </tbody> | ||
| + | </table> | ||
| + | </div> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | <div class="h1">Reference</div> | |
| − | + | <p>1 Ding, J. et al. Pore-forming activity and structural autoinhibition of the gasdermin family. | |
| − | + | Nature 535, 111-116, doi:10.1038/nature18590 (2016).</p> | |
| − | + | <p style="padding-bottom:25px;"> | |
| − | + | 2 He, W. T. et al. Gasdermin D is an executor of pyroptosis and required for interleukin-1beta | |
| − | + | secretion. Cell research 25, 1285-1298, doi:10.1038/cr.2015.139 (2015). | |
| − | + | </p> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | </div> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | + | <!-- 侧边 --> | |
| − | + | <div class="cebian"> | |
| − | < | + | <!-- 滚动菜单栏 --> |
| − | + | <div class="daohangyi"> | |
| − | + | <span class="biaoti">Basic Part</span> | |
| − | + | <span class="xsjPic"><img src="https://static.igem.org/mediawiki/2018/8/8d/T--HZAU-China--xjt.svg" alt=""></span> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | < | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | <div class=" | + | <div class="floatCtro"> |
| − | + | <p class="daohanger">N-terminal of Gasdermin D</p> | |
| + | <!-- <p></p> --> | ||
| + | <p class="daohanger">Basic Part Table</p> | ||
| + | <a> | ||
| + | <span>Back to Top</span> | ||
| + | </a> | ||
</div> | </div> | ||
| − | + | <a class="daohangyi" href="https://2018.igem.org/Team:HZAU-China/Composite_Part"> | |
| − | + | <span class="biaoti">Composite Part</span> | |
| − | + | <span class="xsjPic"><img src="https://static.igem.org/mediawiki/2018/7/7c/T--HZAU-China--ysj.svg" alt=""></span> | |
| − | + | </a> | |
| − | + | <!-- 滚动菜单栏 --> | |
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</div> | </div> | ||
| − | <!-- | + | <!-- 滚动菜单栏jQuery --> |
| − | < | + | <script src="jquery.js" type="text/javascript"></script> |
| − | + | <script> | |
| − | + | $(function () { | |
| − | + | var AllHet = $(window).height(); | |
| − | + | var mainHet = $('.floatCtro').height(); | |
| − | + | var fixedTop = (AllHet - mainHet) / 2 | |
| − | + | // $('div.floatCtro').css({top:fixedTop+'px'}); | |
| − | + | $('div.floatCtro p').click(function () { | |
| − | + | var ind = $('div.floatCtro p').index(this) + 1; | |
| − | + | var topVal = $('#float0' + ind).offset().top; | |
| − | + | $('body,html').animate({ scrollTop: topVal }, 1000) | |
| − | + | }) | |
| − | + | $('div.floatCtro a').click(function () { | |
| − | + | $('body,html').animate({ scrollTop: 0 }, 1000) | |
| − | + | }) | |
| − | + | $(window).scroll(scrolls) | |
| − | + | scrolls() | |
| − | + | function scrolls() { | |
| − | + | var f1, f2, bck; | |
| − | + | var fixRight = $('div.floatCtro p'); | |
| − | + | var blackTop = $('div.floatCtro a') | |
| − | + | var sTop = $(window).scrollTop(); | |
| − | + | fl = $('#float01').offset().top; | |
| − | + | f2 = $('#float02').offset().top; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | if (sTop <= f2 - 100) { | |
| − | + | blackTop.fadeOut(300).css('display', 'none') | |
| − | + | } | |
| − | + | else { | |
| − | + | blackTop.fadeIn(300).css('display', 'block') | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | if (sTop >= fl) { | |
| − | + | fixRight.eq(0).addClass('cur').siblings().removeClass('cur'); | |
| − | + | } | |
| − | + | if (sTop >= f2 - 100) { | |
| − | + | fixRight.eq(1).addClass('cur').siblings().removeClass('cur'); | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | } | |
| − | + | }) | |
| − | + | </script> | |
| − | + | <!-- 滚动菜单栏jQuery --> | |
</body> | </body> | ||
</html> | </html> | ||
Revision as of 01:09, 18 October 2018
N-terminal of Gasdermin D (1-275aa)
Pyroptosis is a form of lytic programmed cell death with inflammation. Recent studies reported that the N-terminal of Gasdermin D (pore-forming domain) acts as an effector of pyroptosis. Full length Gasdermin D is cleaved by Caspase 1 then release the PFD (pore-forming domain) which can oligomerize on the cell membrane. Formation of pores causes cell swelling, rupturing of the membrane and the massive leakage of cytosolic contents1.
The N-terminal of GSDMD execute the function of pyroptosis in cells
We respectively fused eGFP with GSDMD-N275 and GSDMD FL (full length). Then these plasmids were transfected into Hela GSDMD KO cell. Microscopy of cells transfecting GSDMD-N275 undergoing pyroptosis, but GSDMD full length did not induce pyroptosis (Figure 1). We also tested the cell viability through ATP assay (CellTiter-Glo® Luminescent Cell Viability Assay) and demonstrated that GSDMD-N275 and mutants of GSDMD FL had different ability to induce pyroptosis (Figure 2).
Figure 1. pCS2-eGFP-GSDMD FL（left）, pCS2-eGFP-GSDMD-N275（right） were transfected respectively into Hela G¬SDMD KO cells. Pyroptotic cells are pointed by red arrow.
Preparation of Cells for transfection
1. Grow Hela GSDMD KO cells in a humidified 37 °C, 5% CO2 tissue-culture incubator.
2. Count the cells using a hemocytometer. Seed in 24-well (5 × 10^4 per well) and grow.
Transfection
1. Dilute 0.5 μg DNA into 50 μl jetPRIME® buffer (supplied). Mix by vortexing.
2. Add 1 μl jetPRIME®, vortex for 10 s, spin down briefly.
3. Incubate for 10 min at RT.
4. Add 50μl of transfection mix per well drop wise onto the cells in serum containing medium, and distribute evenly.
5. Gently rock the plates back and forth and from side to side.
6. If needed, replace transfection medium after 4 h by cell growth medium and return the plates to the incubator.
Observation is taken after 1.5 h
1. Grow Hela GSDMD KO cells in a humidified 37 °C, 5% CO2 tissue-culture incubator.
2. Count the cells using a hemocytometer. Seed in 24-well (5 × 10^4 per well) and grow.
Transfection
1. Dilute 0.5 μg DNA into 50 μl jetPRIME® buffer (supplied). Mix by vortexing.
2. Add 1 μl jetPRIME®, vortex for 10 s, spin down briefly.
3. Incubate for 10 min at RT.
4. Add 50μl of transfection mix per well drop wise onto the cells in serum containing medium, and distribute evenly.
5. Gently rock the plates back and forth and from side to side.
6. If needed, replace transfection medium after 4 h by cell growth medium and return the plates to the incubator.
Observation is taken after 1.5 h
Figure 2. pCS2-Flag-GSDMD FL, pCS2-Flag-GSDMD-N275, pCS2-Flag-GSDMD L290D, pCS2-Flag-GSDMD Y373, pCS2-Flag-GSDMD A377D were transfected respectively into 293T cells. ATP-based cell viability was measured (n=6).
Preparation of Cells for Infection
1. Grow Hela GSDMD KO cells in a humidified 37 °C, 5% CO2 tissue-culture incubator.
2. Count the cells using a hemocytometer. Seed in 24-well (9× 10^4 per well) and grow overnight.
Preparation of Bacteria
1. Grow bacteria overnight 16 h in 2 mL LB in a 15-mL tube. Incubate at 37 °C in a shaking incubator (200 rpm).
2. Subculture bacteria by transferring 300 μL of the overnight culture into 5 mL of LB in a loosely capped 50-mL tube. Incubate at 37 °C in a shaking incubator (200 rpm) to late log phase.
3. Pellet 1 mL of the Salmonella subculture by centrifugation at 1000 g in a microfuge for 2 min at room temperature.
4. Remove 900 μL of supernatant and gently resuspend the pellet in 900 μL PBS.
Infection
1. Aspirate media and rinse the monolayer twice with PBS.
2. Inoculate cells with bacteria (MOI = 100) by adding bacteria directly to the cell-culture supernatant.
3. Incubate for 3 h at 37 °C in 5% CO2.
4. Aspirate media and rinse the monolayer twice with PBS.
5. Add fresh GM containing 100 μg/mL gentamicin and incubate at 37 °C in 5% CO2.
Observation is taken after 2 h.
1. Grow Hela GSDMD KO cells in a humidified 37 °C, 5% CO2 tissue-culture incubator.
2. Count the cells using a hemocytometer. Seed in 24-well (9× 10^4 per well) and grow overnight.
Preparation of Bacteria
1. Grow bacteria overnight 16 h in 2 mL LB in a 15-mL tube. Incubate at 37 °C in a shaking incubator (200 rpm).
2. Subculture bacteria by transferring 300 μL of the overnight culture into 5 mL of LB in a loosely capped 50-mL tube. Incubate at 37 °C in a shaking incubator (200 rpm) to late log phase.
3. Pellet 1 mL of the Salmonella subculture by centrifugation at 1000 g in a microfuge for 2 min at room temperature.
4. Remove 900 μL of supernatant and gently resuspend the pellet in 900 μL PBS.
Infection
1. Aspirate media and rinse the monolayer twice with PBS.
2. Inoculate cells with bacteria (MOI = 100) by adding bacteria directly to the cell-culture supernatant.
3. Incubate for 3 h at 37 °C in 5% CO2.
4. Aspirate media and rinse the monolayer twice with PBS.
5. Add fresh GM containing 100 μg/mL gentamicin and incubate at 37 °C in 5% CO2.
Observation is taken after 2 h.
The N-terminal of GSDMD lyses bacteria
Expression of the N terminal of GSDMD fused with eGFP (eGFP-GSDMD-N275) was under the control of Ptet in ΔsifA SL1344. The colony-forming unit (CFU) was measured for counting the number of viable bacteria (Figure 3). This result shows that eGFP-GSDMD-N275 exhibits cytotoxicity in bacteria.
Figure 3. In each group, ATc (16μg/ml) was added into medium when bacteria grown to logarithmic phase (OD = 0.6~0.8). Vector refers to bacteria containing a high copy number plasmid which only expresses TetR under the control of Ptet. Bacterial colony-forming units (CFU) for vector and eGFP-GSDMD-N275 are shown in the logarithmic form (log10) (n=3).
1. Cell are cultured overnight in LB broth containing corresponding antibiotics, and
dilute each 1 volume overnight cultures with 100 volume fresh LB containing antibiotics.
Culture in 37℃ 200 rpm.
2. When OD reaching to 0.6-0.8, add anhydrotetracycline with final concentration of μg/ml to induce the expression of EGFP-GSDMD-N275.
3. Take 100 μl diluted culture to plate on LB agar plates containing appropriate concentration of antibody after 1.5 hours of induce.
Observation is taken overnight.
2. When OD reaching to 0.6-0.8, add anhydrotetracycline with final concentration of μg/ml to induce the expression of EGFP-GSDMD-N275.
3. Take 100 μl diluted culture to plate on LB agar plates containing appropriate concentration of antibody after 1.5 hours of induce.
Observation is taken overnight.
The N-terminal of GSDMD from lytic bacteria induce cell pyroptosis.
Expression of the N-terminal of GSDMD fused with eGFP (eGFP-GSDMD-N275) was under the control of Tet promoter in ΔsifA SL1344. Hela GSDMD KO cell line were infected with ΔsifA SL1344. Inducer ATc (16μg/mL) were added after 3 h infection. Microscopy showed that eGFP-GSDMD-N275 located in cytoplasm after 5 min of induction and trigger pyroptosis after 30 min of induction (Figure 4). After 1.5 h of induction, Hela GSDMD KO cells undergo second necrosis caused by bacterial infection without inducer. Morphology of this process is similar to pyroptosis2. Thus, these population of ruptured cells were counted. There are two folds change between control group and induced group (Figure 5). So ruptured cells in induced group were triggered pyroptosis by eGFP-GSDMD-N275 but not by bacterial infection.
Figure 4. Hela GSDMD KO cell line were infected with ΔsifA SL1344 containing high copy number plasmids which express eGFP-GSDMD-N275 under the control of ATc. Photos were captured after 5 min of induction.
Figure 5. Ruptured cells in a field of view were counted.
Preparation of Cells for Infection
1. Grow Hela GSDMD KO cells in a humidified 37 °C, 5% CO2 tissue-culture incubator.
2. Count the cells using a hemocytometer. Seed in 24-well (5 × 10^4 per well) and grow overnight.
Preparation of Bacteria
1. Grow bacteria overnight 16 h in 2 mL LB in a 15-mL tube. Incubate at 37 °C in a shaking incubator (200 rpm).
2. Subculture bacteria by transferring 300 μL of the overnight culture into 5 mL of LB in a loosely capped 50-mL tube. Incubate at 37 °C in a shaking incubator (200 rpm) to late log phase.
3. Pellet 1 mL of the Salmonella subculture by centrifugation at 1000 g in a microfuge for 2 min at room temperature.
4. Remove 900 μL of supernatant and gently resuspend the pellet in 900 μL PBS.
Infection
1. Aspirate media and rinse the monolayer twice with PBS.
2. Inoculate cells with bacteria (MOI = 100) by adding bacteria directly to the cell-culture supernatant.
3. Incubate for 2 h at 37 °C in 5% CO2.
4. Aspirate media and wash.
5. Add fresh GM containing 100 μg/mL gentamicin and 16 μg/mL incubate at 37 °C in 5% CO2.
Observation is taken after 5 min, 30 min, 1.5 h.
1. Grow Hela GSDMD KO cells in a humidified 37 °C, 5% CO2 tissue-culture incubator.
2. Count the cells using a hemocytometer. Seed in 24-well (5 × 10^4 per well) and grow overnight.
Preparation of Bacteria
1. Grow bacteria overnight 16 h in 2 mL LB in a 15-mL tube. Incubate at 37 °C in a shaking incubator (200 rpm).
2. Subculture bacteria by transferring 300 μL of the overnight culture into 5 mL of LB in a loosely capped 50-mL tube. Incubate at 37 °C in a shaking incubator (200 rpm) to late log phase.
3. Pellet 1 mL of the Salmonella subculture by centrifugation at 1000 g in a microfuge for 2 min at room temperature.
4. Remove 900 μL of supernatant and gently resuspend the pellet in 900 μL PBS.
Infection
1. Aspirate media and rinse the monolayer twice with PBS.
2. Inoculate cells with bacteria (MOI = 100) by adding bacteria directly to the cell-culture supernatant.
3. Incubate for 2 h at 37 °C in 5% CO2.
4. Aspirate media and wash.
5. Add fresh GM containing 100 μg/mL gentamicin and 16 μg/mL incubate at 37 °C in 5% CO2.
Observation is taken after 5 min, 30 min, 1.5 h.
Basic Part Table
| Name | Type | Description | Designer | Length(bp) |
|---|---|---|---|---|
| BBa_K2632002 | Promoter | Promoter sifA | Mo Qiqin | 331 |
| BBa_K2632003 | Coding | N-terminal of GasderminD (1-275aa) | Zhujun Xia | 825 |
| BBa_K2632004 | Coding | Full length Gasdermin D | Zhujun Xia | 1455 |
| BBa_K2632005 | Coding | L290D mutant of full length Gasdermin D | Zhujun Xia | 1455 |
| BBa_K2632007 | Coding | A377D mutant of full length Gasdermin D. | Zhujun Xia | 1455 |
Reference
1 Ding, J. et al. Pore-forming activity and structural autoinhibition of the gasdermin family. Nature 535, 111-116, doi:10.1038/nature18590 (2016).
2 He, W. T. et al. Gasdermin D is an executor of pyroptosis and required for interleukin-1beta secretion. Cell research 25, 1285-1298, doi:10.1038/cr.2015.139 (2015).
