Difference between revisions of "Team:HZAU-China"

Line 294: 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 40px 0 0;
+
             padding: 0px 3%;
−
            /* right: 2%; */
+
−
            /* top: 90px; */
+
−
             padding: 50px 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; */
+
 
         }
 
         }
  
Line 491: Line 482:
 
         }
 
         }
 
     </style>
 
     </style>
 +
    <!-- 样式CSS -->
 +
    <style>
 +
        #anniu {
 +
      /* position: relative; */
 +
      /* top: 80%; */
 +
      /* transition: top 0.2s; */
 +
      /* left: 5%; */
 +
      /* margin: 0; */
 +
    }
 +
 +
    #anniu>img {
 +
      height: auto;
 +
    }
 +
 +
    #anniu:hover {
 +
      /* top: 180px; */
 +
    }
 +
 +
    .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);
 +
      }
 +
    }
 +
 +
    @-webkit-keyframes mymove {
 +
      from {}
 +
      to {
 +
        transform: rotate(360deg);
 +
      }
 +
    }
 +
 +
    @-o-keyframes mymove {
 +
      from {}
 +
      to {
 +
        transform: rotate(360deg);
 +
      }
 +
    }
 +
 +
    @keyframes mymove_2 {
 +
      from {}
 +
      to {
 +
        transform: rotate(-360deg);
 +
      }
 +
    }
 +
 +
    @-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>
 +
  
 
</head>
 
</head>
Line 497: Line 573:
 
     <!-- 导航栏 -->
 
     <!-- 导航栏 -->
 
     <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>
−
                    <a class="item" href="https://2018.igem.org/Team:HZAU-China/Notebook">Notebook</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">
−
                    <a class="nav_head" href="#">
+
                <a class="nav_head" href="#">
−
                        <span>Drylab</span>
+
                    <span>Drylab</span>
−
                        <span class="xjtPic"></span>
+
                    <span class="xjtPic"></span>
−
                    </a>
+
                </a>
−
                    <a class="item" href="https://2018.igem.org/Team:HZAU-China/Model">Model</a>
+
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Model">Model</a>
−
                    <a class="item" href="https://2018.igem.org/Team:HZAU-China/Software">Software</a>
+
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Software">Software</a>
−
                </li>
+
            </li>
−
                <li class="hiLight longName">
+
            <li class="hiLight longName">
−
                    <a class="nav_head" href="#">
+
                <a class="nav_head" href="#">
−
                        <span>Human&nbsp;Practices</span>
+
                    <span>Human&nbsp;Practices</span>
−
                        <span class="xjtPic"></span>
+
                    <span class="xjtPic"></span>
−
                    </a>
+
                </a>
−
                    <a class="item" href="https://2018.igem.org/Team:HZAU-China/Safety">Safety</a>
+
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Safety">Safety</a>
−
                    <a class="item" href="https://2018.igem.org/Team:HZAU-China/Human_Practices">Human Practices</a>
+
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Human_Practices">Human Practices</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/Public_Engagement">Public Engagement</a>
−
                </li>
+
            </li>
−
                <li class="hiLight shortName">
+
            <li class="hiLight shortName">
−
                    <a class="nav_head" href="#">
+
                <a class="nav_head" href="#">
−
                        <span>About Us</span>
+
                    <span>About Us</span>
−
                        <span class="xjtPic"></span>
+
                    <span class="xjtPic"></span>
−
                    </a>
+
                </a>
−
                    <a class="item" href="https://2018.igem.org/Team:HZAU-China/Team">Team</a>
+
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Team">Team</a>
−
                    <a class="item" href="https://2018.igem.org/Team:HZAU-China/Attributions">Attributions</a>
+
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Attributions">Attributions</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/Collaborations">Collaborations</a>
−
                </li>
+
            </li>
−
                <li class="hiLight shortName">
+
            <li class="hiLight shortName">
−
                    <a class="nav_head" href="#">
+
                <a class="nav_head" href="#">
−
                        <span>Parts</span>
+
                    <span>Parts</span>
−
                        <span class="xjtPic"></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/Basic_Part">Basic</a>
−
                    <a class="item" href="https://2018.igem.org/Team:HZAU-China/Composite_Part">Composite</a>
+
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Composite_Part">Composite</a>
−
                </li>
+
            </li>
−
            </ul>
+
        </ul>
−
            <div class="shade"></div>
+
        <div class="shade"></div>
 
     </nav>
 
     </nav>
 
     <!-- 内容 -->
 
     <!-- 内容 -->
 
     <div class="neirong clearfix">
 
     <div class="neirong clearfix">
 
         <!-- 正文 -->
 
         <!-- 正文 -->
−
         <div class="zhengwen">
+
 
−
             <div align="center" style="margin-left: 8%"><img style="margin:0 auto; width:100% "src="img/home01.png" alt=""></div>
+
         <div id="float01" class="cur">
−
             <div align="center"><img style="margin:0 auto; width:100% "src="img/home02.png" alt=""></div>
+
             <div style="width: 70%; margin: 0px auto">
 +
                <img style="margin:0 auto; width:100% " src="https://static.igem.org/mediawiki/2018/e/e2/T--HZAU-China--home01.png" alt="">
 +
            </div>
 +
             <div id="home02" style="width: 80%; margin: 0px auto">
 +
                <div class="xuanzhuan" style="width: 20%; margin: 0px auto">
 +
                    <a id="anniu" href="#home02">
 +
                        <img src="https://static.igem.org/mediawiki/2018/1/15/T--HZAU-China--cell1.jpg" width=100% id="aimage">
 +
                    </a>
 +
                </div>
 +
                <img style="margin:0 auto; width:100% " src="https://static.igem.org/mediawiki/2018/a/ab/T--HZAU-China--home02.jpg" 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>

Revision as of 22:30, 17 October 2018