(153 intermediate revisions by 2 users not shown) | |||
Line 24: | Line 24: | ||
letter-spacing: 0.5px; | letter-spacing: 0.5px; | ||
width: 100%; | width: 100%; | ||
− | padding: | + | padding:15px 0 0 0; |
margin:0 auto; | margin:0 auto; | ||
− | |||
} | } | ||
.guide ul{/*这里必须设置内边距和外边距,因为浏览器会给ul设定默认值,会把导航栏挤歪*/ | .guide ul{/*这里必须设置内边距和外边距,因为浏览器会给ul设定默认值,会把导航栏挤歪*/ | ||
Line 36: | Line 35: | ||
float: left; | float: left; | ||
position :relative; | position :relative; | ||
− | margin-left: | + | 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: | + | 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: | + | 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: | + | width: 13.4%; |
} | } | ||
.guide ul li#Notebook{ | .guide ul li#Notebook{ | ||
− | width: | + | width: 13%; |
} | } | ||
.guide ul li#Hardware{ | .guide ul li#Hardware{ | ||
− | width: | + | width: 12%; |
} | } | ||
.guide ul li#HP{ | .guide ul li#HP{ | ||
− | width: | + | width:19%; |
} | } | ||
.guide ul li#Model{ | .guide ul li#Model{ | ||
− | width: | + | width: 10%; |
} | } | ||
.guide ul li#other{ | .guide ul li#other{ | ||
− | width: | + | width: 14%; |
} | } | ||
.guide ul li#Team{ | .guide ul li#Team{ | ||
− | width: | + | 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: | + | width: 100%; |
} | } | ||
.guide ul li#Notebook:hover ul { | .guide ul li#Notebook:hover ul { | ||
− | width: | + | width: 100%; |
} | } | ||
.guide ul li#Hardware:hover ul { | .guide ul li#Hardware:hover ul { | ||
− | width: | + | width: 100%; |
} | } | ||
.guide ul li#Model:hover ul { | .guide ul li#Model:hover ul { | ||
− | width: | + | width: 100%; |
} | } | ||
.guide ul li#HP:hover ul { | .guide ul li#HP:hover ul { | ||
− | width: | + | width: 100%; |
} | } | ||
.guide ul li#other:hover ul { | .guide ul li#other:hover ul { | ||
− | width: | + | width: 100%; |
} | } | ||
.guide ul li#Team:hover ul { | .guide ul li#Team:hover ul { | ||
− | width: | + | width: 100%; |
} | } | ||
− | .guide ul | + | .guide ul.menu{ |
− | + | 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%; | ||
− | |||
− | |||
− | |||
text-align: center; | text-align: center; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
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: | + | 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{ | ||
− | font-family:"fredericka-the-great","cabin-sketch",Verdana; | + | display:inline-block; |
− | font-size: | + | width:80%; |
− | word-spacing: | + | font-family:"fredericka-the-great","cabin-sketch",Verdana,"sans-serif"; |
+ | font-size: 36px; | ||
+ | line-height: 42px !important; | ||
+ | word-spacing: 5px; | ||
color: #000000 !important; | color: #000000 !important; | ||
− | |||
margin:25px auto; | margin:25px auto; | ||
text-align: center; | text-align: center; | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
.column p{ | .column p{ | ||
font-size: 16px !important; | font-size: 16px !important; | ||
Line 183: | Line 180: | ||
font-size: 24px !important; | font-size: 24px !important; | ||
letter-spacing: 0px !important; | letter-spacing: 0px !important; | ||
− | line-height: | + | line-height: 26px !important; |
word-spacing: 2px !important; | word-spacing: 2px !important; | ||
font-weight:100 !important; | font-weight:100 !important; | ||
Line 195: | Line 192: | ||
.column img{ | .column img{ | ||
display: inline-block; | 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: | + | vertical-align:super !important; |
} | } | ||
.gotop{ | .gotop{ | ||
Line 205: | 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 220: | Line 221: | ||
left: 50%; | left: 50%; | ||
transform: translate(-50%,-50%); | transform: translate(-50%,-50%); | ||
− | width: 40px; | + | width: 40px !important; |
} | } | ||
.gotop-in{ | .gotop-in{ | ||
Line 239: | Line 240: | ||
} | } | ||
#foot{ | #foot{ | ||
− | margin-top: | + | margin-top:25px; |
} | } | ||
#foot p{ | #foot p{ | ||
Line 245: | Line 246: | ||
text-align:center !important; | text-align:center !important; | ||
margin-top:10px; | margin-top:10px; | ||
− | margin-bottom: | + | 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 264: | Line 265: | ||
} | } | ||
− | #bigger{ | + | .column #bigger{ |
− | + | display:inline-block; | |
− | + | height: 100%; | |
− | + | margin: auto; | |
− | + | } | |
− | + | #bigger{ | |
− | + | display:inline-block; | |
− | + | height: 100%; | |
− | + | margin: auto; } | |
− | + | .column #bigger img{ | |
− | + | cursor: pointer; | |
− | + | transition: all 0.6s; | |
+ | } | ||
+ | #bigger img{ | ||
+ | cursor: pointer; | ||
+ | transition: all 0.6s; | ||
+ | } | ||
+ | .column #bigger img:hover{ | ||
+ | transform: scale(1.2); | ||
+ | } | ||
+ | #bigger img:hover{ | ||
+ | transform: scale(1.2); | ||
+ | } | ||
#sideMenu, #top_title, .patrollink { | #sideMenu, #top_title, .patrollink { | ||
display: none; | display: none; | ||
Line 296: | 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() !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); }
- foot{
margin-top:25px; }
- 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; }
- 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;
}
- bigger{
display:inline-block; height: 100%; margin: auto; }
.column #bigger img{
cursor: pointer; transition: all 0.6s;
}
- bigger img{
cursor: pointer; transition: all 0.6s;
} .column #bigger img:hover{
transform: scale(1.2);
}
- bigger img:hover{
transform: scale(1.2);
}
- sideMenu, #top_title, .patrollink {
display: none;
}
- HQ_page p {
font-size:unset; font-family: unset;
}
- HQ_page td{
padding: 0px !important;
}
- globalWrapper {
font-size:unset; font-family:unset; padding-bottom:0px;
} .mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul {
margin: 0px;
}
- HQ_page h1, h2, h3, h4, h5 {
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; }
}