Difference between revisions of "Team:HZAU-China"

 
(31 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
{{HZAU-2017}}
+
{{HZAU-China}}
 
<html>
 
<html>
  
 
<head>
 
<head>
 
   <meta charset="UTF-8">
 
   <meta charset="UTF-8">
−
  <title>HZAU-China</title>
+
   <style>
−
   <style type="text/css">
+
 
     body {
 
     body {
 
       background-color: rgb(249, 228, 137);
 
       background-color: rgb(249, 228, 137);
 
     }
 
     }
  
−
   
 
 
     #content {
 
     #content {
−
      padding: 0px;
 
−
      width: 100%;
 
−
      margin-top: 0px;
 
−
      margin-left: 0px;
 
 
       background-color: rgb(249, 228, 137);
 
       background-color: rgb(249, 228, 137);
 
     }
 
     }
  
−
   
 
 
     div.background_page {
 
     div.background_page {
 
       transition: opacity 1s;
 
       transition: opacity 1s;
 
       -webkit-transition: opacity 1s;
 
       -webkit-transition: opacity 1s;
 +
    }
 +
 +
    .fourC_div {
 +
      width: 100%;
 +
      margin: 48px auto 0 auto;
 
     }
 
     }
  
 
     .fourC {
 
     .fourC {
 
       width: 100%;
 
       width: 100%;
−
       min-width: 950px;
+
       height: auto;
−
       margin-top: 0px;
+
    }
 +
 
 +
 
 +
    #anniu {
 +
      position: relative;
 +
      top: 70px;
 +
      transition: top 0.2s;
 +
      left: 50%;
 +
       margin: 0 0 0 -50px;
 +
    }
 +
 
 +
    #anniu>img {
 +
      height: 100px;
 +
    }
 +
 
 +
    #anniu:hover {
 +
      top: 90px;
 
     }
 
     }
  
 
     .di {
 
     .di {
 
       width: 100%;
 
       width: 100%;
−
      min-width: 950px;
 
 
       position: relative;
 
       position: relative;
 
       top: 600px;
 
       top: 600px;
 +
      margin: -350px auto 0 auto;
 +
      vertical-align: middle;
 
     }
 
     }
−
 
−
   
 
  
 
     #rongqi p {
 
     #rongqi p {
Line 49: Line 62:
 
     .zhanshiqu {
 
     .zhanshiqu {
 
       position: relative;
 
       position: relative;
−
      top: 400px;
 
 
     }
 
     }
  
 
     /*-- 轮播图主体样式-- */
 
     /*-- 轮播图主体样式-- */
 +
 +
    .bianda {
 +
      width: 1200px;
 +
      margin: 300px auto 0 auto;
 +
    }
  
 
     #rongqi {
 
     #rongqi {
 
       width: 950px;
 
       width: 950px;
−
       height: 600px;
+
       height: 570px;
−
       margin: 20px auto;
+
       margin: 0 auto;
 
       border-radius: 5px;
 
       border-radius: 5px;
 
       overflow: hidden;
 
       overflow: hidden;
Line 67: Line 84:
 
     .shiying {
 
     .shiying {
 
       width: 950px;
 
       width: 950px;
−
       height: 600px;
+
       height: 570px;
 
     }
 
     }
  
Line 101: Line 118:
 
     #rongqi span {
 
     #rongqi span {
 
       display: inline-block;
 
       display: inline-block;
−
       width: 15px;
+
       width: 50px;
−
       height: 10px;
+
       height: 22px;
−
       margin: 0 3px;
+
       margin: 0 10px;
−
       border-radius: 5px;
+
       border-radius: 11px;
 
       background: white;
 
       background: white;
 
       transition: width 0.3s;
 
       transition: width 0.3s;
Line 110: Line 127:
  
 
     #rongqi span.yundong {
 
     #rongqi span.yundong {
−
       width: 25px;
+
       width: 78px;
 
       background: #A08989;
 
       background: #A08989;
 
     }
 
     }
Line 153: Line 170:
 
     }
 
     }
  
−
     @-webkit-keyframes mymove
+
    @-moz-keyframes mymove {
−
     /*Safari and Chrome*/
+
      from {}
 +
      to {
 +
        transform: rotate(360deg);
 +
      }
 +
    }
 +
 
 +
     @-webkit-keyframes mymove {
 +
      from {}
 +
      to {
 +
        transform: rotate(360deg);
 +
      }
 +
     }
  
−
      {
+
    @-o-keyframes mymove {
 
       from {}
 
       from {}
 
       to {
 
       to {
Line 170: Line 198:
 
     }
 
     }
  
−
     @-webkit-keyframes mymove_2
+
    @-moz-keyframes mymove_2 {
−
     /*Safari and Chrome*/
+
      from {}
 +
      to {
 +
        transform: rotate(-360deg);
 +
      }
 +
    }
 +
 
 +
     @-webkit-keyframes mymove_2 {
 +
      from {}
 +
      to {
 +
        transform: rotate(-360deg);
 +
      }
 +
     }
  
−
      {
+
    @-o-keyframes mymove_2 {
 
       from {}
 
       from {}
 
       to {
 
       to {
Line 223: Line 262:
 
       -webkit-animation: mymove 10s infinite;
 
       -webkit-animation: mymove 10s infinite;
 
       animation-timing-function: linear;
 
       animation-timing-function: linear;
−
       background: url(https://static.igem.org/mediawiki/2017/f/fb/HZAU_2017_gear_1.png);
+
       background: url(https://static.igem.org/mediawiki/2017/c/c0/T--HZAU-China--gear.png);
 
       background-size: 250px 250px;
 
       background-size: 250px 250px;
 
       background-repeat: no-repeat;
 
       background-repeat: no-repeat;
 
       background-size: cover;
 
       background-size: cover;
 
       z-index: -1;
 
       z-index: -1;
 +
    }
 +
 +
    #tiaozhuan {
 +
      position: absolute;
 +
      top: -135px;
 
     }
 
     }
  
Line 237: Line 281:
 
       margin: 0 50%;
 
       margin: 0 50%;
 
       width: 1020px;
 
       width: 1020px;
−
       height: 660px;
+
       height: 630px;
 
       left: -510px;
 
       left: -510px;
 
       z-index: 1;
 
       z-index: 1;
Line 244: Line 288:
 
     .frame_tu {
 
     .frame_tu {
 
       width: 1020px;
 
       width: 1020px;
−
       height: 660px;
+
       height: 630px;
 
     }
 
     }
 
   </style>
 
   </style>
Line 250: Line 294:
  
 
<body>
 
<body>
−
 
+
   <div class="fourC_div">
−
   <div class="fourC">
+
     <img class="fourC" src="https://static.igem.org/mediawiki/2017/8/8d/T--HZAU-China--4C.gif">
−
     <img class="fourC" src="https://static.igem.org/mediawiki/2017/e/eb/HZAU_2017_4C_1.png">
+
     <div>
−
  </div>
+
       <a id="anniu" href="#tiaozhuan">
−
  <div class="zhanshiqu">
+
        <img src="https://static.igem.org/mediawiki/2017/7/7e/T--HZAU-China--arrow.gif">
−
    <!-- 大小齿轮们 -->
+
      </a>
−
     <div class="hezi">
+
−
       <div class="chilun_1"></div>
+
−
      <div class="chilun_2"></div>
+
−
      <div class="chilun_3"></div>
+
 
     </div>
 
     </div>
−
     <div class="frame">
+
  </div>
−
       <img class="frame_tu" src="https://static.igem.org/mediawiki/2017/2/23/HZAU_2017_frame_1.png" />
+
  <div class="bianda">
−
    </div>
+
     <div class="zhanshiqu">
−
    <div id="rongqi">
+
       <!-- 大小齿轮们 -->
−
      <!-- 插入轮播的图片们 -->
+
      <div class="hezi">
−
      <img class="yundong shiying" src="https://static.igem.org/mediawiki/2017/4/43/HZAU_2017_luhuan1_1.png" />
+
        <div id="tiaozhuan"></div>
−
      <img class="shiying" src="https://static.igem.org/mediawiki/2017/f/f5/HZAU_2017_luhuan2_1.png" />
+
        <div class="chilun_1"></div>
−
      <img class="shiying" src="https://static.igem.org/mediawiki/2017/f/fd/HZAU_2017_luhuan3_1.png" />
+
        <div class="chilun_2"></div>
−
      <!-- 插入轮播的页码们 -->
+
        <div class="chilun_3"></div>
−
      <div>
+
      </div>
−
        <span class="yundong" name="0"></span>
+
      <div class="frame">
−
        <span name="1"></span>
+
        <img class="frame_tu" src="https://static.igem.org/mediawiki/2017/1/17/T--HZAU-China--frame.png" />
−
        <span name="2"></span>
+
      </div>
 +
      <div id="rongqi">
 +
        <!-- 插入轮播的图片们 -->
 +
        <img class="yundong shiying" src="https://static.igem.org/mediawiki/2017/6/64/T--HZAU-China--confirm2.png" />
 +
        <img class="shiying" src="https://static.igem.org/mediawiki/2017/4/4a/T--HZAU-China--confirm3.png" />
 +
        <img class="shiying" src="https://static.igem.org/mediawiki/2017/8/88/T--HZAU-China--confirm4.png" />
 +
        <!-- 插入轮播的页码们 -->
 +
        <div style="top: 543px;">
 +
          <span class="yundong" name="0"></span>
 +
          <span name="1"></span>
 +
          <span name="2"></span>
 +
        </div>
 +
        <!-- 插入图片的描述们 -->
 +
        <p class="yundong"></p>
 +
        <p></p>
 +
        <p></p>
 
       </div>
 
       </div>
−
      <!-- 插入图片的描述们 -->
 
−
      <p class="yundong"></p>
 
−
      <p></p>
 
−
      <p></p>
 
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
   <div>
 
   <div>
−
     <img class="di" src="https://static.igem.org/mediawiki/2017/6/63/HZAU_2017_di_1.png">
+
     <img class="di" src="https://static.igem.org/mediawiki/2017/c/c7/T--HZAU-China--di.png">
 
   </div>
 
   </div>
 
</body>
 
</body>
Line 319: Line 370:
  
 
     //每2s调用changeSlide函数进行图片轮播
 
     //每2s调用changeSlide函数进行图片轮播
−
     var slideon = setInterval(changeSlide, 4000);
+
     var slideon = setInterval(changeSlide, 60000);
  
 
     rongqi.onmouseover = function () {
 
     rongqi.onmouseover = function () {
Line 325: Line 376:
 
     }
 
     }
 
     rongqi.onmouseout = function () {
 
     rongqi.onmouseout = function () {
−
       slideon = setInterval(changeSlide, 4000); //当鼠标移出时重新开始轮播事件
+
       slideon = setInterval(changeSlide, 60000); //当鼠标移出时重新开始轮播事件
 
     }
 
     }
  

Latest revision as of 01:31, 2 November 2017