Difference between revisions of "Template:JiangnanU China/CSS"

(Replaced content with "<html> <style> </style> </html>")
 
(8 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
<style>
 
<style>
 +
@font-face {
 +
    font-family: 'moon';
 +
    src:url("https://static.igem.org/mediawiki/2019/6/61/T--JiangnanU_China--Moon2.0-Regular.otf");
 +
}
 +
h2{
 +
    font-family: moon,sans-serif;
 +
    color: #ffffff;
  
−
</style>
+
}
 +
body{
 +
    padding-top: 7px;
 +
    float: none;
 +
    margin: 0;
 +
}
 +
.List{
 +
    margin-right: 100px;
 +
}
 +
nav{ width:100%;
 +
    height:100px;
 +
    background-image:url("https://static.igem.org/mediawiki/2019/b/b0/T--JiangnanU_China--Banner_BG.jpg
 +
");
 +
    float: left;
 +
    position: relative;
 +
}
 +
nav ul{list-style:none;z-index: 1;}
 +
nav ul li:hover ul{ display:block}
 +
nav ul li:hover .chosen_bar{ display: block}
 +
nav ul li{ float:right; line-height:40px; text-align:center; position:relative;}
 +
 
 +
nav ul li ul{ position:absolute; display:none;background:rgb(0,19,86);padding: 0;margin: 0}
 +
nav ul li ul li{ float:none; line-height:30px; text-align:left; width:100%;}
 +
nav ul li ul li:hover{ background-color:#00b2ff;}
 +
nav ul li ul li a{ width:100%;white-space: nowrap;font-family: moon,serif;color: #ffffff;text-decoration:none;padding: 0 15px;}
 +
.menu{
 +
    margin-left: 50px;
 +
    width: auto;
 +
}
 +
.logo{
 +
    position: absolute;
 +
    width: 80px;
 +
    height: 80px;
 +
    z-index: 1;
 +
    top:10px;
 +
    left: 28px;
 +
}
 +
.logo_text{
 +
    font-size: 24px;
 +
    position: absolute;
 +
    left:126px;
 +
    top:14px;
 +
    color: #ffffff;
 +
    font-family: moon,serif;
 +
}
 +
.decoration1{
 +
    width: 40px;
 +
    height: 17px;
 +
    position: absolute;
 +
    right:20px;
 +
    top:20px;
 +
}
 +
.decoration1:hover .left{
 +
    display:inherit;
 +
}
 +
.div1{
 +
    position: relative;
 +
    width: inherit;
 +
}
 +
.chosen_bar{
 +
    top: -10px;
 +
    position: absolute;
 +
    display: none;
 +
    width:100%;
 +
    height: 10px;
 +
}
 +
/*-----------------Leftnav----------------*/
 +
 
 +
.open {
 +
    overflow: hidden;
 +
    transform: translateX(0px);
 +
 
 +
    width: 346px;
 +
    height:100%;
 +
    margin-top: 99px;
 +
    border-top-style: solid;
 +
    border-top-width: 1px;
 +
    background-image: url("leftnav_background.png");
 +
}
 +
.left{
 +
    overflow: hidden;
 +
    transform: translateX(-250px);
 +
 
 +
    width: 346px;
 +
    height:100%;
 +
    margin-top: 99px;
 +
    border-top-style: solid;
 +
    border-top-width: 1px;
 +
    background-image: url("leftnav_background.png");
 +
}
 +
.left ul{list-style: none;margin:0;padding:0;width: 100%}
 +
.left ul li{line-height:70px; text-align:left;background-image:url("left_notchose.png");background-size: 100% 100%;position: relative;padding-left: 10px;}
 +
.left ul li:hover ul{display: block}
 +
.left ul li:hover{background: #00b2ff}
 +
 
 +
.left ul li ul{display:none;background:rgb(0,19,86);padding:0;margin:0;position:absolute;z-index: 100;top:70px;width:100%}
 +
.left ul li ul li{line-height:30px; text-align:left;background:rgb(0,19,86) }
 +
.left ul li ul li:hover{ background-color:#00b2ff;}
 +
.left ul li ul li a{white-space: nowrap;font-family: moon,serif;color: #ffffff;text-decoration:none;padding-left: 10px;}
 +
 
 +
 
 +
.open ul{list-style: none;margin:0;padding:0;width: 100%}
 +
.open ul li{line-height:70px; text-align:left;background-image:url("left_notchose.png");background-size: 100% 100%;position: relative;padding-left: 10px;}
 +
.open ul li:hover ul{display: block}
 +
.open ul li:hover{background: #00b2ff}
 +
 
 +
.open ul li ul{display:none;background:rgb(0,19,86);padding:0;margin:0;position:absolute;z-index: 100;top:70px;width:100%}
 +
.open ul li ul li{line-height:30px; text-align:left;background:rgb(0,19,86) }
 +
.open ul li ul li:hover{ background-color:#00b2ff;}
 +
.open ul li ul li a{white-space: nowrap;font-family: moon,serif;color: #ffffff;text-decoration:none;padding-left: 10px;}
 +
 
 +
 
 +
 
 +
.icon {
 +
    position: absolute;
 +
    width: 36px;
 +
    height: 36px;
 +
    right: 32px;
 +
    top:17px;
 +
}
 +
<style>
 
</html>
 
</html>

Latest revision as of 15:16, 15 June 2019