(96 intermediate revisions by 2 users not shown) | |||
Line 2: | Line 2: | ||
<html> | <html> | ||
<head> | <head> | ||
− | < | + | <meta charset="utf-8" /> |
− | + | <title>header</title> | |
− | </script> | + | <script src="https://code.jquery.com/jquery-3.3.1.js" |
− | <style type="text/css"> | + | integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" |
+ | crossorigin="anonymous"> | ||
+ | </script> | ||
+ | <style type="text/css"> | ||
+ | |||
+ | /*======================================================================================*/ | ||
+ | * { | ||
+ | box-sizing: border-box; | ||
+ | font-size:18px; | ||
+ | } | ||
+ | body {margin:0;padding:0;} | ||
+ | #LOGObg { | ||
+ | position:fixed; | ||
+ | top:22px; | ||
+ | left:115px; | ||
+ | width: 80px; | ||
+ | height: 80px; | ||
+ | border-radius: 50%; | ||
+ | background-color: white; | ||
+ | box-shadow: 0px 5px 30px gray; | ||
+ | } | ||
+ | #LOGO { | ||
+ | z-index: 999; | ||
+ | position: fixed; | ||
+ | top: 22px; | ||
+ | left: 115px; | ||
+ | width:80px; | ||
+ | } | ||
− | |||
− | |||
− | |||
− | + | .menu { | |
− | + | /*width: 100%;*/ | |
− | } | + | height:65px; |
+ | margin: 0; | ||
+ | /*align-content:center;*/ | ||
+ | padding: 20px 0 0 23%; | ||
+ | /*padding-right: 30px;*/ | ||
+ | font-family: 'Georgia','Goudy Old Style Regular',sans-serif !important; | ||
+ | font-size: 1.45em; | ||
+ | /*font-weight: bold;*/ | ||
+ | position: fixed; | ||
+ | top: 16px; | ||
+ | background:white; | ||
+ | box-shadow:gray 0px 3px 3px; | ||
+ | /*background: #e9e9e9;*/ | ||
+ | z-index:99; | ||
+ | } | ||
− | + | .caret { | |
− | + | display: inline-block; | |
− | } | + | width: 0; |
+ | height: 6px; | ||
+ | margin-left: 2px; | ||
+ | vertical-align:middle; | ||
+ | border-top: 4px dashed; | ||
+ | border-top: 4px solid\9; | ||
+ | border-right: 4px solid transparent; | ||
+ | border-left: 4px solid transparent; | ||
+ | } | ||
+ | .neiyebg { | ||
+ | position: relative; | ||
+ | top: 71px; | ||
+ | width: 100%; | ||
+ | z-index: -1; | ||
+ | /*height:200px;*/ | ||
+ | } | ||
+ | .menu > ul { | ||
+ | width: 100%; | ||
+ | list-style: none; | ||
+ | margin: 0 auto; | ||
+ | padding: 0; | ||
+ | position: relative; | ||
+ | box-sizing: border-box; | ||
+ | } | ||
+ | |||
+ | .menu > ul:before, .menu > ul:after { | ||
+ | content: ""; | ||
+ | display: table; | ||
+ | } | ||
− | .menu | + | .menu > ul:after { |
− | + | clear: both; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | } | + | |
+ | .menu > ul > li { | ||
+ | height:50px; | ||
+ | float: left; | ||
+ | /*background: #e9e9e9;*/ | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | } | ||
+ | /* | ||
+ | .menu > ul > li:hover { | ||
+ | background: #f0f0f0; | ||
+ | transition: linear 0.5s; | ||
+ | } | ||
+ | */ | ||
+ | .menu > ul > li a { | ||
+ | text-decoration: none; | ||
+ | padding: .5em 0.8em; | ||
+ | display: block; | ||
+ | } | ||
− | .menu > ul { | + | .menu > ul > li a:link, a:visited { |
− | + | color: black; | |
− | + | } | |
− | + | ||
− | + | .menu > ul > li > ul { | |
− | + | display: none; | |
− | + | width: 100%; | |
− | + | background-color: whitesmoke; | |
+ | position: absolute; | ||
+ | z-index: 99; | ||
+ | /*left: 0;*/ | ||
+ | margin: 0; | ||
+ | padding:0; | ||
+ | list-style: none; | ||
+ | box-sizing: border-box; | ||
+ | /*border-radius: 5px;*/ | ||
+ | border-radius:8px; | ||
− | } | + | } |
+ | /* | ||
+ | .menu > ul > li > ul:before, .menu > ul > li > ul:after { | ||
+ | content: ""; | ||
+ | display: table; | ||
+ | } | ||
+ | */ | ||
+ | /*.menu > ul > li > ul:after { | ||
+ | clear: both; | ||
+ | }*/ | ||
+ | /*通过JS添加类:normal-sub,为下拉子菜单的格式*/ | ||
+ | .menu > ul > li > ul.normal-sub { | ||
+ | width:12.5em; | ||
+ | /*width: 185px;*/ | ||
+ | left: auto; | ||
+ | top:50px; | ||
+ | } | ||
− | .menu > ul | + | .menu > ul > li > ul.normal-sub > li { |
− | + | width: 100%; | |
− | + | position: relative; | |
− | + | /*left:16px;*/ | |
− | } | + | } |
− | .menu > ul: | + | .menu > ul > li > ul.normal-sub > li:hover { |
− | + | color: white; | |
− | } | + | background-color: rgba(192,192,192,0.15); |
+ | } | ||
− | .menu > ul > li { | + | .menu > ul > li > ul.normal-sub > li a { |
− | + | border: 0; | |
− | + | padding: 0.7em 0; | |
− | + | margin: 0 0 0 16px; | |
− | + | } | |
− | } | + | svg { |
+ | position: relative; | ||
+ | top: -65px; | ||
+ | z-index: -99; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | </head> | ||
+ | <body> | ||
+ | <div id="LOGObg"></div> | ||
+ | <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> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | <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/Basic_Part">Basic Part</a></li> | ||
+ | <li><a href="https://2018.igem.org/Team:NAU-CHINA/Composite_Part">Composite Part</a></li> | ||
+ | <li><a href="https://2018.igem.org/Team:NAU-CHINA/Improve">Improved Parts</a></li> | ||
+ | <li><a href="https://2018.igem.org/Team:NAU-CHINA/Part_Collection">Part Collection</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 Illustration</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/IntegratedHP">Integrated HP</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> | ||
+ | </ul> | ||
+ | </div> | ||
− | |||
− | |||
− | |||
+ | <div id="banner"> | ||
+ | <img src="#"/> | ||
+ | </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 " /> | ||
− | |||
− | < | + | <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); | ||
+ | $(".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> | |
− | + | </html> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </ | + |
Latest revision as of 02:39, 18 October 2018