Difference between revisions of "Team:XMU-China/css/unitcommomCss"

 
(144 intermediate revisions by 2 users not shown)
Line 24: Line 24:
 
letter-spacing: 0.5px;
 
letter-spacing: 0.5px;
 
width: 100%;   
 
width: 100%;   
−
padding:20px 0;
+
padding:15px 0 0 0;
 
margin:0 auto;
 
margin:0 auto;
−
        position:fixed;
 
 
}   
 
}   
 
.guide ul{/*这里必须设置内边距和外边距，因为浏览器会给ul设定默认值，会把导航栏挤歪*/  
 
.guide ul{/*这里必须设置内边距和外边距，因为浏览器会给ul设定默认值，会把导航栏挤歪*/  
Line 36: Line 35:
 
float: left;   
 
float: left;   
 
position :relative;   
 
position :relative;   
−
margin-left: 5px;
+
margin-left: 0.2%;
 
}   
 
}   
 
.guide ul li a,.guide ul li a:hover {/*对所有项目a标签设置统一样式*/   
 
.guide ul li a,.guide ul li a:hover {/*对所有项目a标签设置统一样式*/   
Line 46: Line 45:
 
height:50px;   
 
height:50px;   
 
line-height: 50px;/*height和line-height设置为一样的高度文字就会水平竖直居中 */   
 
line-height: 50px;/*height和line-height设置为一样的高度文字就会水平竖直居中 */   
−
font-size: 16px;   
+
font-size: 15px;   
 
         background-image:url(https://static.igem.org/mediawiki/2017/6/6a/T--XMU-China--background.png) !important;
 
         background-image:url(https://static.igem.org/mediawiki/2017/6/6a/T--XMU-China--background.png) !important;
 
         background-color:#FFFFFF;
 
         background-color:#FFFFFF;
 
}   
 
}   
 +
 
.guide ul li a{/*统一设置导航栏下拉时透明背景*/
 
.guide ul li a{/*统一设置导航栏下拉时透明背景*/
 +
        font-size:15px;
 
color: #000000;
 
color: #000000;
 
}
 
}
Line 59: Line 60:
 
}
 
}
 
.guide ul li#Home,.guide ul li#Home:hover{   
 
.guide ul li#Home,.guide ul li#Home:hover{   
−
width: 50px;
+
width: 6%;
 
}
 
}
 
.guide ul li:hover a {/*鼠标移上去的时候字体和背景都会变色，移开又会变回来 */   
 
.guide ul li:hover a {/*鼠标移上去的时候字体和背景都会变色，移开又会变回来 */   
Line 65: Line 66:
 
}   
 
}   
 
.guide ul li#Project{
 
.guide ul li#Project{
−
width: 140px;
+
width: 13.4%;
 
}
 
}
 
.guide ul li#Notebook{
 
.guide ul li#Notebook{
−
width: 135px;
+
width: 13%;
 
}
 
}
 
.guide ul li#Hardware{
 
.guide ul li#Hardware{
−
width: 130px;
+
width: 12%;
 
}
 
}
 
.guide ul li#HP{
 
.guide ul li#HP{
−
width: 190px;
+
width:19%;
 
}
 
}
 
.guide ul li#Model{
 
.guide ul li#Model{
−
width: 125px;
+
width: 10%;
 
}
 
}
 
.guide ul li#other{
 
.guide ul li#other{
−
width: 155px;
+
width: 14%;
 
}
 
}
 
.guide ul li#Team{
 
.guide ul li#Team{
−
width: 155px;
+
width: 11%;
 
}
 
}
 
.guide ul li ul {/*实现下拉菜单隐藏*/   
 
.guide ul li ul {/*实现下拉菜单隐藏*/   
Line 93: Line 94:
 
padding:0;
 
padding:0;
 
         z-index:1000;
 
         z-index:1000;
 +
} 
 +
.guide ul li:hover ul li{
 +
margin:5px 0;
 
}   
 
}   
 
.guide ul li#Project:hover ul {
 
.guide ul li#Project:hover ul {
−
width: 140px;
+
width: 100%;
 
}
 
}
 
.guide ul li#Notebook:hover ul {
 
.guide ul li#Notebook:hover ul {
−
width: 135px;
+
width: 100%;
 
}
 
}
 
.guide ul li#Hardware:hover ul {
 
.guide ul li#Hardware:hover ul {
−
width: 130px;
+
width: 100%;
 
}
 
}
 
.guide ul li#Model:hover ul {
 
.guide ul li#Model:hover ul {
−
width: 125px;
+
width: 100%;
 
}
 
}
 
.guide ul li#HP:hover ul {
 
.guide ul li#HP:hover ul {
−
width: 190px;
+
width: 100%;
 
}
 
}
 
.guide ul li#other:hover ul {
 
.guide ul li#other:hover ul {
−
width: 155px;
+
width: 100%;
 
}
 
}
 
.guide ul li#Team:hover ul {
 
.guide ul li#Team:hover ul {
−
width: 155px;
+
width: 100%;
 
}
 
}
−
.guide ul li:hover ul li{
+
.guide ul.menu{
−
margin: 8px 0;
+
margin:0 auto;
 
}
 
}
 
.guide ul li:hover ul li a {/*定义下拉菜单里的a标签*/   
 
.guide ul li:hover ul li a {/*定义下拉菜单里的a标签*/   
Line 129: Line 133:
 
.title{
 
.title{
 
width: 100%;
 
width: 100%;
−
height: 550px;
 
−
line-height: 550px;
 
−
color:#000000;
 
 
text-align: center;
 
text-align: center;
−
font-family:"fredericka-the-great","Gill Sans",spirax,Impact, "Franklin Gothic Bold", "Arial Black", "sans-serif";
 
−
font-size: 80px;
 
−
letter-spacing: 5px;
 
−
font-weight: 300;
 
−
margin:0 0 50px 0;
 
−
        background-image:url(https://static.igem.org/mediawiki/2017/c/cd/T--XMU-China--titlebg.png) !important;
 
 
background-size:95% 100%;
 
background-size:95% 100%;
 
         background-position: center;
 
         background-position: center;
 
         background-repeat: no-repeat;
 
         background-repeat: no-repeat;
 +
}
 +
.title .titleimg{
 +
display: inline-block;
 +
width: 90%;
 +
text-align: center;
 +
margin:0 0 35px 0;
 +
z-index:1;
 
}
 
}
 
.column {
 
.column {
 
font-family:Verdana,"Franklin Gothic Bold", "Arial Black", "sans-serif" !important;
 
font-family:Verdana,"Franklin Gothic Bold", "Arial Black", "sans-serif" !important;
−
width: 60%;
+
width: 70%;
 
margin-left:auto;
 
margin-left:auto;
 
margin-right:auto;
 
margin-right:auto;
Line 153: Line 155:
 
box-shadow: #666666 0px 0px 30px;
 
box-shadow: #666666 0px 0px 30px;
 
color: #000000 !important;
 
color: #000000 !important;
 +
        text-align:center;
 
     }
 
     }
 
.column .subtitle{
 
.column .subtitle{
 
         display:inline-block;
 
         display:inline-block;
−
         width:100%;
+
         width:80%;
 
font-family:"fredericka-the-great","cabin-sketch",Verdana,"sans-serif";
 
font-family:"fredericka-the-great","cabin-sketch",Verdana,"sans-serif";
 
font-size: 36px;
 
font-size: 36px;
Line 177: Line 180:
 
         font-size: 24px !important;
 
         font-size: 24px !important;
 
         letter-spacing: 0px !important;
 
         letter-spacing: 0px !important;
−
         line-height: 24px !important;
+
         line-height: 26px !important;
 
         word-spacing: 2px !important;
 
         word-spacing: 2px !important;
 
         font-weight:100 !important;
 
         font-weight:100 !important;
Line 189: Line 192:
 
.column img{
 
.column img{
 
display: inline-block;
 
display: inline-block;
−
width:100%;
+
/*border:3px #FAEBD7 double;*/
 +
border-radius:6%;
 +
box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
 
}
 
}
 
.subscript{/*设置格式为下标*/
 
.subscript{/*设置格式为下标*/
 
         vertical-align:sub !important;
 
         vertical-align:sub !important;
 +
}
 +
.superscript{/*设置格式为上标*/
 +
        vertical-align:super !important;
 
}
 
}
 
.gotop{
 
.gotop{
Line 198: Line 206:
 
right:2%;
 
right:2%;
 
bottom:2%;
 
bottom:2%;
−
width:50px;
+
width:50px !important;
−
height:35px;
+
height:35px !important;
 
text-align:center;
 
text-align:center;
 
padding-top:20px;  
 
padding-top:20px;  
Line 213: Line 221:
 
left: 50%;
 
left: 50%;
 
transform: translate(-50%,-50%);
 
transform: translate(-50%,-50%);
−
width: 40px;
+
width: 40px !important;
 
}  
 
}  
 
.gotop-in{
 
.gotop-in{
Line 232: Line 240:
 
}
 
}
 
#foot{
 
#foot{
−
margin-top:20px;
+
margin-top:25px;
 
}
 
}
 
#foot p{
 
#foot p{
Line 238: Line 246:
 
text-align:center !important;
 
text-align:center !important;
 
margin-top:10px;
 
margin-top:10px;
−
margin-bottom:0;
+
margin-bottom:10px;
 
font-family:spirax,"Franklin Gothic Bold", "Arial Black", "sans-serif" !important;
 
font-family:spirax,"Franklin Gothic Bold", "Arial Black", "sans-serif" !important;
 
font-size: 16px !important;
 
font-size: 16px !important;
Line 257: Line 265:
 
}
 
}
  
−
#bigger{   
+
.column #bigger{   
 +
    display:inline-block;
 
     height: 100%;   
 
     height: 100%;   
 
     margin: auto;   
 
     margin: auto;   
 +
} 
 +
#bigger{ 
 +
    display:inline-block;
 +
    height: 100%; 
 +
    margin: auto; }
 +
.column #bigger img{ 
 +
    cursor: pointer; 
 +
    transition: all 0.6s; 
 
}   
 
}   
 
#bigger img{   
 
#bigger img{   
 
     cursor: pointer;   
 
     cursor: pointer;   
 
     transition: all 0.6s;   
 
     transition: all 0.6s;   
 +
} 
 +
.column #bigger img:hover{ 
 +
    transform: scale(1.2); 
 
}   
 
}   
 
#bigger img:hover{   
 
#bigger img:hover{   
 
     transform: scale(1.2);   
 
     transform: scale(1.2);   
 
}   
 
}   
−
 
 
#sideMenu, #top_title, .patrollink {
 
#sideMenu, #top_title, .patrollink {
 
     display: none;
 
     display: none;
Line 289: Line 308:
 
#HQ_page h1, h2, h3, h4, h5 {
 
#HQ_page h1, h2, h3, h4, h5 {
 
   font-family: unset;
 
   font-family: unset;
 +
}
 +
 +
 +
/*#mw-content-text .date{
 +
font-size: 20px;
 +
}*/
 +
 +
 +
#left_menu {
 +
float:left;
 +
backgroung-color:#00000;
 +
width:100%;
 +
bottom:300px;
 +
left:150px;
 +
font-size:20px;
 +
list-style-type: none;
 +
}
 +
 +
#left_menu_checkbox{
 +
display:none;
 +
}
 +
 +
 +
@media screen and (max-width:1400px)and (min-width:768px){
 +
.guide ul li a{
 +
  font-size: 15px;
 +
  color: #000000;
 +
}
 +
.guide ul li a:hover{
 +
  font-size: 15px;
 +
  color: #000000;
 +
}
 +
.column {
 +
width: 70%;
 +
    }
 +
}
 +
 +
.pageScrollleft
 +
{clear:all;
 +
list-style-type:none;
 +
}
 +
 +
.pageScrollleft scrollNav_scrollNav_2,
 +
.pageScrollleft scrollNav_scrollNav_3{
 +
float:left;
 +
}
 +
#left_menu{
 +
left:0;
 +
clear:all;
 +
}
 +
#left_menu-button {
 +
 +
margin-right: 50px;
 +
margin-top: 50px;
 +
color: #000000;
 +
font-weight: 200;
 +
font-size: 25px;
 +
}
 +
 +
 +
#left_menu_checkbox:checked ~ .left_menu-list {
 +
  display: none;
 +
  }
 +
 +
.left_menu-list {
 +
  list-style-type: block;
 +
  }
 +
.left_menu-list li{
 +
  float: left;
 +
  margin-left:10%;
 +
        font-size:17px;
 +
  }
 +
}
 +
 +
 +
 +
@media screen and (max-width:768px){
 +
.guide ul li#Project{
 +
width: 15%;
 +
}
 +
.guide ul li#Notebook{
 +
width: 13%;
 +
}
 +
.guide ul li#Hardware{
 +
width: 13%;
 +
}
 +
.guide ul li#HP{
 +
width: 19%;
 +
}
 +
.guide ul li#Model{
 +
width: 10%;
 +
}
 +
.guide ul li#other{
 +
width: 14.4%;
 +
}
 +
.guide ul li#Team{
 +
width: 8%;
 +
}
 +
.guide ul li a{
 +
  font-size: 7px;
 +
  color: #000000;
 +
}
 +
.guide ul li a:hover{
 +
  font-size: 7px;
 +
  color: #000000;
 +
}
 +
.column {
 +
width: 100%;
 +
    }
 +
}
 +
.pageScrollleft
 +
{display:none;
 +
 +
#left_menu-button {
 +
                position:block;
 +
margin-right: 50px;
 +
margin-top: 50px;
 +
color: #ffffff;
 +
font-weight: 200;
 +
font-size: 25px;
 +
 +
}
 +
 +
#left_menu_checkbox:checked ~ ul {
 +
  display: none;
 +
  }
 +
 +
.left_menu-list {
 +
  list-style-type: block;
 +
  }
 +
.left_menu-list li{
 +
  float: left;
 +
  margin-left:1%;
 +
        font-size:15px;
 +
  }
 
}
 
}

Latest revision as of 22:21, 1 November 2017

/* unit commom css */ html { 

      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;

} body { width: 100%; margin:0; padding:0; overflow: auto; } .guide table{ margin:0 auto !important; 

       padding: 0;
       background: transparent;
       background-color: transparent;
       border: none !important;

} .guide td{ 

       border: none !important;

} .guide{ font-family:Verdana; letter-spacing: 0.5px; width: 100%; padding:15px 0 0 0; margin:0 auto; } .guide ul{/*这里必须设置内边距和外边距，因为浏览器会给ul设定默认值，会把导航栏挤歪*/ margin: 0; padding: 0; list-style: none; } .guide li.dropdown{/*本来ul是竖直排列的，对所有li元素进行float:left他就会自动全部靠左*/ float: left; position :relative; margin-left: 0.2%; } .guide ul li a,.guide ul li a:hover {/*对所有项目a标签设置统一样式*/ display: block; text-align: center; text-decoration: none; border-radius: 25px; box-shadow: 0px 0px 15px rgba(0,0,0,0.4); height:50px; line-height: 50px;/*height和line-height设置为一样的高度文字就会水平竖直居中 */ font-size: 15px; 

       background-image:url(T--XMU-China--background.png) !important;
       background-color:#FFFFFF;

}

.guide ul li a{/*统一设置导航栏下拉时透明背景*/ 

       font-size:15px;

color: #000000; } .guide ul li a img{ height: 32px; width: 32px; margin-bottom: 5px; } .guide ul li#Home,.guide ul li#Home:hover{ width: 6%; } .guide ul li:hover a {/*鼠标移上去的时候字体和背景都会变色，移开又会变回来 */ background-color:#FAEBD7; } .guide ul li#Project{ width: 13.4%; } .guide ul li#Notebook{ width: 13%; } .guide ul li#Hardware{ width: 12%; } .guide ul li#HP{ width:19%; } .guide ul li#Model{ width: 10%; } .guide ul li#other{ width: 14%; } .guide ul li#Team{ width: 11%; } .guide ul li ul {/*实现下拉菜单隐藏*/ display: none; } .guide ul li:hover ul {/*弹出的下拉菜单*/ display: block; position: absolute; padding:0; 

       z-index:1000;

} .guide ul li:hover ul li{ margin:5px 0; } .guide ul li#Project:hover ul { width: 100%; } .guide ul li#Notebook:hover ul { width: 100%; } .guide ul li#Hardware:hover ul { width: 100%; } .guide ul li#Model:hover ul { width: 100%; } .guide ul li#HP:hover ul { width: 100%; } .guide ul li#other:hover ul { width: 100%; } .guide ul li#Team:hover ul { width: 100%; } .guide ul.menu{ margin:0 auto; } .guide ul li:hover ul li a {/*定义下拉菜单里的a标签*/ display: block; color: #000000; font-size: 15px; } .guide ul li:hover ul li a:hover {/*下拉菜单a标签的伪类设置*/ color: #FFFFFF; 

       text-shadow: 0px 0px 10px #000000;

} .title{ width: 100%; text-align: center; background-size:95% 100%; 

       background-position: center;
       background-repeat: no-repeat;

} .title .titleimg{ display: inline-block; width: 90%; text-align: center; margin:0 0 35px 0; z-index:1; } .column { font-family:Verdana,"Franklin Gothic Bold", "Arial Black", "sans-serif" !important; width: 70%; margin-left:auto; margin-right:auto; padding: 2% 4%; 

       background-color: #FFFFFF;

border-radius: 50px; box-shadow: #666666 0px 0px 30px; color: #000000 !important; 

       text-align:center;
   }

.column .subtitle{ 

       display:inline-block;
       width:80%;

font-family:"fredericka-the-great","cabin-sketch",Verdana,"sans-serif"; font-size: 36px; line-height: 42px !important; word-spacing: 5px; color: #000000 !important; margin:25px auto; text-align: center; } .column p{ font-size: 16px !important; letter-spacing: 0px !important; line-height: 23px !important; word-spacing: 1.5px !important; margin-left:2.5%; margin-right:2.5%; 

       text-align:left !important;

} .column h1{ 

       font-size: 24px !important;
       letter-spacing: 0px !important;
       line-height: 26px !important;
       word-spacing: 2px !important;
       font-weight:100 !important;
       margin-left:2.5% !important;

} .column .blank{ display: inline-block; width:100%; height:40px; } .column img{ display: inline-block; /*border:3px #FAEBD7 double;*/ border-radius:6%; box-shadow: 0px 0px 10px rgba(0,0,0,0.4); } .subscript{/*设置格式为下标*/ 

       vertical-align:sub !important;

} .superscript{/*设置格式为上标*/ 

       vertical-align:super !important;

} .gotop{ position:fixed; right:2%; bottom:2%; width:50px !important; height:35px !important; text-align:center; padding-top:20px; border-radius: 50%; overflow: hidden; } .gotop:hover:before{ top:50% } .gotop:before{ position: absolute; top: -60%; left: 50%; transform: translate(-50%,-50%); width: 40px !important; } .gotop-in{ display:inline-block; height:25px; width:25px; border: 5px double; border-color: #000000 transparent transparent #000000; transform:rotate(45deg); } .gotop-in:hover{ display:inline-block; height:25px; width:25px; border: 5px solid; border-color: #000000 transparent transparent #000000; transform:rotate(45deg); }

  1. foot{

margin-top:25px; }

  1. foot p{

width:100%; text-align:center !important; margin-top:10px; margin-bottom:10px; font-family:spirax,"Franklin Gothic Bold", "Arial Black", "sans-serif" !important; font-size: 16px !important; color:#000000 !important; letter-spacing: 1.5px !important; }

  1. content {
   width: 100%;
   padding: 0;
   border: none;
   margin: 0px 0px;
   position: static;
   z-index:auto;
   margin-top:-7px;
   background: transparent;
   background-color: transparent;

}

.column #bigger{ 

   display:inline-block;
   height: 100%;  
   margin: auto;

}

  1. bigger{ 
   display:inline-block;
   height: 100%;  
   margin: auto; }

.column #bigger img{ 

   cursor: pointer;  
   transition: all 0.6s;

}

  1. bigger img{ 
   cursor: pointer;  
   transition: all 0.6s;

} .column #bigger img:hover{ 

   transform: scale(1.2);

}

  1. bigger img:hover{ 
   transform: scale(1.2);

}

  1. sideMenu, #top_title, .patrollink {
   display: none;

}

  1. HQ_page p {
   font-size:unset;
   font-family: unset;

}

  1. HQ_page td{
   padding: 0px !important;

}

  1. globalWrapper {
   font-size:unset;
   font-family:unset;
   padding-bottom:0px;

} .mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul { 

  margin: 0px;

}

  1. HQ_page h1, h2, h3, h4, h5 {
  font-family: unset;

}


/*#mw-content-text .date{ font-size: 20px; }*/


  1. left_menu {

float:left; backgroung-color:#00000; width:100%; bottom:300px; left:150px; font-size:20px; list-style-type: none; }

  1. left_menu_checkbox{

display:none; }


@media screen and (max-width:1400px)and (min-width:768px){ .guide ul li a{ 

 font-size: 15px;
 color: #000000;

} .guide ul li a:hover{ 

 font-size: 15px;
 color: #000000;

} .column { width: 70%; 

   }

}

.pageScrollleft {clear:all; list-style-type:none; }

.pageScrollleft scrollNav_scrollNav_2, .pageScrollleft scrollNav_scrollNav_3{ float:left; }

  1. left_menu{

left:0; clear:all; }

  1. left_menu-button {

margin-right: 50px; margin-top: 50px; color: #000000; font-weight: 200; font-size: 25px; }


  1. left_menu_checkbox:checked ~ .left_menu-list {
 	display: none;
 }

.left_menu-list { 

 		list-style-type: block;
 	}
.left_menu-list li{
 	float: left;
 	margin-left:10%;
       font-size:17px;
 }

}


@media screen and (max-width:768px){ .guide ul li#Project{ width: 15%; } .guide ul li#Notebook{ width: 13%; } .guide ul li#Hardware{ width: 13%; } .guide ul li#HP{ width: 19%; } .guide ul li#Model{ width: 10%; } .guide ul li#other{ width: 14.4%; } .guide ul li#Team{ width: 8%; } .guide ul li a{ 

 font-size: 7px;
 color: #000000;

} .guide ul li a:hover{ 

 font-size: 7px;
 color: #000000;

} .column { width: 100%; 

   }

} .pageScrollleft {display:none;

  1. left_menu-button {
               position:block;

margin-right: 50px; margin-top: 50px; color: #ffffff; font-weight: 200; font-size: 25px;

}

  1. left_menu_checkbox:checked ~ ul {
 	display: none;
 }

.left_menu-list { 

 		list-style-type: block;
 	}
.left_menu-list li{
 	float: left;
 	margin-left:1%;
       font-size:15px;
 }

}