Difference between revisions of "Team:HZAU-China/Public Engagement"

 
(14 intermediate revisions by 3 users not shown)
Line 3: Line 3:
  
 
<head>
 
<head>
−
    <meta charset="UTF-8">
+
  <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">
+
  <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">
+
  <link href="bootstrap.min.css" rel="stylesheet">
−
    <!-- 导航栏CSS -->
+
  <!-- 导航栏CSS -->
−
    <style type="text/css">
+
  <style type="text/css">
−
        #sideMenu,
+
    #sideMenu,
−
        #top_title,
+
    #top_title,
−
        #team_submenu {
+
    #team_submenu {
−
            display: none;
+
      display: none;
−
        }
+
    }
  
−
        #HQ_page p {
+
    #HQ_page p {
−
            margin: 0 !important;
+
      margin: 0 !important;
−
        }
+
    }
  
−
        #content {
+
    #content {
−
            padding: 0px;
+
      padding: 0px;
−
            width: 100%;
+
      width: 100%;
−
            margin-top: 0px;
+
      margin-top: 0px;
−
            margin-left: 0px;
+
      margin-left: 0px;
−
        }
+
    }
  
−
        #bodyContent h1,
+
    #bodyContent h1,
−
        #bodyContent h2,
+
    #bodyContent h2,
−
        #bodyContent h3,
+
    #bodyContent h3,
−
        #bodyContent h4,
+
    #bodyContent h4,
−
        #bodyContent h5 {
+
    #bodyContent h5 {
−
            margin-bottom: 0px;
+
      margin-bottom: 0px;
−
        }
+
    }
  
−
        #team_name {
+
    #team_name {
−
            display: none
+
      display: none
−
        }
+
    }
  
−
        .global_wrapper {
+
    .global_wrapper {
−
            padding: 0px 0px 0px 0px;
+
      padding: 0px 0px 0px 0px;
−
        }
+
    }
  
−
        #top_menu_14 {
+
    #top_menu_14 {
−
            height: 16px;
+
      height: 16px;
−
        }
+
    }
  
−
        * {
+
    * {
−
            margin: 0;
+
      margin: 0;
−
            padding: 0;
+
      padding: 0;
−
            list-style: none;
+
      list-style: none;
−
            list-style-type: none;
+
      list-style-type: none;
−
            text-decoration: none !important;
+
      text-decoration: none !important;
−
        }
+
    }
  
−
        body {
+
    body {
−
            margin: 0;
+
      margin: 0;
−
            padding: 0;
+
      padding: 0;
−
            background-color: #F3F3F3;
+
      background-color: #F3F3F3;
−
            font-size: 16px;
+
      font-size: 16px;
−
            font-family: Arial, Verdana, Sans-serif;
+
      font-family: Arial, Verdana, Sans-serif;
−
            letter-spacing: 0;
+
      letter-spacing: 0;
−
            color: #FFFFFF;
+
      color: #FFFFFF;
−
        }
+
    }
  
−
        .daohang {
+
    .daohang {
−
            background-color: #323643;
+
      background-color: #323643;
−
            position: relative;
+
      position: relative;
−
            color: #ffffff;
+
      color: #ffffff;
−
            height: 64px;
+
      height: 64px;
−
            top: -2px;
+
      top: -2px;
−
        }
+
    }
  
−
        .logo-daohang {
+
    .logo-daohang {
−
            height: 64px;
+
      height: 64px;
−
            left: 10%;
+
      left: 10%;
−
            float: left;
+
      float: left;
−
            position: relative;
+
      position: relative;
−
        }
+
    }
  
−
        .daohang a {
+
    .daohang a {
−
            display: block;
+
      display: block;
−
            text-decoration: none;
+
      text-decoration: none;
−
        }
+
    }
  
−
        .daohang .shade {
+
    .daohang .shade {
−
            position: absolute;
+
      position: absolute;
−
            width: 100%;
+
      width: 100%;
−
            height: 160px;
+
      height: 160px;
−
            top: 64px;
+
      top: 64px;
−
            left: 0;
+
      left: 0;
−
            z-index: 1;
+
      z-index: 1;
−
            background-color: #EEEEEE;
+
      background-color: #EEEEEE;
−
            opacity: 0.96;
+
      box-shadow: 0 5px 15px #CCCCCC;
−
            filter: alpha(opacity=96);
+
      display: none;
−
            box-shadow: 0 5px 15px #CCCCCC;
+
      border-bottom: #ffffff solid 1px;
−
            display: none;
+
      border-bottom: rgba(255, 255, 255, 0.3) solid 1px;
−
            border-bottom: #ffffff solid 1px;
+
    }
−
            border-bottom: rgba(255, 255, 255, 0.3) solid 1px;
+
−
        }
+
  
−
        .daohang .caidan {
+
    .daohang .caidan {
−
            position: absolute;
+
      position: absolute;
−
            top: 0;
+
      top: 0;
−
            right: 10%;
+
      right: 10%;
−
            margin: 0;
+
      margin: 0;
−
            z-index: 2;
+
      z-index: 2;
−
            padding: 0;
+
      padding: 0;
−
            list-style: none;
+
      list-style: none;
−
            width: 730px;
+
      width: 730px;
−
            float: right;
+
      float: right;
−
            overflow: hidden;
+
      overflow: hidden;
−
            height: 64px;
+
      height: 64px;
−
        }
+
    }
  
−
        .daohang .caidan>li {
+
    .daohang .caidan>li {
−
            padding: 0;
+
      padding: 0;
−
            float: left;
+
      float: left;
−
            margin: 0;
+
      margin: 0;
−
            text-align: center;
+
      text-align: center;
−
            height: 224px;
+
      height: 224px;
−
        }
+
    }
  
−
        .daohang .shortName {
+
    .daohang .shortName {
−
            width: 110px;
+
      width: 110px;
−
        }
+
    }
  
−
        .daohang .longName {
+
    .daohang .longName {
−
            width: 170px;
+
      width: 170px;
−
        }
+
    }
  
−
        .daohang .nav_head {
+
    .daohang .nav_head {
−
            height: 64px;
+
      height: 64px;
−
            line-height: 64px;
+
      line-height: 64px;
−
            color: #ffffff;
+
      color: #ffffff;
−
            font-size: 16px !important;
+
      font-size: 16px !important;
−
        }
+
    }
  
−
        .daohang .xsjPic {
+
    .daohang .xsjPic {
−
            display: inline-block;
+
      display: inline-block;
−
            width: 10px;
+
      width: 10px;
−
            height: 10px;
+
      height: 10px;
−
            vertical-align: middle;
+
      vertical-align: middle;
−
            background-size: 100% 100%;
+
      background-size: 100% 100%;
−
            background-image: url("https://static.igem.org/mediawiki/2018/6/63/T--HZAU-China--xsj.svg")
+
      background-image: url("https://static.igem.org/mediawiki/2018/6/63/T--HZAU-China--xsj.svg")
−
        }
+
    }
  
−
        .daohang .xjtPic {
+
    .daohang .xjtPic {
−
            display: inline-block;
+
      display: inline-block;
−
            width: 10px;
+
      width: 10px;
−
            height: 10px;
+
      height: 10px;
−
            vertical-align: middle;
+
      vertical-align: middle;
−
            background-size: 100% 100%;
+
      background-size: 100% 100%;
−
            background-image: url("https://static.igem.org/mediawiki/2018/8/8d/T--HZAU-China--xjt.svg")
+
      background-image: url("https://static.igem.org/mediawiki/2018/8/8d/T--HZAU-China--xjt.svg")
−
        }
+
    }
  
−
        .daohang a:hover span{
+
    .daohang a:hover span {
−
            transform: rotateY(180deg);          
+
      transform: rotateY(180deg);
−
            -webkit-transform: rotateY(180deg);          
+
      -webkit-transform: rotateY(180deg);
−
            -moz-transform: rotateY(180deg);          
+
      -moz-transform: rotateY(180deg);
−
            -o-transform: rotateY(180deg);          
+
      -o-transform: rotateY(180deg);
−
            -ms-transform: rotateY(180deg);
+
      -ms-transform: rotateY(180deg);
−
            transition: all 0.5s ease-in-out;          
+
      transition: all 0.5s ease-in-out;
−
            -webkit-transition: all 0.5s ease-in-out;          
+
      -webkit-transition: all 0.5s ease-in-out;
−
            -moz-transition: all 0.5s ease-in-out;          
+
      -moz-transition: all 0.5s ease-in-out;
−
            -o-transition: all 0.5s ease-in-out;
+
      -o-transition: all 0.5s ease-in-out;
−
        }
+
    }
  
−
        .daohang .item {
+
    .daohang .item {
−
            font-size: 16px;
+
      font-size: 16px;
−
            height: 40px;
+
      height: 40px;
−
            line-height: 40px;
+
      line-height: 40px;
−
            color: #333333;
+
      color: #333333;
−
            position: relative;
+
      position: relative;
−
        }
+
    }
  
−
        .daohang .caidan:hover {
+
    .daohang .caidan:hover {
−
            height: 264px;
+
      height: 264px;
−
            transition: height 0.3s;
+
      transition: height 0.3s;
−
        }
+
    }
  
−
        .daohang .caidan:hover+.shade {
+
    .daohang .caidan:hover+.shade {
−
            display: block;
+
      display: block;
−
        }
+
    }
  
−
        .daohang .caidan>li.hiLight:hover {
+
    .daohang .caidan>li.hiLight:hover {
−
            background-color: #ffffff;
+
      background-color: #ffffff;
−
        }
+
    }
  
−
        .daohang .caidan>li:hover .nav_head {
+
    .daohang .caidan>li:hover .nav_head {
−
            background-color: #EA0D04;
+
      background-color: #EA0D04;
−
        }
+
    }
  
−
        .daohang .caidan>li:hover .item {}
+
    .daohang .caidan>li:hover .item {}
  
  
−
        .daohang .shortName .item:before {
+
    .daohang .shortName .item:before {
−
            content: '';
+
      content: '';
−
            display: block;
+
      display: block;
−
            position: absolute;
+
      position: absolute;
−
            width: 80px;
+
      width: 80px;
−
            height: 1px;
+
      height: 1px;
−
            bottom: 5px;
+
      bottom: 5px;
−
            left: 15px;
+
      left: 15px;
−
            background-color: #CCCCCC;
+
      background-color: #CCCCCC;
−
        }
+
    }
  
−
        .daohang .shortName .item:hover:after {
+
    .daohang .shortName .item:hover:after {
−
            content: '';
+
      content: '';
−
            display: block;
+
      display: block;
−
            position: absolute;
+
      position: absolute;
−
            width: 80px;
+
      width: 80px;
−
            height: 2px;
+
      height: 2px;
−
            bottom: 5px;
+
      bottom: 5px;
−
            left: 15px;
+
      left: 15px;
−
            background-color: #f51720;
+
      background-color: #f51720;
−
        }
+
    }
  
−
        .daohang .longName .item:before {
+
    .daohang .longName .item:before {
−
            content: '';
+
      content: '';
−
            display: block;
+
      display: block;
−
            position: absolute;
+
      position: absolute;
−
            width: 130px;
+
      width: 130px;
−
            height: 1px;
+
      height: 1px;
−
            bottom: 5px;
+
      bottom: 5px;
−
            left: 20px;
+
      left: 20px;
−
            background-color: #CCCCCC;
+
      background-color: #CCCCCC;
−
        }
+
    }
  
−
        .daohang .longName .item:hover:after {
+
    .daohang .longName .item:hover:after {
−
            content: '';
+
      content: '';
−
            display: block;
+
      display: block;
−
            position: absolute;
+
      position: absolute;
−
            width: 130px;
+
      width: 130px;
−
            height: 2px;
+
      height: 2px;
−
            bottom: 5px;
+
      bottom: 5px;
−
            left: 20px;
+
      left: 20px;
−
            background-color: #f51720;
+
      background-color: #f51720;
−
        }
+
    }
  
−
        @media screen and (max-width: 1200px) {
+
    @media screen and (max-width: 1200px) {
−
            .logo-daohang {
+
      .logo-daohang {
−
                left: 3%;
+
        left: 3%;
−
            }
+
      }
  
−
            .daohangyi {
+
      .daohangyi {
−
                font-size: 12px;
+
        font-size: 12px;
−
            }
+
      }
−
        }
+
    }
  
−
        @media screen and (max-width: 880px) {
+
    @media screen and (max-width: 900px) {
  
−
            .daohang .caidan {
+
      .daohang .caidan {
−
                right: 0;
+
        right: 0;
−
                width: 100%;
+
        width: 100%;
−
            }
+
      }
  
−
            .logo-daohang {
+
      .logo-daohang {
−
                display: none;
+
        display: none;
−
            }
+
      }
  
−
            .daohang .shortName {
+
      .daohang .shortName {
−
                width: 15vw;
+
        width: 15vw;
−
            }
+
      }
  
−
            .daohang .longName {
+
      .daohang .longName {
−
                width: 25vw;
+
        width: 25vw;
−
            }
+
      }
  
−
            .daohangyi img {
+
      .daohangyi img {
−
                display: none;
+
        display: none;
−
            }
+
      }
  
−
            .daohang .longName .item:before {
+
      .daohang .longName .item:before {
−
            width: 150px;
+
        width: 150px;
−
            left: 20px;
+
        left: 20px;
−
            }
+
      }
  
−
            .daohang .longName .item:hover:after {
+
      .daohang .longName .item:hover:after {
−
            width: 150px;
+
        width: 150px;
−
            left: 20px;
+
        left: 20px;
−
          }
+
      }
−
        }
+
    }
−
    </style>
+
  </style>
−
    <!-- 内容CSS -->
+
  <!-- 内容CSS -->
−
    <style class="text/css">
+
  <style class="text/css">
−
        .clearfix:after {
+
    .clearfix:after {
−
            content: ".";
+
          content: ".";
−
            display: block;
+
          display: block;
−
            height: 0;
+
          height: 0;
−
            clear: both;
+
          clear: both;
−
            visibility: hidden;
+
          visibility: hidden;
  
−
        }
+
      }
  
−
        .neirong {
+
      .neirong {
−
            width: 100%;
+
          width: 100%;
−
            height: auto;
+
          height: auto;
−
            background-color: #F3F3F3;
+
          background-color: #F3F3F3;
−
        }
+
      }
  
−
        .zhengwen {
+
      .zhengwen {
−
            width: 80%;
+
          width: 80%;
−
            /* height: auto; */
+
          /* height: auto; */
−
            margin: 20px 20px 0 0;
+
          margin: 20px 40px 0 0;
−
            /* right: 2%; */
+
          /* right: 2%; */
−
            /* top: 90px; */
+
          /* top: 90px; */
−
            padding: 20px 3%;
+
          padding: 50px 3%;
−
            float: right;
+
          float: right;
−
            /* position: relative; */
+
          /* 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: 2px solid black; */
−
            /* border-radius: 3px; */
+
          /* border-radius: 3px; */
−
            /* overflow: hidden; */
+
          /* overflow: hidden; */
−
            /* display: block; */
+
          /* display: block; */
−
            /* font-family: Arial, Verdana, Sans-serif; */
+
          /* font-family: Arial, Verdana, Sans-serif; */
−
        }
+
      }
  
−
        .cebian {
+
      .cebian {
−
            width: 15%;
+
          width: 200px;
−
            /* height: 80vh; */
+
          /* height: 80vh; */
−
            float: left;
+
          float: left;
−
            /* left: 1vw; */
+
          /* left: 1vw; */
−
            top: 150px;
+
          top: 150px;
−
            position: fixed;
+
          position: fixed;
−
            box-shadow: 0 1px 3px #676767;
+
          box-shadow: 0 1px 3px #676767;
−
            /* border:2px solid black */
+
          /* border:2px solid black */
−
            /* background-color: #323643 */
+
          /* background-color: #323643 */
−
        }
+
      }
  
−
        .daimg {
+
      .zhengwen p{
−
            width: 100%;
+
          text-align: justify !important;
−
            height: auto;
+
          font-family: 'Times New Roman',Helvetica,'Open Sans',  Arial, sans-serif !important;
−
            margin: 20px 0;
+
          color: #3B3B3B;
−
            box-shadow: 0 1px 3px #676767;
+
          font-size: 26px !important;
−
        }
+
          padding-right: 20px;
 +
      }
  
−
        .h1 {
+
      .daimg {
−
            height: 100px;
+
          width: 100%;
−
            line-height: 100px;
+
          height: auto;
−
            font-weight: bold;
+
          margin: 20px 0;
−
            font-family: 'Product Sans', sans-serif;
+
          box-shadow: 0 1px 3px #676767;
−
            font-size: 50px;
+
      }
−
            color: black;
+
−
            border-bottom: 3px solid black;
+
−
            /* margin: 0 2.4%; */
+
−
        }
+
  
−
        .zhengwen .tuandui_list {
+
      .h1 {
−
            position: relative;
+
          line-height: 55px;
−
            margin-top: 40px;
+
          font-weight: bold;
−
            height: 520px;
+
          height:auto;
−
            overflow: hidden;
+
          font-family: 'Product Sans', sans-serif;
−
        }
+
          font-size: 40px;
 +
          color: #3B3B3B;
 +
          border-bottom: 2px solid #676767;
 +
          margin-bottom: 20px;
 +
      }
  
−
        .tuandui_list>li {
+
      .h2 {
−
            padding: 0;
+
          height: 40px;
−
            width: 20%;
+
          line-height: 40px;
−
            float: left;
+
          font-weight: bold;
−
            position: relative;
+
          height:auto;
−
            margin: 0 2.4%;
+
          /* font-weight: bold; */
−
            text-align: center;
+
          font-family: 'Product Sans', sans-serif;
−
        }
+
          font-size: 30px;
 +
          color: #484848;
 +
          /* margin-bottom: 20px; */
 +
      }
  
−
        .zhengwen .laoshi_list {
+
      .h3 {
−
            position: relative;
+
          height: 30px;
−
            margin-top: 40px;
+
          line-height: 30px;
−
            height: 430px;
+
          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;
 +
      }
  
−
        .laoshi_list>li {
+
      .zhengwen .tuandui_list {
−
            padding: 0;
+
          position: relative;
−
            width: 20%;
+
          margin-top: 40px;
−
            float: left;
+
          height: 520px;
−
            position: relative;
+
          overflow: hidden;
−
            margin: 0 2.4%;
+
      }
−
            text-align: center;
+
−
        }
+
  
−
        .duiyuan {
+
      .tuandui_list>li {
−
            margin: 20px 0;
+
          padding: 0;
−
            /* border: 1px solid red; */
+
          width: 20%;
−
        }
+
          float: left;
 +
          position: relative;
 +
          margin: 0 2.4%;
 +
          text-align: center;
 +
      }
  
−
        .laoshi {
+
      .zhengwen .laoshi_list {
−
            margin: 20px 0;
+
          position: relative;
−
        }
+
          margin-top: 40px;
 +
          height: 430px;
 +
      }
  
−
        .duiyuan img {
+
      .laoshi_list>li {
−
            width: 100%;
+
          padding: 0;
−
            height: auto;
+
          width: 20%;
−
            border-top: 3px solid #323643;
+
          float: left;
−
            border-left: 3px solid #323643;
+
          position: relative;
−
            border-right: 3px solid #323643;
+
          margin: 0 2.4%;
−
        }
+
          text-align: center;
 +
      }
  
−
        .laoshi img {
+
      .duiyuan {
−
            width: 100%;
+
          margin: 20px 0;
−
            height: 50vh;
+
          /* border: 1px solid red; */
−
            border-top: 3px solid #323643;
+
      }
−
            border-left: 3px solid #323643;
+
−
            border-right: 3px solid #323643;
+
−
        }
+
  
−
        .duiyuan .xingming {
+
      .laoshi {
−
            width: 100%;
+
          margin: 20px 0;
−
            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 {
+
      .duiyuan img {
−
            width: 100%;
+
          width: 100%;
−
            height: 50px;
+
          height: auto;
−
            line-height: 50px;
+
          border-top: 3px solid #323643;
−
            background-color: #323643;
+
          border-left: 3px solid #323643;
−
            border-left: 3px solid #323643;
+
          border-right: 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 {
+
      .laoshi img {
−
            width: 100%;
+
          width: 100%;
−
            height: 200px;
+
          height: 50vh;
−
            background-color: #f6eee0;
+
          border-top: 3px solid #323643;
−
            border-bottom: 3px solid #323643;
+
          border-left: 3px solid #323643;
−
            border-left: 3px solid #323643;
+
          border-right: 3px solid #323643;
−
            border-right: 3px solid #323643;
+
      }
−
            /* border-bottom-left-radius: 5px;
+
−
            border-bottom-right-radius: 5px; */
+
−
        }
+
  
−
        .duiyuan .jieshao .saohua {
+
      .duiyuan .xingming {
−
            padding: 10px 4px 0px 4px !important;
+
          width: 100%;
−
            color: black;
+
          height: 50px;
−
            font-family: Arial;
+
          line-height: 50px;
−
            font-style: italic;
+
          background-color: #323643;
−
            font-size: 15px !important;
+
          border-left: 3px solid #323643;
−
            list-style-type: none;
+
          border-right: 3px solid #323643;
−
            text-align: justify;
+
          font-size: 16px;
−
            line-height: 18px;
+
          color: white;
−
        }
+
          box-shadow: 0 1px 3px #CCCCCC;
−
    </style>
+
          font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
−
    <!-- 滚动菜单栏CSS -->
+
          font-size: 24px;
−
    <style>
+
          font-weight: bold;
−
        #float01 {}
+
          text-align: center;
 +
      }
  
−
        #float02 {}
+
      .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;
 +
      }
  
−
        #float03 {}
+
      .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; */
 +
      }
  
−
        div.floatCtro {
+
      .duiyuan .jieshao .saohua {
−
            width: 100%;
+
          padding: 10px 4px 0px 4px !important;
−
            height: 250px;
+
          color: black;
−
            margin: 0;
+
          font-family: Arial;
−
            position: relative;
+
          font-style: italic;
−
            background: #fff;
+
          font-size: 15px !important;
 +
          list-style-type: none;
 +
          text-align: justify;
 +
          line-height: 18px;
 +
      }
 +
  </style>
 +
  <!-- 滚动菜单栏CSS -->
 +
  <style>
 +
    #float01 {}
  
−
        }
+
      #float02 {}
  
−
        .daohangyi {
+
      div.floatCtro {
−
            display: block;
+
          width: 100%;
−
            width: 100%;
+
          /* height: auto; */
−
            height: 40px;
+
          margin: 0;
−
            color: #ffffff !important;
+
          position: relative;
−
            font-size: 16px;
+
          background: #fff;
−
            background-color: #323643;
+
−
            border-bottom: 1px solid black;
+
−
            /* border-radius: 5px; */
+
−
            text-decoration: none !important;
+
−
        }
+
  
−
        div.floatCtro .daohanger {
+
      }
−
            width: 100%;
+
−
            text-align: justify !important;
+
−
            height: 45px;
+
−
            line-height: 45px;
+
−
            font-family: Arial;
+
−
            font-size: 14px;
+
−
            color: #676767;
+
−
            margin: 0;
+
−
            padding-left: 8%;
+
−
            cursor: pointer;
+
−
            background: #fff;
+
−
        }
+
  
−
        div.floatCtro a {
+
      .daohangyi {
−
            display: inline-block;
+
          display: block;
−
            display: none;
+
          width: 100%;
−
            width: 100%;
+
          /* height: auto; */
−
            height: 40px;
+
          /* text-align: left !important; */
−
            /* margin: 10px 0 0 0; */
+
          color: #ffffff !important;
−
            background: #FFF;
+
          font-size: 16px;
−
            color: #000 !important;
+
          padding:0;
−
            vertical-align: middle;
+
          background-color: #323643;
−
            cursor: pointer;
+
          border-bottom: 1px solid black;
−
        }
+
          padding:0 3%;
 +
          text-decoration: none !important;
 +
      }
  
−
        div.floatCtro a span {
+
      div.floatCtro .daohanger {
−
            display: block;
+
          width: 100%;
−
            height: 44px;
+
          text-align: left !important;
−
            line-height: 44px;
+
          height: auto;
−
            font-family: Arial;
+
          line-height: 25px;
−
            font-size: 16px;
+
          font-family: Arial;
−
            padding-left: 8%;
+
          font-size: 14px !important;
−
        }
+
          color: #676767;
 +
          margin: 0;
 +
          padding:10px 8%;
 +
          cursor: pointer;
 +
          background: #fff;
 +
      }
  
−
        div.floatCtro a:hover {
+
      div.floatCtro a {
−
            /* background: #76b39d; */
+
          display: inline-block;
−
            color: #EA0D04 !important;
+
          display: none;
−
            zoom: 1;
+
          width: 100%;
−
        }
+
          height: 40px;
 +
          padding:10px 8%;
 +
          /* margin: 10px 0 0 0; */
 +
          background: #FFF;
 +
          color: #000 !important;
 +
          vertical-align: middle;
 +
          cursor: pointer;
 +
      }
  
−
        /* .cebian a:hover {
+
      div.floatCtro a span {
−
            color: #f6eee0 !important;
+
          display: block;
−
        } */
+
          height: auto;
 +
          text-align: left !important;
 +
          line-height: 18px;
 +
          font-family: Arial;
 +
          font-size: 16px;
 +
      }
  
−
        div.floatCtro .daohanger:hover {
+
      div.floatCtro a:hover {
−
            /* background: #76b39d; */
+
          /* background: #76b39d; */
−
            color: #1fa67a;
+
          color: #EA0D04 !important;
−
            text-decoration: underline !important;
+
          zoom: 1;
−
        }
+
      }
  
−
        div.floatCtro .daohanger.cur {
+
      /* .cebian a:hover {
−
            /* background: #1fa67a; */
+
          color: #f6eee0 !important;
−
            color: #1fa67a;
+
      } */
−
        }
+
  
−
        .biaoti {
+
      div.floatCtro .daohanger:hover {
−
            line-height: 40px;
+
          /* background: #76b39d; */
−
            width: 50%;
+
          color: #1fa67a;
−
            margin-left: 6%;
+
          text-decoration: underline !important;
−
            text-align: center;
+
      }
−
            text-decoration: none !important;
+
−
        }
+
  
−
        .daohangyi img {
+
      div.floatCtro .daohanger.cur {
−
            display: inline-block;
+
          /* background: #1fa67a; */
−
            width: 12px;
+
          color: #1fa67a;
−
            height: 12px;
+
      }
−
            vertical-align: middle;
+
−
            background-size: 100% 100%;
+
  
−
        }
+
      .biaoti {
−
        .cebian div:hover img{
+
          display: inline-block;
−
            transform: rotateY(180deg);           
+
          margin: 8px 0;
−
            -webkit-transform: rotateY(180deg);          
+
          /* width: 50%; */
−
            -moz-transform: rotateY(180deg);           
+
          /* margin-left: 6%; */
−
            -o-transform: rotateY(180deg);           
+
          /* text-align: center; */
−
            -ms-transform: rotateY(180deg);
+
          text-decoration: none !important;
−
            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) {           
+
      .daohangyi img {
−
         
+
          display: inline-block;
−
            .daohangyi {
+
          width: 12px;
−
                font-size: 12px;
+
          height: 12px;
−
            }
+
          vertical-align: middle;
−
        }
+
          background-size: 100% 100%;
  
−
        @media screen and (max-width: 880px) {
+
      }
 +
      .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;
 +
      }
  
−
            .daohangyi img {
+
      @media screen and (max-width: 1200px) {           
−
                display: none;
+
       
−
            }
+
          .cebian {
 +
          width: 15%;
 +
          }
  
−
            .laoshi img {
+
          .zhengwen {
−
                height: 30vh;
+
          margin: 20px 20px 0 0;
−
            }
+
 
−
        }
+
          .daohangyi {
−
     </style>
+
              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: black  !important;
 +
        border-color: #F3F3F3  !important;
 +
        padding: 5px 15px 5px 18px  !important;
 +
        background-color: #f5f5f5  !important;
 +
        margin: 0  !important;
 +
        text-align: center !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{
 +
          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>
  
  
Line 604: Line 734:
  
 
<body>
 
<body>
−
    <!-- 导航栏 -->
+
  <!-- 导航栏 -->
−
    <nav class="daohang">
+
  <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"
+
    <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>
+
        class="logo-daohang"></a>
−
        <ul class="caidan">
+
    <ul class="caidan">
−
            <li class="hiLight shortName">
+
      <li class="hiLight shortName">
−
                <a class="nav_head" href="https://2018.igem.org/Team:HZAU-China">
+
        <a class="nav_head" href="https://2018.igem.org/Team:HZAU-China">
−
                    <span>Project</span>
+
          <span>Project</span>
−
                    <span class="xsjPic"></span>
+
          <span class="xsjPic"></span>
−
                </a>
+
        </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/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/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/Results">Results</a>
−
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Demonstrate">Demonstrate</a>
+
        <a class="item" href="https://2018.igem.org/Team:HZAU-China/Demonstrate">Demonstrate</a>
−
            </li>
+
      </li>
−
            <li class="hiLight shortName">
+
      <li class="hiLight shortName">
−
                <a class="nav_head" href="#">
+
        <a class="nav_head" href="#">
−
                    <span>Wetlab</span>
+
          <span>Wetlab</span>
−
                    <span class="xjtPic"></span>
+
          <span class="xjtPic"></span>
−
                </a>
+
        </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/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/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>
−
            </li>
+
        <a class="item" href="https://2018.igem.org/Team:HZAU-China/Notebook">Notebook</a>
−
            <li class="hiLight shortName">
+
 
−
                <a class="nav_head" href="#">
+
      </li>
−
                    <span>Drylab</span>
+
      <li class="hiLight shortName">
−
                    <span class="xjtPic"></span>
+
        <a class="nav_head" href="#">
−
                </a>
+
          <span>Drylab</span>
−
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Model">Model</a>
+
          <span class="xjtPic"></span>
−
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Software">Software</a>
+
        </a>
−
            </li>
+
        <a class="item" href="https://2018.igem.org/Team:HZAU-China/Model">Model</a>
−
            <li class="hiLight longName">
+
        <a class="item" href="https://2018.igem.org/Team:HZAU-China/Software">Software</a>
−
                <a class="nav_head" href="#">
+
      </li>
−
                    <span>Human&nbsp;Practices</span>
+
      <li class="hiLight longName">
−
                    <span class="xjtPic"></span>
+
        <a class="nav_head" href="#">
−
                </a>
+
          <span>Human&nbsp;Practices</span>
−
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Safety">Safty</a>
+
          <span class="xjtPic"></span>
−
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Human_Practices">Human Practices</a>
+
        </a>
−
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Public_Engagement">Public Engagement</a>
+
        <a class="item" href="https://2018.igem.org/Team:HZAU-China/Safety">Safety</a>
−
            </li>
+
        <a class="item" href="https://2018.igem.org/Team:HZAU-China/Human_Practices">Human Practices</a>
−
            <li class="hiLight shortName">
+
        <a class="item" href="https://2018.igem.org/Team:HZAU-China/Public_Engagement">Public Engagement</a>
−
                <a class="nav_head" href="#">
+
      </li>
−
                    <span>About Us</span>
+
      <li class="hiLight shortName">
−
                    <span class="xjtPic"></span>
+
        <a class="nav_head" href="#">
−
                </a>
+
          <span>About Us</span>
−
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Team">Team</a>
+
          <span class="xjtPic"></span>
−
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Attributions">Attributions</a>
+
        </a>
−
                <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/Team">Team</a>
−
            </li>
+
        <a class="item" href="https://2018.igem.org/Team:HZAU-China/Attributions">Attributions</a>
−
            <li class="shortName">
+
        <a class="item" href="https://2018.igem.org/Team:HZAU-China/Collaborations">Collaborations</a>
−
                <a class="nav_head" href="https://2018.igem.org/Team:HZAU-China/Parts">
+
      </li>
−
                    <span>Parts</span>
+
      <li class="hiLight shortName">
−
                </a>
+
        <a class="nav_head" href="#">
−
            </li>
+
          <span>Parts</span>
−
        </ul>
+
          <span class="xjtPic"></span>
−
        <div class="shade"></div>
+
        </a>
−
    </nav>
+
        <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>
−
    <div class="neirong clearfix">
+
      </li>
−
        <!-- 正文 -->
+
    </ul>
−
        <div class="zhengwen">
+
    <div class="shade"></div>
−
            <img class="daimg" src="https://static.igem.org/mediawiki/2018/7/70/T--HZAU-China--hezhao1.png" alt="">
+
  </nav>
−
            <div id="float01" class="cur">
+
  <!-- 内容 -->
−
                <div class="h1">biaotiyi</div>
+
  <div class="neirong clearfix">
 +
    <!-- 正文 -->
 +
    <div class="zhengwen">
  
−
            </div>
+
      <p>All fear comes from the unknown. We live in a world where advanced science and high technology keep making
−
            <div id="float02">
+
        progress. It is also a world where we all live under asymmetric information from time to time. The asymmetric
−
                <div class="h1">biaotier</div>
+
        information, which in our case mostly means professional knowledge, is causing inappropriate panic towards
 +
        emerging fields like AI and GMO among the public, and some even believe the world would end if we keep developing
 +
        such technologies. Fear and doubt can be good things which lead us to think profoundly, but also harmful if
 +
        we refuse to think objectively. We thought that everyone could make better decisions with more information or
 +
        knowledge, however, we also learned that the ability to comprehend new information decreases with age. So,
 +
        combining our 2018 project, we decided to offer a little help to those who needs cancer-related information
 +
        in a more lucid way to express, and we wanted to answer their questions in person for the best effects. We
 +
        believe if anyone could be the communicating bridge between the public and advanced science, is we college
 +
        students, since we have the right resource, the right cause and enthusiasm.</p>
  
−
            </div>
+
      <div style="width: 40%; margin: 30px auto">
−
            <div id="float03">
+
        <img src="https://static.igem.org/mediawiki/2018/2/2c/T--HZAU-China--pbhp1.png" width=100% alt="">
−
                <div class="h1">biaotisan</div>
+
      </div>
−
               
+
      <div id="float01" class="cur">
−
            </div>
+
        <div class="h1">Public Survey</div>
 +
        <p>To acquire a detailed understanding about the public attitude towards our project，a questionnaire was
 +
          designed based on two documents (see also <a href="https://2018.igem.org/Team:HZAU-China/Safety">Safety</a>
 +
          for more information). The questionnaire was spread through
 +
          Internet, and a total of 1036 pieces were received.</p>
 +
      </div>
 +
      <div id="float02">
 +
        <div class="h1">The Report</div>
 +
 
 +
        <p>1. 26.2 % people we inquired are afraid of cancer, while more people worry about cancer occasionally. Some do not care about cancer and think it will not appear around. Overall, a large
 +
          proportion (73.8%) do not panic about cancer.
 +
        </p>
 +
        <div style="width: 70%; margin: 30px auto">
 +
          <img src="https://static.igem.org/mediawiki/2018/2/21/T--HZAU-China--ans1.png" width=100% alt="">
 
         </div>
 
         </div>
−
         <!-- 侧边 -->
+
         <p> 2. Nowadays, government propaganda and media reports have reduced people's fear of cancer. Regardless of
−
         <div class="cebian">
+
          the diverse resources of data，only about 40% people felt quite fearful about cancer.
−
            <!-- 滚动菜单栏 -->
+
        </p>
−
             <a class="daohangyi" href="https://2018.igem.org/Team:HZAU-China/Safty">
+
 
−
                <span class="biaoti">Safty</span>
+
         <div style="margin: 20px 0;" class="row">
−
                <span class="xsjPic"><img src="https://static.igem.org/mediawiki/2018/7/7c/T--HZAU-China--ysj.svg" alt=""></span>
+
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
−
            </a>
+
             <img src="https://static.igem.org/mediawiki/2018/5/5d/T--HZAU-China--ans2-Friends.png" width=100% alt="">
−
            <a class="daohangyi" href="https://2018.igem.org/Team:HZAU-China/Human_Practices">
+
          </div>
−
                <span class="biaoti">Human Practices</span>
+
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
−
                <span class="xsjPic"><img src="https://static.igem.org/mediawiki/2018/7/7c/T--HZAU-China--ysj.svg" alt=""></span>
+
            <img src="https://static.igem.org/mediawiki/2018/a/a6/T--HZAU-China--ans2-OfficialMedia.png" width=100% alt="">
−
            </a>
+
          </div>
−
            <div class="daohangyi">
+
        </div>
−
                    <span class="biaoti">Public Engagement</span>
+
        <div style="margin: 20px 0;" class="row">
−
                    <span class="xsjPic"><img src="https://static.igem.org/mediawiki/2018/8/8d/T--HZAU-China--xjt.svg" alt=""></span>
+
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
−
            </div>
+
            <img src="https://static.igem.org/mediawiki/2018/9/9e/T--HZAU-China--ans2-ResearchPaper.png" width=100% alt="">
−
            <div class="floatCtro">
+
          </div>
−
                <p class="daohanger">neirongyi</p>
+
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
−
                <p class="daohanger">neironger</p>
+
            <img src="https://static.igem.org/mediawiki/2018/4/45/T--HZAU-China--ans2-SocialMedia.png" width=100% alt="">
−
                <p class="daohanger">neirongsan</p>
+
          </div>
−
                <a>
+
        </div>
−
                    <span>Back&nbsp;to&nbsp;Top</span>
+
 
−
                </a>
+
 
−
            </div>
+
        <p> 3. 70% people are fearful of cancer because of the high mortality rate and the pain of losing their loved
−
            <div class="daohangyi" style="height:20px">
+
          ones. But in contrast, the high cost of treatments is not the largest fear for them.
−
                </div>
+
        </p>
−
             <!-- 滚动菜单栏 -->
+
        <div style="width: 70%; margin: 30px auto">
 +
          <img src="https://static.igem.org/mediawiki/2018/7/7a/T--HZAU-China--ans3.png" width=100% alt="">
 +
        </div>
 +
        <p> 4. Most people learn about cancer mainly by WeChat Moments and subscriptions, some by communicating with
 +
          friends and families.
 +
        </p>
 +
        <div style="width: 70%; margin: 30px auto">
 +
          <img src="https://static.igem.org/mediawiki/2018/9/9b/T--HZAU-China--ans4.png" width=100% alt="">
 +
        </div>
 +
        <p> 5. According to the means people learn about cancer, those who collect information by communicating with
 +
          friends or families are easier to feel scared of cancer while those who get professional information from
 +
          scientific papers hardly feel so.
 +
        </p>
 +
 
 +
 
 +
        <div style="margin: 20px 0;" class="row">
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img src="https://static.igem.org/mediawiki/2018/8/8f/T--HZAU-China--ans5-mid-Age.png" width=100% alt="">
 +
          </div>
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img src="https://static.igem.org/mediawiki/2018/7/79/T--HZAU-China--ans5-senior.png" width=100% alt="">
 +
          </div>
 +
        </div>
 +
        <div style="margin: 20px 0;" class="row">
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img src="https://static.igem.org/mediawiki/2018/d/d0/T--HZAU-China--ans5-teens.png" width=100% alt="">
 +
          </div>
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img src="https://static.igem.org/mediawiki/2018/3/33/T--HZAU-China--ans5-youths.png" width=100% alt="">
 +
          </div>
 +
        </div>
 +
 
 +
 
 +
        <p> 6. In terms of age, middle-aged participants feel more panic about cancer while the youth fear less.
 +
        </p>
 +
 
 +
 
 +
 
 +
        <div style="margin: 20px 0;" class="row">
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img src="https://static.igem.org/mediawiki/2018/e/eb/T--HZAU-China--ans6-mid-Age.png" width=100% alt="">
 +
          </div>
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
             <img src="https://static.igem.org/mediawiki/2018/3/32/T--HZAU-China--ans6-senior.png" width=100% alt="">
 +
          </div>
 
         </div>
 
         </div>
 +
        <div style="margin: 20px 0;" class="row">
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img src="https://static.igem.org/mediawiki/2018/2/2a/T--HZAU-China--ans6-teens.png" width=100% alt="">
 +
          </div>
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img src="https://static.igem.org/mediawiki/2018/4/43/T--HZAU-China--ans6-youths.png" width=100% alt="">
 +
          </div>
 +
        </div>
 +
 +
 +
        <p> 7. People who are not engaged in biological or medical fields are easier to get panic about cancer.
 +
        </p>
 +
 +
 +
        <div style="margin: 20px 0;" class="row">
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img src="https://static.igem.org/mediawiki/2018/6/6c/T--HZAU-China--ans7-Affirmative.png" width=100% alt="">
 +
          </div>
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img src="https://static.igem.org/mediawiki/2018/e/e2/T--HZAU-China--ans7-Negative.png" width=100% alt="">
 +
          </div>
 +
        </div>
 +
 +
 +
        <p> 8. The majority of those who learn about cancer mainly by chatting with others, generally show ignorance or
 +
          disappointment about China’s current anticarcinogen developing speed.
 +
        </p>
 +
        <div style="width: 70%; margin: 30px auto">
 +
          <img src="https://static.igem.org/mediawiki/2018/0/07/T--HZAU-China--ans8.png" width=100% alt="">
 +
        </div>
 +
        <p> 9. 55% respondents showed ignorance or disappointment about China’s anticarcinogen developing speed. What’s
 +
          more, all of those who expressed firm opposition to the <i>Salmonella</i> targeting method belong to that 55%.
 +
        </p>
 +
        <div style="width: 70%; margin: 30px auto">
 +
          <img src="https://static.igem.org/mediawiki/2018/2/22/T--HZAU-China--ans9.png" width=100% alt="">
 +
        </div>
 +
        <p> 10. Many participants actually hold the expectation to the <i>Salmonella</i> curing idea. The strongest hope was
 +
          to avoid healthy tissue damages, the second was the clearance of <i>Salmonella</i> to avoid infection.
 +
        </p>
 +
        <div style="width: 70%; margin: 30px auto">
 +
          <img src="https://static.igem.org/mediawiki/2018/e/ee/T--HZAU-China--ans10.png" width=100% alt="">
 +
        </div>
 +
        <p> 11. From the result, 92.1% people felt a professional platform in which they can obtain specialized
 +
          knowledge could help them reduce their worries about new technologies. This is also from where we learned
 +
          that the idea of a science blog may actually has its market.
 +
        </p>
 +
        <div style="width: 70%; margin: 30px auto">
 +
          <img src="https://static.igem.org/mediawiki/2018/2/27/T--HZAU-China--ans11.png" width=100% alt="">
 +
        </div>
 +
        <p>(questionnaire design, statistical results and statistical methods can be downloaded <a href="https://static.igem.org/mediawiki/2018/1/10/T--HZAU-China--questionnaire.zip">here</a>)</p>
 +
      </div>
 +
      <div id="float03">
 +
        <div class="h1">Presentation to New Students</div>
 +
        <p>At the beginning of this new school year, we gave a presentation to the newly enrolled students of
 +
          College of Life Science and Technology, and Department of Bioinformatics. The aim was to increase their interests in life
 +
          science, provide them with basic knowledge of synthetic biology, and introduce our projects to them. The
 +
          presentation was broadcasted live through Internet <a href="https://www.bilibili.com/video/av16790939?from=search&seid=1493964311653912183"></a>
 +
          video
 +
          ; comments and attentions are
 +
          both acquired. </p>
 +
 +
 +
        <div style="margin: 20px 0;" class="row">
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img style="border:8px solid #E0CCAE; box-shadow: 0 1px 3px #676767; " src="https://static.igem.org/mediawiki/2018/1/12/T--HZAU-China--sky1.jpeg"
 +
              width=100% alt="">
 +
          </div>
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img style="border:8px solid #E0CCAE; box-shadow: 0 1px 3px #676767; " src="https://static.igem.org/mediawiki/2018/2/25/T--HZAU-China--sky2.jpeg"
 +
              width=100% alt="">
 +
          </div>
 +
        </div>
 +
 +
 +
 +
      </div>
 +
      <div id="float04">
 +
        <div class="h1"><a href="https://wang-shuguang.github.io/">Science Blog</a></div>
 +
        <p>In analyzing the information obtained from the questionnaires and presentation feedbacks, we believed that
 +
          establishing a science blog about cancer by college students can be both insightful and practical. Our blog
 +
          includes three sections: a brief introduction of cancer, cancer treatments, and basic aspects of synthetic
 +
          biology. We kept answering the questions in the comment area, and we truly hope that one day, this idea will
 +
          spread, when college students could be organized systematically in order to help people with the answers that
 +
          couldn’t be acquired by simply searching keywords. </p>
 +
 +
        <div style="margin: 20px 0;" class="row">
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img src="https://static.igem.org/mediawiki/2018/9/9a/T--HZAU-China--public1.png" width=100% alt="">
 +
          </div>
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img src="https://static.igem.org/mediawiki/2018/e/e9/T--HZAU-China--public2.png" width=100% alt="">
 +
          </div>
 +
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img src="https://static.igem.org/mediawiki/2018/a/a9/T--HZAU-China--public3.png" width=100% alt="">
 +
          </div>
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img src="https://static.igem.org/mediawiki/2018/3/3d/T--HZAU-China--public4.png" width=100% alt="">
 +
          </div>
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img src="https://static.igem.org/mediawiki/2018/5/50/T--HZAU-China--public6.png" width=100% alt="">
 +
          </div>
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img src="https://static.igem.org/mediawiki/2018/9/99/T--HZAU-China--public5.png" width=100% alt="">
 +
          </div>
 +
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img src="https://static.igem.org/mediawiki/2018/5/5a/T--HZAU-China--public7.png" width=100% alt="">
 +
          </div>
 +
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img src="https://static.igem.org/mediawiki/2018/3/3e/T--HZAU-China--public8.png" width=100% alt="">
 +
          </div>
 +
 +
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
 +
            <img src="https://static.igem.org/mediawiki/2018/1/17/T--HZAU-China--public9.png" width=100% alt="">
 +
          </div>
 +
        </div>
 +
 +
        <div style="width: 100%; margin: 30px auto">
 +
          <img src="https://static.igem.org/mediawiki/2018/a/ad/T--HZAU-China--pbhp2.png" width=100% alt="">
 +
        </div>
 +
      </div>
 +
 
     </div>
 
     </div>
  
−
     <!-- 滚动菜单栏jQuery -->
+
     <!-- 侧边 -->
−
     <script src="jquery.js" type="text/javascript"></script>
+
     <div class="cebian">
−
    <script>
+
      <!-- 滚动菜单栏 -->
−
         $(function () {
+
      <a class="daohangyi" href="https://2018.igem.org/Team:HZAU-China/Safety">
−
            var AllHet = $(window).height();
+
        <span class="biaoti">Safety</span>
−
            var mainHet = $('.floatCtro').height();
+
         <span class="xsjPic"><img src="https://static.igem.org/mediawiki/2018/7/7c/T--HZAU-China--ysj.svg" alt=""></span>
−
            var fixedTop = (AllHet - mainHet) / 2
+
      </a>
−
            // $('div.floatCtro').css({top:fixedTop+'px'});
+
      <a class="daohangyi" href="https://2018.igem.org/Team:HZAU-China/Human_Practices">
−
            $('div.floatCtro p').click(function () {
+
        <span class="biaoti">Human Practices</span>
−
                var ind = $('div.floatCtro p').index(this) + 1;
+
        <span class="xsjPic"><img src="https://static.igem.org/mediawiki/2018/7/7c/T--HZAU-China--ysj.svg" alt=""></span>
−
                var topVal = $('#float0' + ind).offset().top;
+
      </a>
−
                $('body,html').animate({ scrollTop: topVal }, 1000)
+
      <div class="daohangyi">
−
            })
+
        <span class="biaoti">Public Engagement</span>
−
            $('div.floatCtro a').click(function () {
+
        <span class="xsjPic"><img src="https://static.igem.org/mediawiki/2018/8/8d/T--HZAU-China--xjt.svg" alt=""></span>
−
                $('body,html').animate({ scrollTop: 0 }, 1000)
+
      </div>
−
            })
+
      <div class="floatCtro">
−
            $(window).scroll(scrolls)
+
        <p class="daohanger">Public Survey</p>
−
            scrolls()
+
        <p class="daohanger">The Report</p>
−
            function scrolls() {
+
        <p class="daohanger">Presentation to New Students</p>
−
                var f1, f2, f3, bck;
+
        <p class="daohanger">Science Blog</p>
−
                var fixRight = $('div.floatCtro p');
+
        <a>
−
                var blackTop = $('div.floatCtro a')
+
          <span>Back&nbsp;to&nbsp;Top</span>
−
                var sTop = $(window).scrollTop();
+
        </a>
−
                fl = $('#float01').offset().top;
+
      </div>
−
                f2 = $('#float02').offset().top;
+
      <div class="daohangyi" style="height:20px">
−
                f3 = $('#float03').offset().top;
+
      </div>
 +
      <!-- 滚动菜单栏 -->
 +
    </div>
 +
  </div>
  
−
                if (sTop <= f2 - 100) {
+
  <!-- 滚动菜单栏jQuery -->
−
                    blackTop.fadeOut(300).css('display', 'none')
+
  <script src="jquery.js" type="text/javascript"></script>
−
                }
+
  <script>
−
                else {
+
    $(function () {
−
                    blackTop.fadeIn(300).css('display', 'block')
+
      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, f3, f4, bck;
 +
        var fixRight = $('div.floatCtro p');
 +
        var blackTop = $('div.floatCtro a')
 +
        var sTop = $(window).scrollTop();
 +
        fl = $('#float01').offset().top;
 +
        f2 = $('#float02').offset().top;
 +
        f3 = $('#float03').offset().top;
 +
        f4 = $('#float04').offset().top;
  
−
                if (sTop >= fl) {
+
        if (sTop <= f2 - 100) {
−
                    fixRight.eq(0).addClass('cur').siblings().removeClass('cur');
+
          blackTop.fadeOut(300).css('display', 'none')
−
                }
+
        }
−
                if (sTop >= f2 - 100) {
+
        else {
−
                    fixRight.eq(1).addClass('cur').siblings().removeClass('cur');
+
          blackTop.fadeIn(300).css('display', 'block')
−
                }
+
        }
−
                if (sTop >= f3 - 100) {
+
 
−
                    fixRight.eq(2).addClass('cur').siblings().removeClass('cur');
+
        if (sTop >= fl) {
−
                }
+
          fixRight.eq(0).addClass('cur').siblings().removeClass('cur');
 +
        }
 +
        if (sTop >= f2 - 100) {
 +
          fixRight.eq(1).addClass('cur').siblings().removeClass('cur');
 +
        }
 +
        if (sTop >= f3 - 100) {
 +
          fixRight.eq(2).addClass('cur').siblings().removeClass('cur');
 +
        }
 +
        if (sTop >= f4 - 100) {
 +
          fixRight.eq(3).addClass('cur').siblings().removeClass('cur');
 +
        }
  
−
            }
+
      }
−
        })
+
    })
−
    </script>
+
  </script>
−
    <!-- 滚动菜单栏jQuery -->
+
  <!-- 滚动菜单栏jQuery -->
  
 
</body>
 
</body>
  
 
</html>
 
</html>

Latest revision as of 03:28, 18 October 2018

All fear comes from the unknown. We live in a world where advanced science and high technology keep making progress. It is also a world where we all live under asymmetric information from time to time. The asymmetric information, which in our case mostly means professional knowledge, is causing inappropriate panic towards emerging fields like AI and GMO among the public, and some even believe the world would end if we keep developing such technologies. Fear and doubt can be good things which lead us to think profoundly, but also harmful if we refuse to think objectively. We thought that everyone could make better decisions with more information or knowledge, however, we also learned that the ability to comprehend new information decreases with age. So, combining our 2018 project, we decided to offer a little help to those who needs cancer-related information in a more lucid way to express, and we wanted to answer their questions in person for the best effects. We believe if anyone could be the communicating bridge between the public and advanced science, is we college students, since we have the right resource, the right cause and enthusiasm.

Public Survey

To acquire a detailed understanding about the public attitude towards our project，a questionnaire was designed based on two documents (see also Safety for more information). The questionnaire was spread through Internet, and a total of 1036 pieces were received.

The Report

1. 26.2 % people we inquired are afraid of cancer, while more people worry about cancer occasionally. Some do not care about cancer and think it will not appear around. Overall, a large proportion (73.8%) do not panic about cancer.

2. Nowadays, government propaganda and media reports have reduced people's fear of cancer. Regardless of the diverse resources of data，only about 40% people felt quite fearful about cancer.

3. 70% people are fearful of cancer because of the high mortality rate and the pain of losing their loved ones. But in contrast, the high cost of treatments is not the largest fear for them.

4. Most people learn about cancer mainly by WeChat Moments and subscriptions, some by communicating with friends and families.

5. According to the means people learn about cancer, those who collect information by communicating with friends or families are easier to feel scared of cancer while those who get professional information from scientific papers hardly feel so.

6. In terms of age, middle-aged participants feel more panic about cancer while the youth fear less.

7. People who are not engaged in biological or medical fields are easier to get panic about cancer.

8. The majority of those who learn about cancer mainly by chatting with others, generally show ignorance or disappointment about China’s current anticarcinogen developing speed.

9. 55% respondents showed ignorance or disappointment about China’s anticarcinogen developing speed. What’s more, all of those who expressed firm opposition to the Salmonella targeting method belong to that 55%.

10. Many participants actually hold the expectation to the Salmonella curing idea. The strongest hope was to avoid healthy tissue damages, the second was the clearance of Salmonella to avoid infection.

11. From the result, 92.1% people felt a professional platform in which they can obtain specialized knowledge could help them reduce their worries about new technologies. This is also from where we learned that the idea of a science blog may actually has its market.

(questionnaire design, statistical results and statistical methods can be downloaded here)

Presentation to New Students

At the beginning of this new school year, we gave a presentation to the newly enrolled students of College of Life Science and Technology, and Department of Bioinformatics. The aim was to increase their interests in life science, provide them with basic knowledge of synthetic biology, and introduce our projects to them. The presentation was broadcasted live through Internet video ; comments and attentions are both acquired.

Science Blog

In analyzing the information obtained from the questionnaires and presentation feedbacks, we believed that establishing a science blog about cancer by college students can be both insightful and practical. Our blog includes three sections: a brief introduction of cancer, cancer treatments, and basic aspects of synthetic biology. We kept answering the questions in the comment area, and we truly hope that one day, this idea will spread, when college students could be organized systematically in order to help people with the answers that couldn’t be acquired by simply searching keywords.

Safety Human Practices
Public Engagement

Public Survey

The Report

Presentation to New Students

Science Blog

Back to Top