Difference between revisions of "Team:HZAU-China"

 
(6 intermediate revisions by one other user not shown)
Line 56: Line 56:
 
             margin: 0;
 
             margin: 0;
 
             padding: 0;
 
             padding: 0;
            /* text-align: center; */
 
            /* 轮播图居中 */
 
 
             background-color: #F3F3F3;
 
             background-color: #F3F3F3;
 
             font-size: 16px;
 
             font-size: 16px;
Line 93: Line 91:
 
             z-index: 1;
 
             z-index: 1;
 
             background-color: #EEEEEE;
 
             background-color: #EEEEEE;
            opacity: 0.96;
 
            filter: alpha(opacity=96);
 
 
             box-shadow: 0 5px 15px #CCCCCC;
 
             box-shadow: 0 5px 15px #CCCCCC;
 
             display: none;
 
             display: none;
Line 250: Line 246:
 
         }
 
         }
  
         @media screen and (max-width: 880px) {
+
         @media screen and (max-width: 900px) {
  
 
             .daohang .caidan {
 
             .daohang .caidan {
Line 298: Line 294:
 
             width: 100%;
 
             width: 100%;
 
             height: auto;
 
             height: auto;
             background-color: #F3F3F3;
+
             background-color: #FFF;
 
         }
 
         }
  
 
         .zhengwen {
 
         .zhengwen {
             width: 80%;
+
             width: 90%;
            /* height: auto; */
+
 
             margin: 20px auto;
 
             margin: 20px auto;
            /* right: 2%; */
+
             padding: 0px 3%;
            /* top: 90px; */
+
             padding: 20px 3%;
+
            /* float: right; */
+
            /* position: relative; */
+
 
             background-color: #FFF;
 
             background-color: #FFF;
 
             box-shadow: 0 1px 3px #676767;
 
             box-shadow: 0 1px 3px #676767;
            /* border: 2px solid black; */
+
 
            /* border-radius: 3px; */
+
            /* overflow: hidden; */
+
            /* display: block; */
+
            /* font-family: Arial, Verdana, Sans-serif; */
+
        }
+
       
+
        .lunbotu{
+
            text-align: center;
+
 
         }
 
         }
  
 
         .cebian {
 
         .cebian {
             width: 15%;
+
             width: 200px;
 
             /* height: 80vh; */
 
             /* height: 80vh; */
 
             float: left;
 
             float: left;
Line 333: Line 316:
 
             /* border:2px solid black */
 
             /* border:2px solid black */
 
             /* background-color: #323643 */
 
             /* background-color: #323643 */
 +
        }
 +
 +
        .neirong p{
 +
            text-align: justify !important;
 +
            font-family:  Arial, sans-serif !important;
 +
            color: #a64945 !important;;
 +
            font-size: 28px !important;
 +
            padding-right: 20px;
 +
            border: 4px solid #456285;
 +
            border-radius: 10px;
 +
            padding: 10px;
 
         }
 
         }
  
Line 343: Line 337:
  
 
         .h1 {
 
         .h1 {
            height: 100px;
+
             line-height: 55px;
             line-height: 100px;
+
 
             font-weight: bold;
 
             font-weight: bold;
 +
            height:auto;
 
             font-family: 'Product Sans', sans-serif;
 
             font-family: 'Product Sans', sans-serif;
             font-size: 50px;
+
             font-size: 40px;
             color: black;
+
             color: #3B3B3B;
             border-bottom: 3px solid black;
+
             border-bottom: 2px solid #676767;
             /* margin: 0 2.4%; */
+
            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;
 
         }
 
         }
  
Line 463: Line 485:
 
         }
 
         }
 
     </style>
 
     </style>
     <!-- 轮播图CSS -->
+
     <!-- 样式CSS -->
     <style class="text/css">
+
     <style>
 +
        #anniu {
 +
      /* position: relative; */
 +
      /* top: 80%; */
 +
      /* transition: top 0.2s; */
 +
      /* left: 5%; */
 +
      /* margin: 0; */
 +
    }
  
        .csslider {
+
    #anniu>img {
        -moz-perspective: 1300px;
+
      height: auto;
        -ms-perspective: 1300px;
+
    }
        -webkit-perspective: 1300px;
+
        perspective: 1300px;
+
        display: inline-block;
+
        text-align: left;
+
        position: relative;
+
        margin-bottom: 22px;
+
        }
+
        .csslider > input {
+
        display: none;
+
        }
+
        .csslider > input:nth-of-type(10):checked ~ ul li:first-of-type {
+
        margin-left: -900%;
+
        }
+
        .csslider > input:nth-of-type(9):checked ~ ul li:first-of-type {
+
        margin-left: -800%;
+
        }
+
        .csslider > input:nth-of-type(8):checked ~ ul li:first-of-type {
+
        margin-left: -700%;
+
        }
+
        .csslider > input:nth-of-type(7):checked ~ ul li:first-of-type {
+
        margin-left: -600%;
+
        }
+
        .csslider > input:nth-of-type(6):checked ~ ul li:first-of-type {
+
        margin-left: -500%;
+
        }
+
        .csslider > input:nth-of-type(5):checked ~ ul li:first-of-type {
+
        margin-left: -400%;
+
        }
+
        .csslider > input:nth-of-type(4):checked ~ ul li:first-of-type {
+
        margin-left: -300%;
+
        }
+
        .csslider > input:nth-of-type(3):checked ~ ul li:first-of-type {
+
        margin-left: -200%;
+
        }
+
        .csslider > input:nth-of-type(2):checked ~ ul li:first-of-type {
+
        margin-left: -100%;
+
        }
+
        .csslider > input:nth-of-type(1):checked ~ ul li:first-of-type {
+
        margin-left: 0%;
+
        }
+
        .csslider > ul {
+
        position: relative;
+
        width: 900px;
+
        height: 500px;
+
        z-index: 1;
+
        font-size: 0;
+
        line-height: 0;
+
        background-color: #d1d1d1;
+
        border: 10px solid #d1d1d1;
+
        margin: 0 auto;
+
        padding: 0;
+
        overflow: hidden;
+
        white-space: nowrap;
+
        -moz-box-sizing: border-box;
+
        -webkit-box-sizing: border-box;
+
        box-sizing: border-box;
+
        }
+
        .csslider > ul > li {
+
        position: relative;
+
        display: inline-block;
+
        width: 100%;
+
        height: 100%;
+
        overflow: hidden;
+
        font-size: 15px;
+
        font-size: initial;
+
        line-height: normal;
+
        -moz-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
+
        -o-transition: all 0.5s ease-out;
+
        -webkit-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
+
        transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
+
        -moz-background-size: cover;
+
        -o-background-size: cover;
+
        -webkit-background-size: cover;
+
        background-size: cover;
+
        vertical-align: top;
+
        -moz-box-sizing: border-box;
+
        -webkit-box-sizing: border-box;
+
        box-sizing: border-box;
+
        white-space: normal;
+
        }
+
  
        .csslider > .navigation {
+
    #anniu:hover {
        position: absolute;
+
      /* top: 180px; */
        bottom: -10px;
+
    }
        left: 50%;
+
        z-index: 10;
+
        margin-bottom: -10px;
+
        font-size: 0;
+
        line-height: 0;
+
        text-align: center;
+
        -webkit-touch-callout: none;
+
        -webkit-user-select: none;
+
        -khtml-user-select: none;
+
        -moz-user-select: none;
+
        -ms-user-select: none;
+
        user-select: none;
+
        }
+
        .csslider > .navigation > div {
+
        margin-left: -100%;
+
        }
+
        .csslider > .navigation label {
+
        position: relative;
+
        display: inline-block;
+
        cursor: pointer;
+
        border-radius: 50%;
+
        margin: 0 2px;
+
        padding: 5px;
+
        background: #d1d1d1;
+
        }
+
        .csslider > .navigation label:hover:after {
+
        opacity: 1;
+
        }
+
        .csslider > .navigation label:after {
+
        content: '';
+
        position: absolute;
+
        left: 50%;
+
        top: 50%;
+
        margin-left: -5px;
+
        margin-top: -5px;
+
        background: #f51720;
+
        border-radius: 50%;
+
        padding: 5px;
+
        opacity: 0;
+
        }
+
        .csslider > .arrows {
+
        -webkit-touch-callout: none;
+
        -webkit-user-select: none;
+
        -khtml-user-select: none;
+
        -moz-user-select: none;
+
        -ms-user-select: none;
+
        user-select: none;
+
        }
+
        .csslider.inside .navigation {
+
        bottom: 10px;
+
        margin-bottom: 10px;
+
        }
+
        .csslider.inside .navigation label {
+
        border: 1px solid #7e7e7e;
+
        }
+
        .csslider > input:nth-of-type(1):checked ~ .navigation label:nth-of-type(1):after,
+
        .csslider > input:nth-of-type(2):checked ~ .navigation label:nth-of-type(2):after,
+
        .csslider > input:nth-of-type(3):checked ~ .navigation label:nth-of-type(3):after,
+
        .csslider > input:nth-of-type(4):checked ~ .navigation label:nth-of-type(4):after,
+
        .csslider > input:nth-of-type(5):checked ~ .navigation label:nth-of-type(5):after,
+
        .csslider > input:nth-of-type(6):checked ~ .navigation label:nth-of-type(6):after,
+
        .csslider > input:nth-of-type(7):checked ~ .navigation label:nth-of-type(7):after,
+
        .csslider > input:nth-of-type(8):checked ~ .navigation label:nth-of-type(8):after,
+
        .csslider > input:nth-of-type(9):checked ~ .navigation label:nth-of-type(9):after,
+
        .csslider > input:nth-of-type(10):checked ~ .navigation label:nth-of-type(10):after,
+
        .csslider > input:nth-of-type(11):checked ~ .navigation label:nth-of-type(11):after {
+
        opacity: 1;
+
        }
+
        .csslider > .arrows {
+
        position: absolute;
+
        left: -31px;
+
        top: 50%;
+
        width: 100%;
+
        height: 26px;
+
        padding: 0 31px;
+
        z-index: 0;
+
        -moz-box-sizing: content-box;
+
        -webkit-box-sizing: content-box;
+
        box-sizing: content-box;
+
        }
+
        .csslider > .arrows label {
+
        display: none;
+
        position: absolute;
+
        top: -50%;
+
        padding: 13px;
+
        box-shadow: inset 2px -2px 0 1px #d1d1d1;
+
        cursor: pointer;
+
        -moz-transition: .15s;
+
        -o-transition: .15s;
+
        -webkit-transition: .15s;
+
        transition: .15s;
+
        }
+
        .csslider > .arrows label:hover {
+
        box-shadow: inset 3px -3px 0 2px #f51720;
+
        margin: 0 0px;
+
        }
+
        .csslider > .arrows label:before {
+
        content: '';
+
        position: absolute;
+
        top: -100%;
+
        left: -100%;
+
        height: 300%;
+
        width: 300%;
+
        }
+
        .csslider.infinity > input:first-of-type:checked ~ .arrows label:last-of-type,
+
        .csslider > input:nth-of-type(1):checked ~ .arrows label:nth-of-type(0),
+
        .csslider > input:nth-of-type(2):checked ~ .arrows label:nth-of-type(1),
+
        .csslider > input:nth-of-type(3):checked ~ .arrows label:nth-of-type(2),
+
        .csslider > input:nth-of-type(4):checked ~ .arrows label:nth-of-type(3),
+
        .csslider > input:nth-of-type(5):checked ~ .arrows label:nth-of-type(4),
+
        .csslider > input:nth-of-type(6):checked ~ .arrows label:nth-of-type(5),
+
        .csslider > input:nth-of-type(7):checked ~ .arrows label:nth-of-type(6),
+
        .csslider > input:nth-of-type(8):checked ~ .arrows label:nth-of-type(7),
+
        .csslider > input:nth-of-type(9):checked ~ .arrows label:nth-of-type(8),
+
        .csslider > input:nth-of-type(10):checked ~ .arrows label:nth-of-type(9),
+
        .csslider > input:nth-of-type(11):checked ~ .arrows label:nth-of-type(10) {
+
        display: block;
+
        left: 0;
+
        -moz-transform: rotate(45deg);
+
        -ms-transform: rotate(45deg);
+
        -o-transform: rotate(45deg);
+
        -webkit-transform: rotate(45deg);
+
        transform: rotate(45deg);
+
        }
+
        .csslider.infinity > input:last-of-type:checked ~ .arrows label:first-of-type,
+
        .csslider > input:nth-of-type(1):checked ~ .arrows label:nth-of-type(2),
+
        .csslider > input:nth-of-type(2):checked ~ .arrows label:nth-of-type(3),
+
        .csslider > input:nth-of-type(3):checked ~ .arrows label:nth-of-type(4),
+
        .csslider > input:nth-of-type(4):checked ~ .arrows label:nth-of-type(5),
+
        .csslider > input:nth-of-type(5):checked ~ .arrows label:nth-of-type(6),
+
        .csslider > input:nth-of-type(6):checked ~ .arrows label:nth-of-type(7),
+
        .csslider > input:nth-of-type(7):checked ~ .arrows label:nth-of-type(8),
+
        .csslider > input:nth-of-type(8):checked ~ .arrows label:nth-of-type(9),
+
        .csslider > input:nth-of-type(9):checked ~ .arrows label:nth-of-type(10),
+
        .csslider > input:nth-of-type(10):checked ~ .arrows label:nth-of-type(11),
+
        .csslider > input:nth-of-type(11):checked ~ .arrows label:nth-of-type(12) {
+
        display: block;
+
        right: 0;
+
        -moz-transform: rotate(225deg);
+
        -ms-transform: rotate(225deg);
+
        -o-transform: rotate(225deg);
+
        -webkit-transform: rotate(225deg);
+
        transform: rotate(225deg);
+
        }      
+
  
 +
    .xuanzhuan{
 +
      position: relative;
 +
      background-size: cover;
 +
      animation: rotate 10s infinite;
 +
      -webkit-animation: mymove_2 10s infinite;
 +
      animation-timing-function: linear;
 +
      background-size: 100px 100px;
 +
      background-repeat: no-repeat;
 +
      background-size: cover;
 +
    }
 +
    @keyframes mymove {
 +
      from {}
 +
      to {
 +
        transform: rotate(360deg);
 +
      }
 +
    }
  
 +
    @-moz-keyframes mymove {
 +
      from {}
 +
      to {
 +
        transform: rotate(360deg);
 +
      }
 +
    }
  
        .csslider .navigation label {
+
    @-webkit-keyframes mymove {
            background: #B1B1B1;
+
      from {}
        }
+
      to {
        .csslider .arrows label {
+
        transform: rotate(360deg);
            border-left-color: #B1B1B1;
+
      }
            border-right-color: #B1B1B1;
+
    }
        }
+
        .csslider.inside .navigation label {
+
            border: 1px solid #FFF;
+
        }
+
  
         @import url(http://fonts.googleapis.com/css?family=Raleway:400,700|Lato);
+
    @-o-keyframes mymove {
 +
      from {}
 +
      to {
 +
         transform: rotate(360deg);
 +
      }
 +
    }
  
        * {
+
    @keyframes mymove_2 {
            margin: 0;
+
      from {}
            padding: 0;
+
      to {
        }
+
         transform: rotate(-360deg);
 
+
      }
        ::-webkit-scrollbar {
+
    }
            width: 2px;
+
            background: rgba(255, 255, 255, 0.1);
+
        }
+
 
+
        ::-webkit-scrollbar-track {
+
            background: none;
+
        }
+
 
+
         ::-webkit-scrollbar-thumb {
+
            background: rgba(0, 94, 168, 0.6);
+
        }
+
 
+
        ul, ol {
+
            padding-left: 40px;
+
        }
+
 
+
        #slider1 {
+
            margin: 20px auto;
+
            font-family: 'Lato';
+
        }
+
  
 +
    @-moz-keyframes mymove_2 {
 +
      from {}
 +
      to {
 +
        transform: rotate(-360deg);
 +
      }
 +
    }
  
 +
    @-webkit-keyframes mymove_2 {
 +
      from {}
 +
      to {
 +
        transform: rotate(-360deg);
 +
      }
 +
    }
  
 +
    @-o-keyframes mymove_2 {
 +
      from {}
 +
      to {
 +
        transform: rotate(-360deg);
 +
      }
 +
    }
 
     </style>
 
     </style>
 
  
  
Line 772: Line 597:
 
                 <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/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/InterLab">InterLab</a>
 +
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Notebook">Notebook</a>
 +
 
             </li>
 
             </li>
 
             <li class="hiLight shortName">
 
             <li class="hiLight shortName">
Line 799: Line 626:
 
                 <a class="item" href="https://2018.igem.org/Team:HZAU-China/Collaborations">Collaborations</a>
 
                 <a class="item" href="https://2018.igem.org/Team:HZAU-China/Collaborations">Collaborations</a>
 
             </li>
 
             </li>
             <li class="shortName">
+
             <li class="hiLight shortName">
                 <a class="nav_head" href="https://2018.igem.org/Team:HZAU-China/Parts">
+
                 <a class="nav_head" href="#">
 
                     <span>Parts</span>
 
                     <span>Parts</span>
 +
                    <span class="xjtPic"></span>
 
                 </a>
 
                 </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>
 
             </li>
 
         </ul>
 
         </ul>
Line 808: Line 638:
 
     </nav>
 
     </nav>
 
     <!-- 内容 -->
 
     <!-- 内容 -->
     <div class="neirong clearfix">
+
     <div class="neirong">
 
         <!-- 正文 -->
 
         <!-- 正文 -->
         <div class="zhengwen">
+
 
            <div class="lunbotu">
+
         <div id="float01" class="cur">
                <div id="slider1" class="csslider infinity inside">
+
            <div style="width: 70%; margin: 0px auto">
                    <input type="radio" name="slides" id="slides_1" checked />
+
                <img style="margin:0 auto; width:100% " src="https://static.igem.org/mediawiki/2018/e/e2/T--HZAU-China--home01.png"
                    <input type="radio" name="slides" id="slides_2" />
+
                    alt="">
                    <input type="radio" name="slides" id="slides_3" />
+
            </div>
                    <input type="radio" name="slides" id="slides_4" />
+
            <div style="width:60%; margin: 0  auto 50px auto; background-color: #FFF !important;  ">
                    <ul>
+
                <p>In the fight against cancer, the capacity of escaping from immune system of tumor cells is the main
                        <li>
+
                    reason why cancer cannot be cured. So why we cannot cause pyroptosis for the tumor cells, in
                            <img width="100%" src="https://static.igem.org/mediawiki/2018/7/70/T--HZAU-China--hezhao1.png" />
+
                    order to make them exposed to the immune system again.
                        </li>
+
                </p>
                        <li>
+
            </div>
                            <img width="100%" src="https://static.igem.org/mediawiki/2018/7/70/T--HZAU-China--hezhao1.png" />
+
            <div id="home02" style="width: 80%; margin: 0px auto">
                        </li>
+
                <div class="xuanzhuan" style="width: 20%; margin: 0px auto">
                        <li>
+
                    <a id="anniu" href="#home02">
                            <img width="100%" src="https://static.igem.org/mediawiki/2018/7/70/T--HZAU-China--hezhao1.png" />
+
                        <img src="https://static.igem.org/mediawiki/2018/1/15/T--HZAU-China--cell1.jpg" width=100% id="aimage">
                        </li>
+
                     </a>
                        <li>
+
                            <img width="100%" src="https://static.igem.org/mediawiki/2018/7/70/T--HZAU-China--hezhao1.png" />
+
                        </li>
+
                    </ul>
+
                    <div class="arrows">
+
                        <label for="slides_1"></label>
+
                        <label for="slides_2"></label>
+
                        <label for="slides_3"></label>
+
                        <label for="slides_4"></label>
+
                     </div>
+
                    <div class="navigation">
+
                        <div>
+
                            <label for="slides_1"></label>
+
                            <label for="slides_2"></label>
+
                            <label for="slides_3"></label>
+
                            <label for="slides_4"></label>
+
                        </div>
+
                    </div>
+
 
                 </div>
 
                 </div>
 +
                <img style="margin:0 auto; width:100% " src="https://static.igem.org/mediawiki/2018/1/1e/T--HZAU-China--home02.png"
 +
                    alt="">
 
             </div>
 
             </div>
 +
            <div style="width: 100%; margin: 0px auto; height:100px; background-color: #FFF; ">
 +
                </div>
 +
            <div style="width: 100%; margin: 0px auto; border-top: 4px solid #456285;">
 +
                <img src="https://static.igem.org/mediawiki/2018/4/44/T--HZAU-China--home03.png" width=100% alt="">
 +
            </div>
 +
 +
 +
 
         </div>
 
         </div>
 +
 +
 
     </div>
 
     </div>
    <!-- jQuery -->
 
    <script src="jquery.js" type="text/javascript"></script>
 
  
     <!-- jQuery -->
+
     <!-- 滚动菜单栏jQuery -->
 +
    <script src="jquery.js" type="text/javascript"></script>
 +
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
 +
    <script>
 +
        $(document).ready(function () {
 +
            $('#aimage').click(function () {
 +
                var imgsrc1 = "https://static.igem.org/mediawiki/2018/1/15/T--HZAU-China--cell1.jpg";
 +
                var imgsrc2 = "https://static.igem.org/mediawiki/2018/e/ee/T--HZAU-China--cell2.jpg";
 +
                var that = $(this);
 +
                if (that.attr("src") == imgsrc1) {
 +
                    that.attr("src", imgsrc2);
 +
                }
 +
            })
 +
        })
 +
    </script>
 +
    <!-- 滚动菜单栏jQuery -->
  
 
</body>
 
</body>
  
 
</html>
 
</html>

Latest revision as of 03:54, 18 October 2018

In the fight against cancer, the capacity of escaping from immune system of tumor cells is the main reason why cancer cannot be cured. So why we cannot cause pyroptosis for the tumor cells, in order to make them exposed to the immune system again.