Difference between revisions of "Template:NAU-CHINA/header"
| Line 14: | Line 14: | ||
* { | * { | ||
box-sizing: border-box; | box-sizing: border-box; | ||
| + | font-size:18px; | ||
} | } | ||
body {margin:0;padding:0;} | body {margin:0;padding:0;} | ||
| Line 164: | Line 165: | ||
} | } | ||
| − | + | ||
| − | + | ||
| − | + | ||
</style> | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
| − | <div id="LOGObg"></div> | + | <div id="LOGObg"></div> |
| − | <a href="https://2018.igem.org/Team:NAU-CHINA"> | + | <a href="https://2018.igem.org/Team:NAU-CHINA"> |
| − | + | <img id="LOGO" src="https://static.igem.org/mediawiki/2018/4/4d/T--NAU-CHINA--MOSFET_LOGO.png" /> | |
| − | </a> | + | </a> |
| − | <div class="menu"> | + | <div class="menu"> |
| − | + | <ul> | |
| − | + | <li> | |
| − | + | <a href="#">TEAM<span class="caret"></span></a> | |
| − | + | <ul> | |
| − | + | <li><a href="https://2018.igem.org/Team:NAU-CHINA/Team_members">Team members</a></li> | |
| − | + | <li><a href="https://2018.igem.org/Team:NAU-CHINA/Collaborations">Collaborations</a></li> | |
| − | + | <li><a href="https://2018.igem.org/Team:NAU-CHINA/Attributions">Attributions</a></li> | |
| − | + | </ul> | |
| − | + | </li> | |
| − | + | <li> | |
| − | + | <a href="#">PROJECT<span class="caret"></span></a> | |
| − | + | <ul> | |
| − | + | <li><a href="https://2018.igem.org/Team:NAU-CHINA/Overview">Overview</a></li> | |
| − | + | <li><a href="https://2018.igem.org/Team:NAU-CHINA/Design">Design</a></li> | |
| − | + | <li><a href="https://2018.igem.org/Team:NAU-CHINA/InterLab">InterLab</a></li> | |
| − | + | <li><a href="https://2018.igem.org/Team:NAU-CHINA/Protocols">Protocols</a></li> | |
| − | + | <li><a href="https://2018.igem.org/Team:NAU-CHINA/Application_prospects">Application Prospects</a></li> | |
| − | + | </ul> | |
| − | + | </li> | |
| − | + | <li> | |
| − | + | <a href="#">RESULTS<span class="caret"></span></a> | |
| − | + | <ul> | |
| − | + | <li><a href="https://2018.igem.org/Team:NAU-CHINA/Demonstrate">Demonstrate</a></li> | |
| − | + | <li><a href="https://2018.igem.org/Team:NAU-CHINA/Parts">Parts</a></li> | |
| − | + | </ul> | |
| − | + | </li> | |
| − | + | <li> | |
| − | + | <a href="#">MODEL<span class="caret"></span></a> | |
| − | + | <ul> | |
| − | + | <li><a href="https://2018.igem.org/Team:NAU-CHINA/Model">Overview</a></li> | |
| − | + | <li><a href="https://2018.igem.org/Team:NAU-CHINA/Model Details">Model Interpretation</a></li> | |
| − | + | <li><a href="https://2018.igem.org/Team:NAU-CHINA/Auxiliary Understanding">Auxiliary Understanding</a></li> | |
| − | + | </ul> | |
| − | + | </li> | |
| − | + | <li><a href="https://2018.igem.org/Team:NAU-CHINA/Software">iGEMCloud</a> </li> | |
| − | + | <li> | |
| − | + | <a href="#">HUMAN PRACTICES<span class="caret"></span></a> | |
| − | + | <ul> | |
| − | + | <li><a href="https://2018.igem.org/Team:NAU-CHINA/Human_Practices">Overview</a></li> | |
| − | + | <li><a href="https://2018.igem.org/Team:NAU-CHINA/Public_Engagement">Public Engagement</a></li> | |
| − | + | </ul> | |
| − | + | </li> | |
| − | + | <li> | |
| − | + | <a href="https://2018.igem.org/Team:NAU-CHINA/Safety">SAFETY</a> | |
| − | + | </li> | |
| − | + | <li><a href="https://2018.igem.org/Team:NAU-CHINA/Notebook">NOTEBOOK</a></li> | |
| Line 228: | Line 227: | ||
| − | + | </ul> | |
| − | </div> | + | </div> |
| + | <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" | ||
| + | y="0px" viewBox="0 0 865 316" style="enable-background:new 0 0 865 316;" xml:space="preserve"> | ||
| + | <polyline id="XMLID_7_" style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" points=" | ||
| + | 773.577,209.06 773.577,181.005 791.092,181.005 791.092,209.01 802.388,209.01 802.449,188.686 813.671,183.11 824.892,188.686 | ||
| + | 824.892,209.06 831.424,209.01 831.424,184.511 " /> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | <polyline id="XMLID_75_" style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" points=" | |
| − | + | 38.85,162.04 85.307,208.273 773.577,209.06 " /> | |
| − | var l = $(window).width(); | + | |
| + | |||
| + | |||
| + | <polyline id="XMLID_23_" style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" points=" | ||
| + | 848.939,157.965 848.939,209.01 831.424,209.01 " /> | ||
| + | |||
| + | |||
| + | |||
| + | <polyline id="XMLID_6_" style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;" points=" | ||
| + | 629.313,191.179 534.577,191.179 498.289,208.273 " /> | ||
| + | |||
| + | |||
| + | |||
| + | <circle id="XMLID_5_" style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" cx="636.125" cy="191.179" r="5.754" /> | ||
| + | |||
| + | |||
| + | |||
| + | <circle id="XMLID_21_" style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" cx="849.14" cy="152.212" r="5.754" /> | ||
| + | |||
| + | |||
| + | |||
| + | <line id="XMLID_4_" style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;" x1="181.745" y1="196.864" x2="248.412" y2="196.864" /> | ||
| + | |||
| + | |||
| + | |||
| + | <line id="XMLID_3_" style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;" x1="221.996" y1="220.53" x2="358.412" y2="220.53" /> | ||
| + | |||
| + | |||
| + | |||
| + | <circle id="XMLID_2_" style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" cx="364.165" cy="220.53" r="5.754" /> | ||
| + | |||
| + | |||
| + | |||
| + | <line id="XMLID_15_" style="fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;" x1="38.85" y1="13.418" x2="38.85" y2="244.708" /> | ||
| + | |||
| + | |||
| + | |||
| + | <path id="XMLID_14_" style="fill:none;stroke:#000000;stroke-miterlimit:10;" d="M38.1,243.167 | ||
| + | c15.123,0,27.382,12.259,27.382,27.382c0,15.123-12.259,27.382-27.382,27.382s-27.382-12.259-27.382-27.382 | ||
| + | c0-2.704,0.392-5.317,1.122-7.785" /> | ||
| + | |||
| + | |||
| + | |||
| + | <path id="XMLID_13_" style="fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;" d="M56.745,277.209 | ||
| + | c-3.679,10.297-15.008,15.662-25.305,11.984c-10.297-3.679-15.662-15.008-11.984-25.305c3.679-10.297,15.008-15.662,25.305-11.984 | ||
| + | c1.841,0.658,3.525,1.56,5.028,2.658" /> | ||
| + | |||
| + | |||
| + | |||
| + | <path id="XMLID_12_" style="fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;" d="M38.1,243.167 | ||
| + | c15.123,0,27.382,12.259,27.382,27.382c0,15.123-12.259,27.382-27.382,27.382s-27.382-12.259-27.382-27.382 | ||
| + | c0-2.704,0.392-5.317,1.122-7.785" /> | ||
| + | |||
| + | |||
| + | |||
| + | <path id="XMLID_11_" style="fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;" d="M38.484,256.98 | ||
| + | c7.494,0.212,13.397,6.458,13.185,13.952c-0.212,7.494-6.458,13.397-13.952,13.185c-7.494-0.212-13.397-6.458-13.185-13.952 | ||
| + | c0.038-1.34,0.269-2.629,0.665-3.842" /> | ||
| + | |||
| + | |||
| + | |||
| + | <line id="XMLID_10_" style="fill:none;stroke:#000000;stroke-miterlimit:10;" x1="49.275" y1="254.531" x2="53.475" y2="248.397" /> | ||
| + | |||
| + | |||
| + | |||
| + | <line id="XMLID_9_" style="fill:none;stroke:#000000;stroke-miterlimit:10;" x1="46.477" y1="252.666" x2="49.574" y2="247.094" /> | ||
| + | |||
| + | |||
| + | |||
| + | <line id="XMLID_8_" style="fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;" x1="34.123" y1="265.51" x2="26.332" y2="255.64" /> | ||
| + | |||
| + | |||
| + | |||
| + | <circle id="XMLID_1_" style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" cx="813.661" cy="198.211" r="5.714" /> | ||
| + | |||
| + | |||
| + | |||
| + | </svg> | ||
| + | |||
| + | |||
| + | <div class="neiyebg"> | ||
| + | <script> | ||
| + | //调整内页背景图像尺寸至适合窗口 | ||
| + | var l = $(window).width(); //获取窗口尺寸 | ||
| + | //初始化尺寸 | ||
$("#globalWrapper").attr("width", l); | $("#globalWrapper").attr("width", l); | ||
$(".menu").css("width", l); | $(".menu").css("width", l); | ||
| − | // | + | //随Resize改变尺寸 |
| − | + | $(window).resize(function () { | |
| + | var l = $(window).width(); | ||
| + | $("#globalWrapper").attr("width", l); | ||
| + | $(".menu").css("width", l); | ||
| − | + | //窗口尺寸小于1200则切换为新导航模式 | |
| − | $( | + | if ($(window).width() < 1200) { |
| − | + | $(".menu").slideUp(1000); $(".menu").css('box-shadow', 'none'); | |
| − | + | $("#LOGO").css({ 'left': '30px', 'transition': '1s' }); $("#LOGObg").css({ 'left': '30px', 'transition': '1s' }); | |
| − | + | ||
| − | + | //$(".menu").css("display", "none"); | |
| − | + | //$("#LOGO").hide(); | |
| − | + | } | |
| + | else { | ||
| + | $(".menu").slideDown(500); $(".menu").css('box-shadow', 'gray 0px 3px 3px'); | ||
| + | $("#LOGO").css({ 'left': '115px', 'transition': '1s' }); $("#LOGObg").css({ 'left': '115px', 'transition': '1s' }); | ||
| + | |||
| + | //$(".menu").css("display", "block"); | ||
| + | //$("#LOGO").show(); | ||
| + | } | ||
| + | }); | ||
| + | </script> | ||
| + | </div> | ||
| + | <script> | ||
| + | $(document).ready(function () { | ||
| + | $('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub'); | ||
| + | //导航背景变色+下滑方法 | ||
| + | $(".menu > ul > li").hover(function () { | ||
| + | //$(this).css({"background-color":"#f0f0f0"}); | ||
| + | $(this).children("ul").stop(true, false).slideToggle(300); | ||
| + | }); | ||
| + | //背景颜色还原+下拉菜单消失 | ||
| + | $(".menu > ul > li").mouseleave(function () { | ||
| + | //$(this).css({"background-color":"#fff"}); | ||
| + | $(this).children("ul").hide(); | ||
| + | }); | ||
| + | }); | ||
| + | </script> | ||
| + | <script> | ||
| + | $(document).ready(function () { | ||
| + | $(".personalBox img").attr({ "height": "600px" }); | ||
| + | var colors = ['red', 'orange', 'yellow', 'green', 'wheat', 'blue', 'purple'] | ||
| + | var color1 = colors[parseInt(Math.random() * 7)]; | ||
| + | var color2 = colors[parseInt(Math.random() * 7)]; | ||
| + | var color3 = colors[parseInt(Math.random() * 7)]; | ||
| + | var color4 = colors[parseInt(Math.random() * 7)]; | ||
| − | + | $('#XMLID_5_').css('fill', color1); | |
| − | + | $('#XMLID_21_').css('fill', color2); | |
| − | + | $('#XMLID_2_').css('fill', color3); | |
| − | }); | + | $('#XMLID_1_').css('fill', color4); |
| + | }); | ||
</script> | </script> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</body> | </body> | ||
</html> | </html> | ||
Revision as of 14:38, 16 October 2018
