Difference between revisions of "Template:FJNU-China/index CSS"

(include background,nav,introduce，footer,)
 
 
(2 intermediate revisions by the same user not shown)
Line 62: Line 62:
  
  
−
body{
 
−
    font-family: 'Sniglet', cursive;
 
−
    font-size: 14px;
 
−
    font-weight:  400;
 
−
   
 
−
}
 
  
−
@media screen and (min-width: 768px) and (max-width: 1024px){
 
−
    .logo {
 
−
        width: 75px;
 
−
        padding-top: 5px;
 
−
    }
 
−
    .logo a::after {
 
−
        display: none;
 
−
    }
 
−
    .main-menu > li a {
 
−
        font-size: 14px;
 
−
    }
 
−
    .menu-has-child::before {
 
−
        top: 0;
 
−
    }
 
−
    .menu-has-child:hover > ul {
 
−
        top: 43px;
 
−
    }
 
−
    .main-menu li:nth-child(7) ul{
 
−
        left: auto;
 
−
        right: -20px;
 
−
    }
 
−
    .main-menu li ul {
 
−
        width: 192px;
 
−
    }
 
−
    .main-menu li ul li ul {
 
−
        left: 192px;
 
−
    }
 
−
 
−
}
 
−
@media screen and (min-width: 320px) and (max-width: 767px){
 
−
    /*Home 1*/
 
−
    .language,.logo a::after {
 
−
        display: none;
 
−
    }
 
−
.pull-right {
 
−
        float: left !important;
 
−
        width: 100%;
 
−
    }
 
−
 
 
−
 
−
    .logo {
 
−
        width: 90px;
 
−
    }
 
−
    .main-menu {
 
−
        text-align: left;
 
−
        width: 100%;
 
−
        margin: 95px 0 0;
 
−
        display: none;
 
−
        overflow-y: scroll;
 
−
        height: 250px;
 
−
    }
 
−
    .main-menu li {
 
−
        display: block;
 
−
        margin-left: 0;
 
−
        width: 100%;
 
−
    }
 
−
    .navigation {
 
−
        padding: 17px 0 13px;
 
−
    }
 
−
    .menu-has-child:before{
 
−
        content: "\f105";
 
−
        right: 15px;
 
−
        top: 0;
 
−
    }
 
−
    .main-menu li ul {
 
−
        left: 0;
 
−
        opacity: 1;
 
−
        position: relative;
 
−
        top: 15px;
 
−
        visibility: visible;
 
−
        width: 100%;
 
−
        display: none;
 
−
        -webkit-transition: all 0ms ease;
 
−
        -moz-transition: all 0ms ease;
 
−
        -ms-transition: all 0ms ease;
 
−
        -o-transition: all 0ms ease;
 
−
        transition: all 0ms ease;
 
−
        margin: 10px 0;
 
−
    }
 
−
    .main-menu > li::after{
 
−
        display: none;
 
−
    }
 
−
    .main-menu li ul li ul {
 
−
        left: 0;
 
−
        margin: 0;
 
−
    }
 
−
    .menu-has-child:hover > ul {
 
−
        top: 15px;
 
−
    }
 
−
    .menu-has-child.active:before{
 
−
        content: "\f107";
 
−
    }
 
−
   
 
−
    .main-menu > li:last-child {
 
−
        display: none;
 
−
    }
 
−
   
 
−
 
−
}
 
−
 
−
 
−
 
−
/* Main Menu */
 
−
.navigation {
 
−
    padding: 10px 0 0;
 
−
    background: #fff;
 
−
    position: relative;
 
−
}
 
−
.logo{
 
−
    position: relative;
 
−
    z-index: 999;
 
−
    -webkit-backface-visibility: visible;
 
−
    backface-visibility: visible;
 
−
}
 
−
 
−
.main-menu{
 
−
    margin: 13px 0 0;
 
−
}
 
−
.main-menu li{
 
−
    display: inline-block;
 
−
    position: relative;
 
−
    margin-left: 37px;
 
−
    padding-bottom: 29px;
 
−
}
 
−
.main-menu > li:after{
 
−
    background: #e6e6e6 none repeat scroll 0 0;
 
−
    border-radius: 50%;
 
−
    content: "";
 
−
    height: 6px;
 
−
    left: auto;
 
−
    position: absolute;
 
−
    right: -25px;
 
−
    top: 6px;
 
−
    width: 6px;
 
−
}
 
−
.main-menu > li:last-child:after{
 
−
    display: none;
 
−
}
 
−
.main-menu > li a{
 
−
    font-size: 16px;
 
−
    color: #8ac53f;
 
−
    position: relative;
 
−
    top: 0;
 
−
}
 
−
.main-menu > li a:after{
 
−
    background: rgba(0, 0, 0, 0) url("../img/border1.png") no-repeat scroll center center / cover ;
 
−
    bottom: -11px;
 
−
    content: "";
 
−
    height: 6px;
 
−
    left: -25px;
 
−
    position: absolute;
 
−
    top: auto;
 
−
    width: 57px;
 
−
    -webkit-transition: all 600ms ease-in-out;
 
−
    -moz-transition: all 600ms ease-in-out;
 
−
    -ms-transition: all 600ms ease-in-out;
 
−
    -o-transition: all 600ms ease-in-out;
 
−
    transition: all 600ms ease-in-out;
 
−
    opacity: 0;
 
−
    visibility:visible;
 
−
}
 
−
.main-menu > li > a:hover:after{
 
−
    visibility: visible;
 
−
    opacity: 1;
 
−
    left: -2px;
 
−
}
 
−
.main-menu > li:nth-child(2) a{
 
−
    color: #2ab0ba;
 
−
}
 
−
.main-menu > li:nth-child(2) a:after{
 
−
    background: rgba(0, 0, 0, 0) url("../img/border2.png") no-repeat scroll center center / cover ;
 
−
}
 
−
.main-menu > li:nth-child(3) a{
 
−
    color: #f1c712;
 
−
}
 
−
.main-menu > li:nth-child(3) a:after{
 
−
    background: rgba(0, 0, 0, 0) url("../img/border3.png") no-repeat scroll center center / cover ;
 
−
}
 
−
.main-menu > li:nth-child(4) a{
 
−
    color: #ed117d;
 
−
}
 
−
.main-menu > li:nth-child(4) a:after{
 
−
    background: rgba(0, 0, 0, 0) url("../img/border4.png") no-repeat scroll center center / cover ;
 
−
}
 
−
.main-menu > li:nth-child(5) a{
 
−
    color: #92278f;
 
−
}
 
−
.main-menu > li:nth-child(5) a:after{
 
−
    background: rgba(0, 0, 0, 0) url("../img/border5.png") no-repeat scroll center center / cover ;
 
−
}
 
−
.main-menu > li:nth-child(6) a{
 
−
    color: #00a651;
 
−
}
 
−
.main-menu > li:nth-child(6) a:after{
 
−
    background: rgba(0, 0, 0, 0) url("../img/border6.png") no-repeat scroll center center / cover ;
 
−
}
 
−
 
−
.main-menu > li:nth-child(8) a{
 
−
    color: #f7941d;
 
−
}
 
−
.main-menu li:last-child a:after{
 
−
    display: none;
 
−
}
 
−
.menu-has-child:before {
 
−
 
 
−
    color: #8ac53f;
 
−
    font-family: FontAwesome;
 
−
    font-size: 16px;
 
−
    left: auto;
 
−
    position: absolute;
 
−
    right: -14px;
 
−
    top: 2px;
 
−
    cursor: pointer;
 
−
}
 
−
.menu-has-child:nth-child(3):before{
 
−
    color: #f1c712;
 
−
}
 
−
.menu-has-child:nth-child(5):before{
 
−
    color: #92278f;
 
−
}
 
−
.menu-has-child:nth-child(6):before{
 
−
    color: #00a651;
 
−
}
 
−
 
−
.main-menu li ul{
 
−
    background: #f2f5f9 none repeat scroll 0 0;
 
−
    box-shadow: 0 3px 4px -2px rgba(0, 0, 0, 0.4);
 
−
    left: 0;
 
−
    padding: 0;
 
−
    position: absolute;
 
−
    top: 75px;
 
−
    width: 215px;
 
−
    visibility: visible;
 
−
    opacity: 0;
 
−
    -webkit-transition: all 400ms ease;
 
−
    -moz-transition: all 400ms ease;
 
−
    -ms-transition: all 400ms ease;
 
−
    -o-transition: all 400ms ease;
 
−
    transition: all 400ms ease;
 
−
}
 
−
.main-menu li ul li{
 
−
    display: block;
 
−
    margin: 0;
 
−
    padding: 0;
 
−
}
 
−
.main-menu li ul li a{
 
−
    border-bottom: 1px solid #eee;
 
−
    display: block;
 
−
    padding: 14px 30px;
 
−
    outline: 0;
 
−
}
 
−
.main-menu li ul li a:hover{
 
−
    color: #fff;
 
−
    background: #f1c712;
 
−
    border-color: #f1c712;
 
−
}
 
−
.main-menu li:first-child ul li a:hover{
 
−
    background: #8ac53f;
 
−
    border-color: #8ac53f;
 
−
    color: #fff;
 
−
}
 
−
.main-menu li ul li:last-child a{
 
−
    border-bottom: 0;
 
−
}
 
−
.menu-has-child:hover > ul{
 
−
    visibility: visible;
 
−
    opacity: 1;
 
−
    top: 45px;
 
−
}
 
−
.main-menu li ul li ul{
 
−
    left: 215px;
 
−
    top: 0;
 
−
}
 
−
.menu-has-child:hover > ul > li:hover ul{
 
−
    visibility: visible;
 
−
    opacity: 1;
 
−
    top: 0;
 
−
}
 
−
.menu-has-child:hover > a:after{
 
−
    visibility: visible;
 
−
    opacity: 1;
 
−
    left: -2px;
 
−
}
 
−
.main-menu > li:nth-child(5) ul li a:hover{
 
−
    color: #fff;
 
−
    background: #92278f;
 
−
    border-color: #92278f;
 
−
}
 
−
.main-menu > li:nth-child(6) ul li a:hover{
 
−
    color: #fff;
 
−
    background: #00a651;
 
−
    border-color: #00a651;
 
−
}
 
−
.main-menu > li:nth-child(7) ul li a:hover{
 
−
    color: #fff;
 
−
    background: #00aeef;
 
−
    border-color: #00aeef;
 
−
}
 
−
 
−
/* mobile menu*/
 
−
 
−
.mobile-menu{
 
−
    border: 2px solid #000;
 
−
    border-radius: 4px;
 
−
    height: 32px;
 
−
    left: auto;
 
−
    padding: 4px;
 
−
    position: absolute;
 
−
    right: 15px;
 
−
    top: 0;
 
−
    width: 35px;
 
−
    cursor: pointer;
 
−
    -webkit-transition: all 400ms ease;
 
−
    -moz-transition: all 400ms ease;
 
−
    -ms-transition: all 400ms ease;
 
−
    -o-transition: all 400ms ease;
 
−
    transition: all 400ms ease;
 
−
}
 
−
.mobile-menu span{
 
−
    background: #000 none repeat scroll 0 0;
 
−
    display: block;
 
−
    height: 2px;
 
−
    margin-bottom: 4px;
 
−
    width: 100%;
 
−
}
 
−
 
−
 
−
::-moz-selection {
 
−
    background: #b3d4fc;
 
−
    text-shadow: none;
 
−
}
 
−
a{ -webkit-transition: .3s ease; transition: .3s ease; outline: 0;}
 
−
a:focus{outline: 0;}
 
−
*:focus{outline:none;}
 
−
 
−
 
−
/* fixed menu */
 
−
.navigation.fixed-menu{
 
−
    position: fixed;
 
−
    top: 0;
 
−
    left: 0;
 
−
    width: 100%;
 
−
    box-shadow: 0 3px 4px -5px rgba(0, 0, 0, 1);
 
−
}
 
−
.fixed-menu .logo a::after{
 
−
    display: none;
 
−
}
 
  
  
Line 676: Line 323:
 
         height:195px;  
 
         height:195px;  
 
         display:inline-block;  
 
         display:inline-block;  
−
         background:url(../img/T--FJNU-China--index_top.png) no-repeat;  
+
         background:url("https://static.igem.org/mediawiki/2018/e/e0/T--FJNU-China--index_top.png") no-repeat;  
−
         _background:url(../img/T--FJNU-China--index_top.png) no-repeat;  
+
         _background:url("https://static.igem.org/mediawiki/2018/e/e0/T--FJNU-China--index_top.png") no-repeat;  
 
         outline:none;
 
         outline:none;
 
     }
 
     }
Line 683: Line 330:
 
         width:150px;  
 
         width:150px;  
 
         height:195px;  
 
         height:195px;  
−
         background:url(../img/T--FJNU-China--index_top.png) no-repeat;  
+
         background:url("https://static.igem.org/mediawiki/2018/e/e0/T--FJNU-China--index_top.png") no-repeat;  
 
         outline:none;
 
         outline:none;
 
     }
 
     }

Latest revision as of 04:33, 14 September 2018

@charset "utf-8"; /* CSS Document */ @import url(https://fonts.googleapis.com/css?family=Sniglet:400); @import url(https://fonts.googleapis.com/css?family=Flavors);

body{ 

   font-family: 'Sniglet', cursive;
   font-size: 14px;
   font-weight:  400;
   line-height: 1;

} /*background*/

  • {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;

}

body { 

   color: #ffffff;
   font: 18px/1.5 'Ubuntu', sans-serif;

}

h1 { 

   margin-top: 0;
   margin-bottom: 0.5em;

}

p { 

   margin-top: 0;
   margin-bottom: 2em;

}

h1 { 

   font-size: 60px;
   font-weight: bold;

} 


   /* Header Top */

.navigation{ 

   position: relative;
   z-index: 999;

} .carousel{ 

   position: relative;
   z-index: 1;

}

.header-area { 

   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
   z-index: 999 !important;

} .header-top { 

   background: transparent;
   padding: 12px 0 14px;

}




/*两段介绍*/ .tab2 { 

background-color:rgba(243,243,243,0);
 padding: 60px 20px;
  text-align: center;
 
   } 
  .tab2 img {
   width: 100%;
    height: 100% ;
    margin-top: 100px;
     } 
     .tab3 { 
     	padding: 40px 0; 
     	text-align: center;

background-color:rgba(243,243,243,0.2); 

     	 } 
     	 .tab3 img {
     	  width: 100% ; 
     	  height: 100% ;
     	  margin-top: 50px;
     	   } 
     	   .text h3 { 
     	   	font-size: 20px; 
     	   	
     	   	} 
     	   	.text p {
     	   	 font-size: 14px; 
     	   	}

/* 小屏幕（平板，大于等于 768px） */ @media (min-width: 768px) { .text h3 { font-size: 22px; } .text p { font-size: 15px; } .tab2-text { float: left; } .tab2-img { float: right; } } /* 中等屏幕（桌面显示器，大于等于 992px） */ @media (min-width: 992px) { 

.text h3 { 
	font-size: 24px; 
	} 
	.text p { 
		font-size: 16px; 
		} 
		.tab2-text { 
			float: left; 
			} 
			.tab2-img { 
				float: right; 
				} 
			}

/* 大屏幕（大桌面显示器，大于等于 1200px） */ 

@media (min-width: 1200px) { 
	.text h2 { font-size: 26px; 
		} 
		.text p {
		 font-size: 18px;
		  } 
		  .tab2-text {
		   float: left; 
		   } 
		   .tab2-img {
		    float: right; 
		    } 
		}

//JS 控制垂直居中 $('.text').eq(0).css('margin-top', ($('.auto').eq(0).height() $('.text').eq(0).height()) / 2 + 'px'); $(window).resize(function() { $('.text').eq(0).css('margin-top', ($('.auto').eq(0).height() $('.text').eq(0).height()) / 2 + 'px'); }); $('.text').eq(1).css('margin-top', ($('.auto').eq(1).height() $('.text').eq(1).height()) / 2 + 'px'); $(window).resize(function() { $('.text').eq(1).css('margin-top', ($('.auto').eq(1).height() $('.text').eq(1).height()) / 2 + 'px'); });


/*内容介绍*/ .media-left a { width: 40% !important; 

     	  height: 40% !important;

} .tab-h2 {

color: white; text-align: center; letter-spacing: 1px; } .tab-p { 

		color: white; 
		text-align: center; 
		letter-spacing: 1px; 
		margin: 20px 0 40px 0;

} .tab1 { margin: 0px 0; 

		background-color:rgba(243,243,243,0.4) !important;
}

.tab1 .media-heading { margin: 5px 0 20px 0; }

.tab1 .text-muted { color:white; text-decoration: line-through; } .tab1 .col { padding: 2px; } .tap2 p{ color: white !important; }


/* 小屏幕（平板，大于等于 768px） */ @media (min-width: 768px) { .tab-h2 { font-size: 26px; } .tab-p { font-size: 16px; } } /* 中等屏幕（桌面显示器，大于等于 992px） */ @media (min-width: 992px) { .tab-h2 { font-size: 28px; } .tab-p { font-size: 17px; } } /* 大屏幕（大桌面显示器，大于等于 1200px） */ @media (min-width: 1200px) { .tab-h2 { font-size: 30px; } .tab-p { font-size: 18px; } 

}

/*底部信息*/ h2{ color: white; text-align: center; } .footer-distributed{ background-color:rgba(243,243,243,0.6);

box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12); box-sizing: border-box; width: 100%; text-align: left; padding: 25px 50px; margin-top: 0px; }

.footer-distributed .footer-left p{ 

       color:  #52658F;

font-size: 14px; margin: 0; } .footer-distributed .footer-right p{ 

       color:  #52658F;

font-size: 14px; margin: 0; }

/* Footer links */

.footer-distributed p.footer-links{ font-size:18px; font-weight: bold; color: #ffffff; margin: 0 0 10px; padding: 0; }


.footer-distributed p.footer-links a{ display:inline-block; line-height: 1.8; text-decoration: none; color: inherit; }

.footer-distributed .footer-right{ float: right; margin-top: 6px; max-width: 400px; }


.footer-distributed .footer-right a{ display: inline-block; width: 50px; height: 35px; background-color: #33383b; border-radius: 2px;

font-size: 20px; color: #52658F; text-align: center; line-height: 35px;

margin-left: 3px; } 

.sponsors {
           margin: 2.5px;
           width: 125px;
       }

.footer-right h3{ margin: 0 0 20px 0; }

/* If you don't want the footer to be responsive, remove these media queries */

@media (max-width: 600px) {

.footer-distributed .footer-left, .footer-distributed .footer-right{ text-align: center; }

.footer-distributed .footer-right{ float: none; margin: 0 auto 20px; }

.footer-distributed .footer-left p.footer-links{ line-height: 1.8; } }

/*Top*/ 


   .actGotop
   {position:fixed;
    _position:absolute;
     bottom:40px; 
     right:0px; 
     width:85px; 
     height:45px; 
     display:none;
   }
   .actGotop a,.actGotop a:link{
       width:150px; 
       height:195px; 
       display:inline-block; 
       background:url("T--FJNU-China--index_top.png") no-repeat; 
       _background:url("T--FJNU-China--index_top.png") no-repeat; 
       outline:none;
   }
   .actGotop a:hover{
       width:150px; 
       height:195px; 
       background:url("T--FJNU-China--index_top.png") no-repeat; 
       outline:none;
   }