Difference between revisions of "Template:HZAU-China"

 
(80 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
 +
 
<head>
 
<head>
−
<meta charset="UTF-8">
+
    <meta charset="UTF-8">
−
<style type="text/css">
+
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
−
    #sideMenu,
+
    <style type="text/css">
−
    #top_title,
+
        #sideMenu,
−
    #team_submenu {
+
        #top_title,
−
    display: none;
+
        #team_submenu{
−
}
+
            display: none;
−
    #content {
+
        }
−
    padding: 0px;
+
−
    width: 100%;
+
−
    margin-top: 0px;
+
−
    margin-left: 0px;
+
−
}
+
−
    #bodyContent h1,
+
−
    #bodyContent h2,
+
−
    #bodyContent h3,
+
−
    #bodyContent h4,
+
−
    #bodyContent h5 {
+
−
    margin-bottom: 0px;
+
−
}
+
  
−
    #team_name {
+
        #HQ_page p {
−
    display: none
+
            display: none;
−
}
+
        }
  
−
    .global_wrapper {
+
        #content {
−
    padding: 0px 0px 0px 0px;
+
            padding: 0px;
−
}
+
            width: 100%;
 +
            margin-top: 0px;
 +
            margin-left: 0px;
 +
        }
  
−
    #top_menu_14 {
+
        #bodyContent h1,
−
    height: 16px;
+
        #bodyContent h2,
−
}  
+
        #bodyContent h3,
 +
        #bodyContent h4,
 +
        #bodyContent h5 {
 +
            margin-bottom: 0px;
 +
        }
  
−
.nav{
+
        #team_name {
−
    background-color: #43b14b;
+
            display: none
−
    position: relative;
+
        }
−
    color: #ffffff;
+
−
    min-width: 1000px;
+
−
    height: 64px;
+
−
    box-shadow: 0 5px 15px #CCCCCC;
+
−
}
+
−
.nav a{
+
−
    display: block;
+
−
    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>
+
        .global_wrapper {
 +
            padding: 0px 0px 0px 0px;
 +
        }
 +
 
 +
        #top_menu_14 {
 +
            height: 16px;
 +
        }
 +
 
 +
        * {
 +
            margin: 0;
 +
            padding: 0;
 +
            list-style: none;
 +
            list-style-type: none;
 +
            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: relative;
 +
            color: #ffffff;
 +
            height: 64px;
 +
        }
 +
 
 +
        .logo-daohang {
 +
            height: 64px;
 +
            left: 10%;
 +
            float: left;
 +
            position: relative;
 +
        }
 +
 
 +
        .daohang a {
 +
            display: block;
 +
            text-decoration: none;
 +
        }
 +
 
 +
        .daohang .shade {
 +
            position: absolute;
 +
            width: 100%;
 +
            height: 160px;
 +
            top: 64px;
 +
            left: 0;
 +
            z-index: 1;
 +
            background-color: #EEEEEE;
 +
            opacity: 0.9;
 +
            filter: alpha(opacity=90);
 +
            box-shadow: 0 5px 15px #CCCCCC;
 +
            display: none;
 +
            border-bottom: #ffffff solid 1px;
 +
            border-bottom: rgba(255, 255, 255, 0.3) solid 1px;
 +
        }
 +
 
 +
        .daohang .caidan {
 +
            position: absolute;
 +
            top: 0;
 +
            right: 10%;
 +
            margin: 0;
 +
            z-index: 2;
 +
            padding: 0;
 +
            list-style: none;
 +
            width: 730px;
 +
            float: right;
 +
            overflow: hidden;
 +
            height: 64px;
 +
        }
 +
 
 +
        .daohang .caidan>li {
 +
            padding: 0;
 +
            float: left;
 +
            margin: 0;
 +
            text-align: center;
 +
            height: 224px;
 +
        }
 +
 
 +
        .daohang .shortName {
 +
            width: 110px;
 +
        }
 +
 
 +
        .daohang .longName {
 +
            width: 170px;
 +
        }
 +
 
 +
        .daohang .nav_head {
 +
            height: 64px;
 +
            line-height: 64px;
 +
            color: #ffffff;
 +
            font-size: 16px !important;
 +
        }
 +
 
 +
        .daohang .xjtPic {
 +
            display: inline-block;
 +
            width: 10px;
 +
            height: 10px;
 +
            vertical-align: middle;
 +
            background-size: 100% 100%;
 +
            background-image: url("https://static.igem.org/mediawiki/2018/8/8d/T--HZAU-China--xjt.svg")
 +
        }
 +
 
 +
        .daohang .item {
 +
            font-size: 16px;
 +
            height: 40px;
 +
            line-height: 40px;
 +
            color: #333333;
 +
            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 {
 +
            content: '';
 +
            display: block;
 +
            position: absolute;
 +
            width: 80px;
 +
            height: 1px;
 +
            bottom: 5px;
 +
            left: 15px;
 +
            background-color: #CCCCCC;
 +
        }
 +
 
 +
        .daohang .shortName .item:hover:after {
 +
            content: '';
 +
            display: block;
 +
            position: absolute;
 +
            width: 80px;
 +
            height: 3px;
 +
            bottom: 5px;
 +
            left: 15px;
 +
            background-color: #f51720;
 +
        }
 +
 
 +
        .daohang .longName .item:before {
 +
            content: '';
 +
            display: block;
 +
            position: absolute;
 +
            width: 130px;
 +
            height: 1px;
 +
            bottom: 5px;
 +
            left: 20px;
 +
            background-color: #CCCCCC;
 +
        }
 +
 
 +
        .daohang .longName .item:hover:after {
 +
            content: '';
 +
            display: block;
 +
            position: absolute;
 +
            width: 130px;
 +
            height: 3px;
 +
            bottom: 5px;
 +
            left: 20px;
 +
            background-color: #f51720;
 +
        }
 +
 
 +
        @media screen and (max-width: 1000px) {
 +
            .logo-daohang {
 +
                left: 5%;
 +
            }
 +
 
 +
            .daohang .caidan {
 +
                right: 0;
 +
            }
 +
        }
 +
 
 +
        @media screen and (max-width: 880px) {
 +
 
 +
            .daohang .caidan {
 +
                width: 100%;
 +
            }
 +
 
 +
            .logo-daohang {
 +
                display: none;
 +
            }
 +
 
 +
            .daohang .shortName {
 +
                width: 15vw;
 +
            }
 +
 
 +
            .daohang .longName {
 +
                width: 25vw;
 +
            }
 +
 
 +
            .daohang .shortName .item:before {
 +
                display: none;
 +
            }
 +
 
 +
            .daohang .shortName .item:hover:after {
 +
                display: none;
 +
            }
 +
 
 +
            .daohang .longName .item:before {
 +
                display: none;
 +
 
 +
            }
 +
 
 +
            .daohang .longName .item:hover:after {
 +
                display: none;
 +
            }
 +
        }
 +
    </style>
 
</head>
 
</head>
 +
 
<body>
 
<body>
−
<nav class="nav">
+
    <nav class="daohang">
−
    <ul class="nav_list">
+
        <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"
−
        <li class="highlight shortName">
+
                class="logo-daohang"></a>
−
            <a class="nav_head" href="https://2018.igem.org/Team:HZAU-China">
+
        <ul class="caidan">
−
                <span>Project</span>
+
            <li class="hiLight shortName">
−
            </a>
+
                <a class="nav_head" href="#">
−
            <a href="https://2018.igem.org/Team:HZAU-China/Description" class="item">Description</a>
+
                    <span>Project</span>
−
            <a href="https://2018.igem.org/Team:HZAU-China/Design" class="item">Design</a>
+
                    <span class="xjtPic"></span>
−
            <a href="https://2018.igem.org/Team:HZAU-China/Results" class="item">Results</a>
+
                </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/Description">Description</a>
−
        </li>
+
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Design">Design</a>
−
        <li class="highlight shortName">
+
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Results">Results</a>
−
            <a class="nav_head" href="https://2018.igem.org/Team:HZAU-China/Experiments">
+
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Demonstrate">Demonstrate</a>
−
                <span>Wetlab</span>
+
            </li>
−
            </a>
+
            <li class="hiLight shortName">
−
            <a href="https://2018.igem.org/Team:HZAU-China/Experiments" class="item">Experiments</a>
+
                <a class="nav_head" href="#">
−
            <a href="https://2018.igem.org/Team:HZAU-China/Improve" class="item">Improve</a>
+
                    <span>Wetlab</span>
−
            <a href="https://2018.igem.org/Team:HZAU-China/InterLab" class="item">Interlab</a>
+
                    <span class="xjtPic"></span>
−
        </li>
+
                </a>
−
        <li class="highlight shortName">
+
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Experiments">Experiments</a>
−
            <a class="nav_head" href="https://2018.igem.org/Team:HZAU-China/Model">
+
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Improve">Improve</a>
−
                <span>Drylab</span>
+
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/InterLab">Interlab</a>
−
            </a>
+
            </li>
−
            <a href="https://2018.igem.org/Team:HZAU-China/Model" class="item">Model</a>
+
            <li class="hiLight shortName">
−
            <a href="https://2018.igem.org/Team:HZAU-China/Software" class="item">Software</a>
+
                <a class="nav_head" href="#">
−
        </li>
+
                    <span>Drylab</span>
−
        <li class="highlight longName">
+
                    <span class="xjtPic"></span>
−
            <a class="nav_head" href="https://2018.igem.org/Team:HZAU-China/Human_Practices">
+
                </a>
−
                <span>Human &nbsp;Practice</span>
+
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Model">Model</a>
−
            </a>
+
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Software">Software</a>
−
            <a href="https://2018.igem.org/Team:HZAU-China/Public_Engagement" class="item">Public Engagement</a>
+
            </li>
−
        </li>
+
            <li class="hiLight longName">
−
        <li class="highlight shortName">
+
                <a class="nav_head" href="#">
−
            <a class="nav_head" href="https://2018.igem.org/Team:HZAU-China/Team">
+
                    <span>Human&nbsp;Practices</span>
−
                <span>Team</span>
+
                    <span class="xjtPic"></span>
−
            </a>
+
                </a>
−
            <a href="https://2018.igem.org/Team:HZAU-China/Team" class="item">Members</a>
+
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Safety">Safty</a>
−
            <a href="https://2018.igem.org/Team:HZAU-China/Attributions" class="item">Attributions</a>
+
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Human_Practices">Human Practices</a>
−
            <a href="https://2018.igem.org/Team:HZAU-China/Collaborations" class="item">Collaborations</a>
+
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Public_Engagement">Public Engagement</a>
−
        </li>
+
            </li>
−
        <li class="highlight shortName">
+
            <li class="hiLight shortName">
−
            <a class="nav_head" href="https://2018.igem.org/Team:HZAU-China/Parts">
+
                <a class="nav_head" href="#">
−
                <span>Parts</span>
+
                    <span>About Us</span>
−
            </a>
+
                    <span class="xjtPic"></span>
−
            <a href="https://2018.igem.org/Team:HZAU-China/Basic_Part" class="item">Basic</a>
+
                </a>
−
            <a href="https://2018.igem.org/Team:HZAU-China/Composite_Part" class="item">Composite</a>
+
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Team">Team</a>
−
            <a href="https://2018.igem.org/Team:HZAU-China/Part_Collection" class="item">Collection</a>
+
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Attributions">Attributions</a>
−
        </li>
+
                <a class="item" href="https://2018.igem.org/Team:HZAU-China/Collaborations">Collaborations</a>
−
        <li class="shortName">
+
            </li>
−
            <a class="nav_head" href="https://2018.igem.org/Team:HZAU-China/Safety">
+
            <li class="shortName">
−
                <span>Safety</span>
+
                <a class="nav_head" href="https://2018.igem.org/Team:HZAU-China/Parts">
−
            </a>
+
                    <span>Parts</span>
−
        </li>  
+
                </a>
−
    </ul>
+
            </li>
−
    <div class="shade"></div>
+
        </ul>
−
</nav>
+
        <div class="shade"></div>
 +
    </nav>
 +
 
 
</body>
 
</body>
 +
 
</html>
 
</html>

Latest revision as of 22:18, 30 September 2018