Difference between revisions of "Template:HZAU-China"

Revision as of 21:11, 30 September 2018 (view source)

ShuguangWang (Talk | contribs)

← Older edit

Revision as of 21:12, 30 September 2018 (view source)

ShuguangWang (Talk | contribs)

Newer edit →

Line 3:

<head>

−

<~~meta name~~="~~viewport~~" ~~content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">~~

+

−

~~<style~~>

+

#sideMenu,

#top_title,

Line 10:

Line 9:

display: none;

}

−

#content {

Line 46:

Line 44:

text-decoration: none;

}

−

~~body {~~

−

~~margin: 0;~~

−

~~padding: 0;~~

−

~~background-color: #F3F3F3;~~

−

~~font-size: 16px;~~

−

~~font-family: Arial, Verdana, Sans-serif;~~

−

~~letter-spacing: 0;~~

−

~~color: #FFFFFF;~~

−

}

.daohang {

−

~~background-color~~: ~~#323643~~;

+

position: absolute;

+

top: 0px;

+

margin: 0 8px;

+

width: 95%;

+

height: 64px;

+

margin: auto;

position: relative;

color: #ffffff;

−

~~height~~: ~~64px~~;

+

min-width: 1000px;

+

box-shadow: 0 1px 3px #CCCCCC;

+

border-radius: 3px;

+

background-color: #1fa67a;

+

background-image: url("https://static.igem.org/mediawiki/2018/7/7d/T--HZAU-China--bgimg0.png");

}

−

.logo-daohang {

+

.logo-daohang{

height: 64px;

left: 10%;

float: left;

position: relative;

−

}

−

~~@media screen and (max-width: 1000px) {~~

−

~~.logo-daohang {~~

−

~~left: 5%;~~

−

}

.daohang a {

display: block;

+

font-family: Arial, Verdana, Sans-serif;

text-decoration: none;

}

Line 85:

Line 77:

position: absolute;

width: 100%;

−

height: ~~160px~~;

+

height: 170px;

top: 64px;

left: 0;

−

z-index: 1;

+

z-index: 99;

−

background-color: #~~EEEEEE;~~

+

background-color: #eeeeee;

−

~~opacity: 0.9;~~

+

box-shadow: 0 1px 3px #CCCCCC;

−

~~filter: alpha(opacity=90)~~;

+

−

box-shadow: 0 ~~5px 15px~~ #CCCCCC;

+

display: none;

−

border-bottom: ~~#ffffff solid 1px~~;

+

border-bottom-left-radius: 3px;

−

border-bottom: ~~rgba(255, 255, 255, 0.3) solid 1px~~;

+

border-bottom-right-radius: 3px;

}

−

.daohang .~~caidan~~ {

+

.daohang .daohang_list {

position: absolute;

top: 0;

−

~~right~~: 10%;

+

left: 35%;

−

margin: 0;

+

margin: 0 0 0 0;

−

z-index: 2;

+

z-index: 100;

padding: 0;

−

~~list-style: none;~~

+

width: 65%;

−

width: ~~730px~~;

+

height: 64px;

−

~~float~~: ~~right~~;

+

overflow: hidden;

−

~~height: 64px;~~

+

−

}

+

−

+

−

~~@media screen and (max-width: 1000px) {~~

+

−

~~.daohang .caidan {~~

+

−

~~right: 0;~~

+

−

}

+

}

−

.daohang .~~caidan~~>li {

+

.daohang .daohang_list>li {

padding: 0;

float: left;

margin: 0;

−

~~width: 110px;~~

text-align: center;

−

height: ~~224px~~;

+

height: 264px;

}

−

.daohang .~~nav_head~~ {

+

.daohang .daohang_list .shortName {

+

width: 13%;

+

}

+

.daohang .daohang_list .longName {

+

width: 20%;

+

}

+

.daohang .daohang_list .dandian{

+

width:10%;

+

}

+

.daohang .daohang_head {

height: 64px;

line-height: 64px;

color: #ffffff;

−

font-size: 16px ~~!important~~;

+

font-size: 16px;

+

}

+

.daohang .daohang_first {

+

margin-right: 5px;

+

}

+

.daohang .hiLight .xsjPic {

+

display: inline-block;

+

width: 10px;

+

height: 10px;

+

vertical-align: middle;

+

background-size: 100% 100%;

+

background-image: url("https://static.igem.org/mediawiki/2018/6/63/T--HZAU-China--xsj.svg")

}

−

.daohang .xjtPic {

+

.daohang .hiLight .xjtPic {

display: inline-block;

width: 10px;

Line 144:

Line 151:

.daohang .item {

+

font-size: 16px;

height: 40px;

line-height: 40px;

Line 149:

Line 157:

position: relative;

}

−

~~.daohang .caidan:hover {~~

−

~~height: 264px;~~

−

~~transition: height 0.3s;~~

−

}

−

~~.daohang .caidan:hover+.shade {~~

−

~~display: block;~~

−

}

−

~~.daohang .caidan>li.hiLight:hover {~~

−

~~background-color: #ffffff;~~

−

}

−

~~.daohang .caidan>li:hover .nav_head {~~

−

~~background-color: #EA0D04;~~

−

}

−

~~.daohang .caidan>li:hover .item {}~~

−

.daohang .shortName .item:before {

Line 177:

Line 165:

height: 1px;

bottom: 5px;

−

left: ~~15px~~;

+

left: 20px;

background-color: #CCCCCC;

}

Line 188:

Line 176:

height: 2px;

bottom: 5px;

−

left: ~~15px~~;

+

left: 20px;

background-color: #f51720;

}

Line 196:

Line 184:

display: block;

position: absolute;

−

width: ~~130px~~;

+

width: 120px;

height: 1px;

bottom: 5px;

−

left: ~~20px~~;

+

left: 30px;

background-color: #CCCCCC;

}

Line 207:

Line 195:

display: block;

position: absolute;

−

width: ~~130px~~;

+

width: 120px;

height: 2px;

bottom: 5px;

−

left: ~~20px~~;

+

left: 30px;

background-color: #f51720;

+

}

+

.daohang .daohang_list:hover {

+

height: 234px;

+

transition: height 0.3s;

+

}

+

.daohang .daohang_list:hover+.shade {

+

display: block;

+

}

+

.daohang .daohang_list>li.hiLight:hover {

+

background-color: #ffffff;

+

}

+

.daohang .daohang_list>li:hover .daohang_head,

+

.daohang .daohang_list>li.active .daohang_head {

+

background-color: #0B3C38;

}

</style>

Line 218:

Line 224:

<body>

−

<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>

+

−

+

−

+

−

Project

+

Project

−

+

</a>

<a class="item" href="https://2018.igem.org/Team:HZAU-China/Description">Description</a>

Line 232:

Line 237:

</li>

−

+

−

Wetlab

+

Wetlab

</a>

Line 241:

Line 246:

</li>

−

+

−

Drylab

+

Drylab

</a>

Line 248:

Line 253:

<a class="item" href="https://2018.igem.org/Team:HZAU-China/Software">Software</a>

</li>

−

+

−

+

−

Human Practices

+

Human  Practices

</a>

−

~~<a class="item" href="https://2018.igem.org/Team:HZAU-China/Safety">Safty</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>

</li>

−

+

−

~~About Us~~

+

Team

</a>

Line 266:

Line 270:

<a class="item" href="https://2018.igem.org/Team:HZAU-China/Collaborations">Collaborations</a>

</li>

−

<li>

+

−

+

Parts

+

</a>

+

</li>

+

+

+

Safety

</a>

</li>

Line 274:

Line 283:

</nav>

−

</body>

</html>

@@ Line 3: / Line 3: @@
 <head>
      <meta charset="UTF-8">
-     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+     <style type="text/css">
-    <style>
          #sideMenu,
          #top_title,
@@ Line 10: / Line 9: @@
              display: none;
          }
          #content {
@@ Line 46: / Line 44: @@
              text-decoration: none;
          }
-        body {
-        margin: 0;
-        padding: 0;
-        background-color: #F3F3F3;
-        font-size: 16px;
-        font-family: Arial, Verdana, Sans-serif;
-        letter-spacing: 0;
-        color: #FFFFFF;
-        }
          .daohang {
-             background-color: #323643;
+             position: absolute;
+            top: 0px;
+            margin: 0 8px;
+            width: 95%;
+            height: 64px;
+            margin: auto;
              position: relative;
              color: #ffffff;
-             height: 64px;
+             min-width: 1000px;
+            box-shadow: 0 1px 3px #CCCCCC;
+            border-radius: 3px;
+            background-color: #1fa67a;
+            background-image:  url("https://static.igem.org/mediawiki/2018/7/7d/T--HZAU-China--bgimg0.png");
          }
-         .logo-daohang {
+         .logo-daohang{
              height: 64px;
              left: 10%;
              float: left;
              position: relative;
-        }
-        @media screen and (max-width: 1000px) {
-            .logo-daohang {
-                left: 5%;
-            }
          }
          .daohang a {
              display: block;
+            font-family: Arial, Verdana, Sans-serif;
              text-decoration: none;
          }
@@ Line 85: / Line 77: @@
              position: absolute;
              width: 100%;
-             height: 160px;
+             height: 170px;
              top: 64px;
              left: 0;
-             z-index: 1;
+             z-index: 99;
-             background-color: #EEEEEE;
+             background-color: #eeeeee;
-            opacity: 0.9;
+             box-shadow: 0 1px 3px #CCCCCC;
-            filter: alpha(opacity=90);
-             box-shadow: 0 5px 15px #CCCCCC;
              display: none;
-             border-bottom: #ffffff solid 1px;
+             border-bottom-left-radius: 3px;
-             border-bottom: rgba(255, 255, 255, 0.3) solid 1px;
+             border-bottom-right-radius: 3px;
          }
-         .daohang .caidan {
+         .daohang .daohang_list {
              position: absolute;
              top: 0;
-             right: 10%;
+             left: 35%;
-             margin: 0;
+             margin: 0 0 0 0;
-             z-index: 2;
+             z-index: 100;
              padding: 0;
-            list-style: none;
+             width: 65%;
-             width: 730px;
+             height: 64px;
-             float: right;
              overflow: hidden;
-             height: 64px;
-        }
-        @media screen and (max-width: 1000px) {
-            .daohang .caidan {
-                right: 0;
-            }
          }
-         .daohang .caidan>li {
+         .daohang .daohang_list>li {
              padding: 0;
              float: left;
              margin: 0;
-            width: 110px;
              text-align: center;
-             height: 224px;
+             height: 264px;
          }
-         .daohang .nav_head {
+         .daohang .daohang_list .shortName {
+            width: 13%;
+        }
+        .daohang .daohang_list .longName {
+            width: 20%;
+        }
+        .daohang .daohang_list .dandian{
+            width:10%;
+        }
+        .daohang .daohang_head {
              height: 64px;
              line-height: 64px;
              color: #ffffff;
-             font-size: 16px !important;
+             font-size: 16px;
+        }
+        .daohang .daohang_first {
+            margin-right: 5px;
+        }
+        .daohang .hiLight .xsjPic {
+            display: inline-block;
+            width: 10px;
+            height: 10px;
+            vertical-align: middle;
+            background-size: 100% 100%;
+            background-image: url("https://static.igem.org/mediawiki/2018/6/63/T--HZAU-China--xsj.svg")
          }
-         .daohang .xjtPic {
+         .daohang .hiLight .xjtPic {
              display: inline-block;
              width: 10px;
@@ Line 144: / Line 151: @@
          .daohang .item {
+            font-size: 16px;
              height: 40px;
              line-height: 40px;
@@ Line 149: / Line 157: @@
              position: relative;
          }
-        .daohang .caidan:hover {
-            height: 264px;
-            transition: height 0.3s;
-        }
-        .daohang .caidan:hover+.shade {
-            display: block;
-        }
-        .daohang .caidan>li.hiLight:hover {
-            background-color: #ffffff;
-        }
-        .daohang .caidan>li:hover .nav_head {
-            background-color: #EA0D04;
-        }
-        .daohang .caidan>li:hover .item {}
          .daohang .shortName .item:before {
@@ Line 177: / Line 165: @@
              height: 1px;
              bottom: 5px;
-             left: 15px;
+             left: 20px;
              background-color: #CCCCCC;
          }
@@ Line 188: / Line 176: @@
              height: 2px;
              bottom: 5px;
-             left: 15px;
+             left: 20px;
              background-color: #f51720;
          }
@@ Line 196: / Line 184: @@
              display: block;
              position: absolute;
-             width: 130px;
+             width: 120px;
              height: 1px;
              bottom: 5px;
-             left: 20px;
+             left: 30px;
              background-color: #CCCCCC;
          }
@@ Line 207: / Line 195: @@
              display: block;
              position: absolute;
-             width: 130px;
+             width: 120px;
              height: 2px;
              bottom: 5px;
-             left: 20px;
+             left: 30px;
              background-color: #f51720;
+        }
+        .daohang .daohang_list:hover {
+            height: 234px;
+            transition: height 0.3s;
+        }
+        .daohang .daohang_list:hover+.shade {
+            display: block;
+        }
+        .daohang .daohang_list>li.hiLight:hover {
+            background-color: #ffffff;
+        }
+        .daohang .daohang_list>li:hover .daohang_head,
+        .daohang .daohang_list>li.active .daohang_head {
+            background-color: #0B3C38;
          }
      </style>
@@ Line 218: / Line 224: @@
 <body>
      <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="daohang_list">
-         <ul class="caidan">
              <li class="hiLight shortName">
-                 <a class="nav_head" href="#">
+                 <a class="daohang_head" href="https://2018.igem.org/Team:HZAU-China">
-                     <span>Project</span>
+                     <span class="daohang_first">Project</span>
-                     <span class="xjtPic"></span>
+                     <span class="xsjPic"></span>
                  </a>
                  <a class="item" href="https://2018.igem.org/Team:HZAU-China/Description">Description</a>
@@ Line 232: / Line 237: @@
              </li>
              <li class="hiLight shortName">
-                 <a class="nav_head" href="#">
+                 <a class="daohang_head" href="https://2018.igem.org/Team:HZAU-China/Experiments">
-                     <span>Wetlab</span>
+                     <span class="daohang_first">Wetlab</span>
                      <span class="xjtPic"></span>
                  </a>
@@ Line 241: / Line 246: @@
              </li>
              <li class="hiLight shortName">
-                 <a class="nav_head" href="#">
+                 <a class="daohang_head" href="https://2018.igem.org/Team:HZAU-China/Model">
-                     <span>Drylab</span>
+                     <span class="daohang_first">Drylab</span>
                      <span class="xjtPic"></span>
                  </a>
@@ Line 248: / Line 253: @@
                  <a class="item" href="https://2018.igem.org/Team:HZAU-China/Software">Software</a>
              </li>
-             <li class="hiLight longName" style="width:170px;">
+             <li class="hiLight longName">
-                 <a class="nav_head" href="#">
+                 <a class="daohang_head" href="https://2018.igem.org/Team:HZAU-China/Human_Practices">
-                     <span>Human&nbsp;Practices</span>
+                     <span class="daohang_first">Human &nbsp;Practices</span>
                      <span class="xjtPic"></span>
                  </a>
-                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Safety">Safty</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>
              </li>
              <li class="hiLight shortName">
-                 <a class="nav_head" href="#">
+                 <a class="daohang_head" href="https://2018.igem.org/Team:HZAU-China/Team">
-                     <span>About Us</span>
+                     <span class="daohang_first">Team</span>
                      <span class="xjtPic"></span>
                  </a>
@@ Line 266: / Line 270: @@
                  <a class="item" href="https://2018.igem.org/Team:HZAU-China/Collaborations">Collaborations</a>
              </li>
-             <li>
+             <li class="dandian">
-                 <a class="nav_head" href="https://2018.igem.org/Team:HZAU-China/Parts">
+                 <a class="daohang_head" href="https://2018.igem.org/Team:HZAU-China/Parts">
                      <span>Parts</span>
+                </a>
+            </li>
+            <li class="dandian">
+                <a class="daohang_head" href="https://2018.igem.org/Team:HZAU-China/Safety">
+                    <span>Safety</span>
                  </a>
              </li>
@@ Line 274: / Line 283: @@
          <div class="shade"></div>
      </nav>
 </body>
 </html>