Difference between revisions of "Template:CSU CHINA"

Line 35: Line 35:
 
         }
 
         }
 
         .dropdown-menu{
 
         .dropdown-menu{
−
             margin-top: -2px !important;
+
             margin-top: -2px;
 +
        }
 +
        body{
 +
            min-height: 100%;
 +
        }
 +
        footer{
 +
            width: 100%;
 +
            background-color: rgb(52,58,64);
 +
            bottom: 0px;
 +
        }
 +
        .socialmedia{
 +
            height: 50px; width: 50px; margin:20px;
 +
        }
 +
        #lab{
 +
            -webkit-filter: grayscale(100%);
 +
            filter: grayscale(100%);
 
         }
 
         }
−
 
 
         #top_title{ display:none; }
 
         #top_title{ display:none; }
 
         #content{
 
         #content{
Line 49: Line 63:
 
             padding: 8px 8px 8px 8px;
 
             padding: 8px 8px 8px 8px;
 
         }
 
         }
 +
 
     </style>
 
     </style>
 +
 +
    <script type="text/javascript">
 +
        // 若文档高度小于窗口高度，赞助框位于页面最底部
 +
        $(document).ready(function(){
 +
            if(screen.height>=$(document).height()){
 +
                $("footer").css("position","fixed");
 +
            }
 +
            $(".dropdown").hover(function() {
 +
                stop(true,true);
 +
                $('.dropdown-menu', this).slideToggle("fast");
 +
            });
 +
            // 滚动渐隐
 +
            $(window).scroll(function(){
 +
                if ($(document).scrollTop() > 50)
 +
                    $("#navigator").removeClass("bg-dark").addClass("trans");
 +
                else
 +
                    $("#navigator").removeClass("trans").addClass("bg-dark");
 +
            });
 +
            // 图标变色
 +
            $("#facebook").mouseenter(function(){
 +
                $(this).attr("src","../iGEM/img/facebook.png");
 +
            });
 +
            $("#facebook").mouseleave(function(){
 +
                $(this).attr("src","../iGEM/img/greyfacebook.png");
 +
            });
 +
            $("#twitter").mouseenter(function(){
 +
                $(this).attr("src","../iGEM/img/twitter.png");
 +
            });
 +
            $("#twitter").mouseleave(function(){
 +
                $(this).attr("src","../iGEM/img/greytwitter.png");
 +
            });
 +
            $("#weibo").mouseenter(function(){
 +
                $(this).attr("src","../iGEM/img/weibo.png");
 +
            });
 +
            $("#weibo").mouseleave(function(){
 +
                $(this).attr("src","../iGEM/img/greyweibo.png");
 +
            });
 +
            $("#wechat").mouseenter(function(){
 +
                $(this).attr("src","../iGEM/img/wechat.png");
 +
            });
 +
            $("#wechat").mouseleave(function(){
 +
                $(this).attr("src","../iGEM/img/greywechat.png");
 +
            });
 +
        });
 +
    </script>
 
        
 
        
 
     <nav class="navbar navbar-expand-lg navbar-dark py-0 fixed-top bg-dark" id="navigator" >
 
     <nav class="navbar navbar-expand-lg navbar-dark py-0 fixed-top bg-dark" id="navigator" >
Line 64: Line 124:
 
                 </li>
 
                 </li>
 
                 <li class="nav-item dropdown">
 
                 <li class="nav-item dropdown">
−
                     <a class="nav-link dropdown-toggle" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">PROJECT</a>
+
                     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">PROJECT</a>
 
                     <div class="dropdown-menu  bg-light " aria-labelledby="navbarDropdown">
 
                     <div class="dropdown-menu  bg-light " aria-labelledby="navbarDropdown">
 
                         <a class="dropdown-item" href="">DESCRIPTION</a>
 
                         <a class="dropdown-item" href="">DESCRIPTION</a>
Line 72: Line 132:
 
                 </li>
 
                 </li>
 
                 <li class="nav-item dropdown">
 
                 <li class="nav-item dropdown">
−
                     <a class="nav-link dropdown-toggle" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">PARTS</a>
+
                     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">PARTS</a>
 
                     <div class="dropdown-menu  bg-light" aria-labelledby="navbarDropdown">
 
                     <div class="dropdown-menu  bg-light" aria-labelledby="navbarDropdown">
 
                         <a class="dropdown-item" href="#">BASIC PARTS</a>
 
                         <a class="dropdown-item" href="#">BASIC PARTS</a>
Line 83: Line 143:
 
                 </li>
 
                 </li>
 
                 <li class="nav-item dropdown">
 
                 <li class="nav-item dropdown">
−
                     <a class="nav-link dropdown-toggle" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">HUMAN PRACTICES</a>
+
                     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">HUMAN PRACTICES</a>
 
                     <div class="dropdown-menu  bg-light" aria-labelledby="navbarDropdown">
 
                     <div class="dropdown-menu  bg-light" aria-labelledby="navbarDropdown">
 
                         <a class="dropdown-item" href="/Team:CSU_CHINA/Human_Practices">INTERGRATED</a>
 
                         <a class="dropdown-item" href="/Team:CSU_CHINA/Human_Practices">INTERGRATED</a>
Line 92: Line 152:
 
                     <a class="nav-link" href="/Team:CSU_CHINA/Safety">SAFETY</a>
 
                     <a class="nav-link" href="/Team:CSU_CHINA/Safety">SAFETY</a>
 
                 </li>
 
                 </li>
−
                 <li class="nav-item dropdown">
+
                 <li class="nav-item">
−
                    <a class="nav-link dropdown-toggle" id="navbar_LAB" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">LAB</a>
+
                        <a class="nav-link" href="#">LAB</a>
−
                    <div class="dropdown-menu  bg-light" aria-labelledby="navbarDropdown">
+
−
                            <a class="dropdown-item" href="/Team:CSU_CHINA/LabTask">LABTASK</a>
+
−
                        <a class="dropdown-item" href="/Team:CSU_CHINA/Notebook">NOTEBOOK</a>
+
−
                        <a class="dropdown-item" href="/Team:CSU_CHINA/Protocols">POROYOCOLS</a>
+
−
                    </div>
+
 
                 </li>
 
                 </li>
 
                 <li class="nav-item dropdown">
 
                 <li class="nav-item dropdown">
−
                     <a class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">TEAM</a>
+
                     <a class="nav-link dropdown-toggle" href="" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">TEAM</a>
 
                     <div class="dropdown-menu  bg-light" aria-labelledby="navbarDropdown">
 
                     <div class="dropdown-menu  bg-light" aria-labelledby="navbarDropdown">
 
                         <a class="dropdown-item" href="/Team:CSU_CHINA/Collaborations" title="">COLLABORATIONS</a>
 
                         <a class="dropdown-item" href="/Team:CSU_CHINA/Collaborations" title="">COLLABORATIONS</a>
Line 114: Line 169:
 
         </div>
 
         </div>
 
     </nav>
 
     </nav>
−
     <!-- dropdown nav -->
+
 
−
    <script>
+
 
−
        $(document).ready(function() {
+
     <footer>
−
            // 滚动渐隐
+
        <div class="d-flex justify-content-center align-items-center float-left" style="height: 250px; width: 40%">
−
            $(window).scroll(function(){
+
            <div>  
−
                 if ($(document).scrollTop() > 50)
+
                <div class="row">     
−
                     $("#navigator").removeClass("bg-dark").addClass("trans");
+
                    <a href="https://www.facebook.com/chinacsu/" target="_black"><img src="../iGEM/img/greyfacebook.png" class="socialmedia" id="facebook"></a>
−
                 else
+
                    <a href="https://twitter.com/CsuIgem?lang=en" target="_black"><img src="../iGEM/img/greytwitter.png" class="socialmedia" id="twitter"></a>
−
                    $("#navigator").removeClass("trans").addClass("bg-dark");
+
                 </div>
−
             });
+
                <div class="row">
−
         });
+
                    <a href="https://weibo.com/u/6611358555" target="_black"><img src="../iGEM/img/greyweibo.png" class="socialmedia" id="weibo"></a>
−
     </script>
+
                     <a href="https://mp.weixin.qq.com/s?__biz=Mzg3MDEyNjc2NA==&mid=2247483686&idx=1&sn=32f656e6776e8c24f722bd7eefc63e98&chksm=ce93c4e5f9e44df39a0bf74c5174b14d121dbf5d29046df9e3821abb372cd91b795c72c094c5&mpshare=1&scene=23&srcid=&sharer_sharetime=1571401435492&sharer_shareid=239fbe2d71f52524d0bd016637b912af#rd" target="_black"><img src="../iGEM/img/greywechat.png" class="socialmedia" id="wechat"></a>
 +
                 </div>
 +
            </div>
 +
        </div>
 +
        <div class="float-right d-flex justify-content-center align-items-center" style="height: 250px; width: 60%;">
 +
            <img src="../iGEM/img/csu.png" style="height: 140px; margin-right: 20px">
 +
            <img src="../iGEM/img/lab.png" style="height: 100px; margin-right: 20px" id="lab">
 +
        </div>
 +
        <div class="d-flex justify-content-center" style="height: 50px; width: 100%">
 +
             <p style="color: grey;" class="text-center">CONTACT US:&nbsp;&nbsp;&nbsp;CSU_CHINA_iGEM@163.com&nbsp;&nbsp;&nbsp;or&nbsp;&nbsp;&nbsp;CSUigem2019@gmail.com<br>© 2018 COPYRIGHT: CSU-CHINA</p>
 +
         </div>
 +
     </footer>
  
 
</body>
 
</body>
  
 
</html>
 
</html>

Revision as of 05:47, 21 October 2019

CONTACT US:   CSU_CHINA_iGEM@163.com   or   CSUigem2019@gmail.com
© 2018 COPYRIGHT: CSU-CHINA