Difference between revisions of "Template:HZAU-China"

Line 1: Line 1:
 
<html>
 
<html>
−
   
+
 
 
<head>
 
<head>
−
<meta charset="UTF-8">
+
    <meta charset="UTF-8">
−
<style type="text/css">
+
    <style type="text/css">
−
#sideMenu,
+
        #sideMenu,
 
         #top_title,
 
         #top_title,
 
         #team_submenu {
 
         #team_submenu {
Line 36: Line 36:
 
             height: 16px;
 
             height: 16px;
 
         }
 
         }
−
.nav{
 
−
    position: absolute;
 
−
    top: 0px;
 
−
    background-color: #43b14b;
 
−
    position: relative;
 
−
    color: #ffffff;
 
−
    min-width: 1000px;
 
−
    height: 64px;
 
−
    box-shadow: 0 1px 3px #CCCCCC;
 
−
}
 
  
−
.nav a{
+
        * {
−
    display: block;
+
            margin: 0;
−
    font-family: Arial,Verdana,Sans-serif;
+
            padding: 0;
−
    text-decoration: none;
+
            list-style: none;
−
}
+
            text-decoration: none;
−
.nav .shade{
+
        }
−
    position: absolute;
+
−
    width: 100%;
+
−
    height: 170px;
+
−
    top: 64px;
+
−
    left: 0;
+
−
    z-index: 99;
+
−
    background-color: #eeeeee;
+
−
    opacity: 0.9;
+
−
    filter: alpha(opacity=90);
+
−
    box-shadow: 0 5px 15px #CCCCCC;
+
−
    display: none;
+
−
}
+
−
.nav .nav_list{
+
−
    position: absolute;
+
−
    top: 0;
+
−
    left: 40%;
+
−
    margin: 0 0 0 0;
+
−
    z-index: 100;
+
−
    padding: 0;
+
−
    list-style: none;
+
−
    width: 910px;
+
−
    overflow: hidden;
+
−
    height: 64px;
+
−
}
+
−
.nav .nav_list>li{
+
−
    padding: 0;
+
−
    float: left;
+
−
    margin: 0;
+
−
    text-align: center;
+
−
    height: 264px;
+
−
}
+
−
.nav .nav_list .shortName{
+
−
    width: 120px;
+
−
}
+
−
.nav .nav_list .longName{
+
−
    width: 180px;
+
−
}
+
−
.nav .nav_head{
+
−
    height: 64px;
+
−
    line-height: 64px;
+
−
    color: #ffffff;
+
−
    font-size: 16px;
+
−
    background-color: #43b14b;
+
−
}
+
−
.nav .nav_head .icon{
+
−
    font-size: 18px;
+
−
}
+
−
.nav .item{
+
−
    font-size: 16px;
+
−
    height: 40px;
+
−
    line-height: 40px;
+
−
    color: #333333;
+
−
    position: relative;
+
−
}
+
−
.nav .shortName .item:hover:after{
+
−
    content: '';
+
−
    display: block;
+
−
    position: absolute;
+
−
    width: 80px;
+
−
    height: 2px;
+
−
    bottom: 5px;
+
−
    left: 20px;
+
−
    background-color: #f51720;
+
−
}
+
−
.nav .longName .item:hover:after{
+
−
    content: '';
+
−
    display: block;
+
−
    position: absolute;
+
−
    width: 120px;
+
−
    height: 2px;
+
−
    bottom: 5px;
+
−
    left: 30px;
+
−
    background-color: #f51720;
+
−
}
+
−
.nav .nav_list:hover{
+
−
    height: 234px;
+
−
    transition: height 0.3s;
+
−
}
+
−
.nav .nav_list:hover + .shade{
+
−
    display: block;
+
−
}
+
−
.nav .nav_list>li.highlight:hover{
+
−
    background-color: #ffffff;
+
−
}
+
−
.nav .nav_list>li:hover .nav_head,.nav .nav_list>li.active .nav_head{
+
−
    background-color: #006d33;
+
−
}
+
  
−
</style>
+
        .nav {
 +
            position: absolute;
 +
            top: 0px;
 +
            margin: 0 8px;
 +
            position: relative;
 +
            color: #ffffff;
 +
            min-width: 1000px;
 +
            height: 64px;
 +
            box-shadow: 0 1px 3px #CCCCCC;
 +
            border-radius: 3px;
 +
            background-color: #1fa67a;
 +
            background-image: url(bgimg3.png);
 +
        }
 +
 
 +
        .nav a {
 +
            display: block;
 +
            font-family: Arial, Verdana, Sans-serif;
 +
            text-decoration: none;
 +
        }
 +
 
 +
        .nav .shade {
 +
            position: absolute;
 +
            width: 100%;
 +
            height: 170px;
 +
            top: 64px;
 +
            left: 0;
 +
            z-index: 99;
 +
            background-color: #eeeeee;
 +
            box-shadow: 0 5px 15px #CCCCCC;
 +
            display: none;
 +
            border-bottom-left-radius: 3px;
 +
            border-bottom-right-radius: 3px;
 +
        }
 +
 
 +
        .nav .nav_list {
 +
            position: absolute;
 +
            top: 0;
 +
            left: 40%;
 +
            margin: 0 0 0 0;
 +
            z-index: 100;
 +
            padding: 0;
 +
            list-style: none;
 +
            width: 910px;
 +
            overflow: hidden;
 +
            height: 64px;
 +
        }
 +
 
 +
        .nav .nav_list>li {
 +
            padding: 0;
 +
            float: left;
 +
            margin: 0;
 +
            text-align: center;
 +
            height: 264px;
 +
        }
 +
 
 +
        .nav .nav_list .shortName {
 +
            width: 120px;
 +
        }
 +
 
 +
        .nav .nav_list .longName {
 +
            width: 180px;
 +
        }
 +
 
 +
        .nav .nav_head {
 +
            height: 64px;
 +
            line-height: 64px;
 +
            color: #ffffff;
 +
            font-size: 16px;
 +
        }
 +
 
 +
        .nav .nav_first {
 +
            margin-right: 5px;
 +
        }
 +
 
 +
        .nav .hiLight .xsjPic {
 +
            display: inline-block;
 +
            width: 10px;
 +
            height: 10px;
 +
            vertical-align: middle;
 +
            background-size: 100% 100%;
 +
            background-image: url("xsj.svg")
 +
        }
 +
 
 +
        .nav .hiLight .xjtPic {
 +
            display: inline-block;
 +
            width: 10px;
 +
            height: 10px;
 +
            vertical-align: middle;
 +
            background-size: 100% 100%;
 +
            background-image: url("xjt.svg")
 +
        }
 +
 
 +
        .nav .item {
 +
            font-size: 16px;
 +
            height: 40px;
 +
            line-height: 40px;
 +
            color: #333333;
 +
            position: relative;
 +
        }
 +
 
 +
        .nav .shortName .item:before {
 +
            content: '';
 +
            display: block;
 +
            position: absolute;
 +
            width: 80px;
 +
            height: 1px;
 +
            bottom: 5px;
 +
            left: 20px;
 +
            background-color: #CCCCCC;
 +
        }
 +
 
 +
        .nav .shortName .item:hover:after {
 +
            content: '';
 +
            display: block;
 +
            position: absolute;
 +
            width: 80px;
 +
            height: 2px;
 +
            bottom: 5px;
 +
            left: 20px;
 +
            background-color: #f51720;
 +
        }
 +
 
 +
        .nav .longName .item:before {
 +
            content: '';
 +
            display: block;
 +
            position: absolute;
 +
            width: 120px;
 +
            height: 1px;
 +
            bottom: 5px;
 +
            left: 30px;
 +
            background-color: #CCCCCC;
 +
        }
 +
 
 +
        .nav .longName .item:hover:after {
 +
            content: '';
 +
            display: block;
 +
            position: absolute;
 +
            width: 120px;
 +
            height: 2px;
 +
            bottom: 5px;
 +
            left: 30px;
 +
            background-color: #f51720;
 +
        }
 +
 
 +
        .nav .nav_list:hover {
 +
            height: 234px;
 +
            transition: height 0.3s;
 +
        }
 +
 
 +
        .nav .nav_list:hover+.shade {
 +
            display: block;
 +
        }
 +
 
 +
        .nav .nav_list>li.hiLight:hover {
 +
            background-color: #ffffff;
 +
        }
 +
 
 +
        .nav .nav_list>li:hover .nav_head,
 +
        .nav .nav_list>li.active .nav_head {
 +
            background-color: #0B3C38;
 +
        }
 +
    </style>
 
</head>
 
</head>
 +
 
<body>
 
<body>
−
<nav class="nav">
+
    <nav class="nav">
−
    <ul class="nav_list">
+
        <ul class="nav_list">
−
        <li class="highlight 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 class="nav_first">Project</span>
−
            </a>
+
                    <span class="xsjPic"></span>
−
            <a href="https://2018.igem.org/Team:HZAU-China/Description" class="item">Description</a>
+
                </a>
−
            <a href="https://2018.igem.org/Team:HZAU-China/Design" class="item">Design</a>
+
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Description">Description</a>
−
            <a href="https://2018.igem.org/Team:HZAU-China/Results" class="item">Results</a>
+
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Design">Design</a>
−
            <a href="https://2018.igem.org/Team:HZAU-China/Demonstrate" class="item">Demonstrate</a>
+
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Results">Results</a>
−
        </li>
+
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Demonstrate">Demonstrate</a>
−
        <li class="highlight shortName">
+
            </li>
−
            <a class="nav_head" href="https://2018.igem.org/Team:HZAU-China/Experiments">
+
            <li class="hiLight shortName">
−
                <span>Wetlab</span>
+
                <a class="nav_head" href="https://2018.igem.org/Team:HZAU-China/Experiments">
−
            </a>
+
                    <span class="nav_first">Wetlab</span>
−
            <a href="https://2018.igem.org/Team:HZAU-China/Experiments" class="item">Experiments</a>
+
                    <span class="xjtPic"></span>
−
            <a href="https://2018.igem.org/Team:HZAU-China/Improve" class="item">Improve</a>
+
                </a>
−
            <a href="https://2018.igem.org/Team:HZAU-China/InterLab" class="item">Interlab</a>
+
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Experiments">Experiments</a>
−
        </li>
+
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Improve">Improve</a>
−
        <li class="highlight shortName">
+
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/InterLab">Interlab</a>
−
            <a class="nav_head" href="https://2018.igem.org/Team:HZAU-China/Model">
+
            </li>
−
                <span>Drylab</span>
+
            <li class="hiLight shortName">
−
            </a>
+
                <a class="nav_head" href="https://2018.igem.org/Team:HZAU-China/Model">
−
            <a href="https://2018.igem.org/Team:HZAU-China/Model" class="item">Model</a>
+
                    <span class="nav_first">Drylab</span>
−
            <a href="https://2018.igem.org/Team:HZAU-China/Software" class="item">Software</a>
+
                    <span class="xjtPic"></span>
−
        </li>
+
                </a>
−
        <li class="highlight longName">
+
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Model">Model</a>
−
            <a class="nav_head" href="https://2018.igem.org/Team:HZAU-China/Human_Practices">
+
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Software">Software</a>
−
                <span>Human &nbsp;Practice</span>
+
            </li>
−
            </a>
+
            <li class="hiLight longName">
−
            <a href="https://2018.igem.org/Team:HZAU-China/Public_Engagement" class="item">Public Engagement</a>
+
                <a class="nav_head" href="https://2018.igem.org/Team:HZAU-China/Human_Practices">
−
        </li>
+
                    <span class="nav_first">Human &nbsp;Practices</span>
−
        <li class="highlight shortName">
+
                    <span class="xjtPic"></span>
−
            <a class="nav_head" href="https://2018.igem.org/Team:HZAU-China/Team">
+
                </a>
−
                <span>Team</span>
+
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Human_Practices">Human Practices</a>
−
            </a>
+
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Public_Engagement">Public Engagement</a>
−
            <a href="https://2018.igem.org/Team:HZAU-China/Team" class="item">Members</a>
+
            </li>
−
            <a href="https://2018.igem.org/Team:HZAU-China/Attributions" class="item">Attributions</a>
+
            <li class="hiLight shortName">
−
            <a href="https://2018.igem.org/Team:HZAU-China/Collaborations" class="item">Collaborations</a>
+
                <a class="nav_head" href="https://2018.igem.org/Team:HZAU-China/Team">
−
        </li>
+
                    <span class="nav_first">Team</span>
−
        <li class="highlight shortName">
+
                    <span class="xjtPic"></span>
−
            <a class="nav_head" href="https://2018.igem.org/Team:HZAU-China/Parts">
+
                </a>
−
                <span>Parts</span>
+
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Team">Members</a>
−
            </a>
+
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Attributions">Attributions</a>
−
            <a href="https://2018.igem.org/Team:HZAU-China/Basic_Part" class="item">Basic</a>
+
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Collaborations">Collaborations</a>
−
            <a href="https://2018.igem.org/Team:HZAU-China/Composite_Part" class="item">Composite</a>
+
            </li>
−
             <a href="https://2018.igem.org/Team:HZAU-China/Part_Collection" class="item">Collection</a>
+
            <li class="shortName">
−
        </li>
+
                <a class="nav_head" href="https://2018.igem.org/Team:HZAU-China/Parts">
−
        <li class="shortName">
+
                    <span class="nav_first">Parts</span>
−
            <a class="nav_head" href="https://2018.igem.org/Team:HZAU-China/Safety">
+
                </a>
−
                <span>Safety</span>
+
             </li>
−
            </a>
+
            <li class="shortName">
−
        </li>  
+
                <a class="nav_head" href="https://2018.igem.org/Team:HZAU-China/Safety">
−
    </ul>
+
                    <span>Safety</span>
−
    <div class="shade"></div>
+
                </a>
−
</nav>
+
            </li>
 +
        </ul>
 +
        <div class="shade"></div>
 +
    </nav>
 
</body>
 
</body>
 +
 
</html>
 
</html>

Revision as of 12:24, 18 September 2018