Difference between revisions of "Team:OUC-China/css/index"
| (21 intermediate revisions by 2 users not shown) | |||
| Line 8: | Line 8: | ||
padding: 0; | padding: 0; | ||
margin: 0; | margin: 0; | ||
| + | } | ||
| + | h2{ | ||
| + | border-bottom: none; | ||
| + | } | ||
| + | li{ | ||
| + | margin-bottom: 0; | ||
} | } | ||
table { | table { | ||
| Line 37: | Line 43: | ||
a:hover { | a:hover { | ||
color: #b60a0a | color: #b60a0a | ||
| + | } | ||
| + | .mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul{ | ||
| + | margin: 0; | ||
} | } | ||
body{ | body{ | ||
| − | font-family: " | + | font-family: "Arial",sans-serif !important; |
} | } | ||
.clr{ | .clr{ | ||
| Line 54: | Line 63: | ||
z-index: 1000; | z-index: 1000; | ||
background: #131327; | background: #131327; | ||
| − | padding-top: | + | padding-top: 30px; |
font-family: "Microsoft YaHei",sans-serif !important; | font-family: "Microsoft YaHei",sans-serif !important; | ||
} | } | ||
| Line 223: | Line 232: | ||
.banner-content{ | .banner-content{ | ||
max-width: 1200px; | max-width: 1200px; | ||
| − | margin: | + | margin: -70px auto; |
} | } | ||
.banner-content img{ | .banner-content img{ | ||
| Line 277: | Line 286: | ||
color: #868687; | color: #868687; | ||
} | } | ||
| − | .index-details img{ | + | /*.index-details img{ |
margin: 80px 0; | margin: 80px 0; | ||
| − | } | + | }*/ |
.index-details .caption{ | .index-details .caption{ | ||
| − | margin: | + | margin: 20% 0; |
color: #868687; | color: #868687; | ||
} | } | ||
| Line 335: | Line 344: | ||
width: 35%; | width: 35%; | ||
position: relative; | position: relative; | ||
| − | top: | + | top: 3px; |
} | } | ||
footer address:after{ | footer address:after{ | ||
content: url(https://static.igem.org/mediawiki/2015/2/2b/OUC-China-Facebook4.png); | content: url(https://static.igem.org/mediawiki/2015/2/2b/OUC-China-Facebook4.png); | ||
| − | width: | + | width:10px; |
height:50px; | height:50px; | ||
position: absolute; | position: absolute; | ||
| Line 374: | Line 383: | ||
/*Member*/ | /*Member*/ | ||
.member-head{ | .member-head{ | ||
| − | margin-top: | + | margin-top: 55px; |
background-color: #3ea79d; | background-color: #3ea79d; | ||
} | } | ||
| Line 414: | Line 423: | ||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
| − | @media screen and (min-width: 1366px) { | + | /*@media screen and (min-width: 1366px) { |
.photo-content img.memberPhoto{ | .photo-content img.memberPhoto{ | ||
-webkit-transition: all .35s ease-out; | -webkit-transition: all .35s ease-out; | ||
| Line 426: | Line 435: | ||
transform: rotate(360deg); | transform: rotate(360deg); | ||
} | } | ||
| − | } | + | }*/ |
.photo-content+h3{ | .photo-content+h3{ | ||
| Line 468: | Line 477: | ||
} | } | ||
.text-content article h2:before{ | .text-content article h2:before{ | ||
| − | content: url(../ | + | content: url(https://static.igem.org/mediawiki/2015/0/08/Greenline_03.png); |
margin-right: 10px; | margin-right: 10px; | ||
position: relative; | position: relative; | ||
| Line 508: | Line 517: | ||
left: 94%; | left: 94%; | ||
top: 24%; | top: 24%; | ||
| + | display: inline-block; | ||
| + | width:43px; | ||
| + | height: 30px; | ||
} | } | ||
| + | |||
.noteHide{ | .noteHide{ | ||
cursor: auto; | cursor: auto; | ||
| Line 520: | Line 533: | ||
} | } | ||
.toggleNote i:before{ | .toggleNote i:before{ | ||
| − | content: " | + | content: url(https://static.igem.org/mediawiki/2015/b/ba/Arrow-up.png) !important; |
| + | } | ||
| + | .index-details .caption p a:visited{ | ||
| + | color:#fff !important; | ||
| + | } | ||
| + | |||
| + | i.icon-chevron-down:before{ | ||
| + | content: url(https://static.igem.org/mediawiki/2015/f/fb/Arrow-down.png); | ||
| + | } | ||
| + | .img-example{ | ||
| + | font-size:13px; | ||
| + | font-family:"Arial",sans-serif; | ||
} | } | ||
Latest revision as of 09:47, 18 September 2015
css reset code */
/* for everything else */
/*字体边框等初始化*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0; margin: 0;
} h2{
border-bottom: none;
} li{
margin-bottom: 0;
} table {
border-collapse: collapse; border-spacing: 0;
} fieldset,img {
border: 0;
} img {
display: block;
} ol,ul {
list-style: none;
} caption,th {
text-align: left;
} q:before,q:after {
content: ;
} abbr,acronym {
border: 0;
} a {
color: #343434; text-decoration: none;
} a:hover {
color: #b60a0a
} .mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul{
margin: 0;
}
body{
font-family: "Arial",sans-serif !important;
}
.clr{
clear: both;
}
/*index*/ header{ width: 100%; position: fixed; top: 0; z-index: 1000; background: #131327; padding-top: 30px; font-family: "Microsoft YaHei",sans-serif !important; } .logo{ float: left; width: 4%; margin-right: 50px; } .navigation{ width: 100%; text-align: center; } .banner-top { width: 79%; float: left; margin-top: 8px; } ul.navig{ padding: 0; width: 69%; float: left; margin: 1% auto 0; text-align: center; } ul.navig li{ display: inline-block; margin:0 10px; } ul.navig li a{ text-transform:uppercase; font-size:1em; color:#fff; font-weight:700; } ul.navig li a:hover{ color:#838383; } nav a , ul.navig a{ position: relative; margin: 0px 0px 3px; outline: none; text-decoration: none; text-transform: capitalize; letter-spacing: 1px; font-weight: 400; text-shadow: 0 0 1px rgba(255,255,255,0.3); font-size: 1.35em; } nav a:hover, nav a:focus, ul.navig a:hover, ul.navig a:focus { outline: none; } span.menu { display: none; } @media screen and (max-width: 1280px){ .logo { width: 4%; } .banner-top { width: 88%; } } @media screen and (max-width: 1024px){ .logo { width: 5%; margin-right:4%; } .logo img { width:100%; } .banner-top { width: 56%; } span.menu { display: block; cursor: pointer; float: none; margin: 3px auto 0em auto; width: 10%; background-color: #f0c11b; color: #000; text-align: center; padding: 6px; font-size: 16px; font-weight: 500; position: relative; } } @media screen and (max-width: 768px){ .logo { width: 5%; margin-right: 0; margin-top: 7px; } } @media screen and (max-width: 640px){ .logo { width: 6%; } } @media screen and (max-width: 480px){ span.menu { width: 17%; padding: 4px; font-size: 14px; } .logo { width: 31%; margin-top: 5px; } } @media screen and (max-width: 320px){ span.menu { width: 100%; padding:5px; margin: 50px auto 0em auto; } .logo { width: 52%; margin-top: 8px; } } .container-fluid{ padding: 0; } .navbar{ border: 0 !important; border-radius: 0 !important; background-color: #131327; margin-bottom: 10px; } .navbar a{ font-size: 18px; color: #fff; } .navbar-default{ box-shadow: none !important; } .navbar-default .navbar-nav > li > a{ /*color: #fff;*/ -webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out;
} .navbar-default .navbar-nav > li > a:hover{ background-color: #e8cc4e; color: #000; } .navbar-default .navbar-nav > li > a:focus{ color: #fff; }
- bs-example-navbar-collapse-1{
background-color: #131327 !important; } ul.navbar-nav{ margin-left: 10em; } .navbar-header{ background: #131327; } .banner-container{ width: 100%; background-color: #131327; } .banner-content{ max-width: 1200px; margin: -70px auto; } .banner-content img{ padding-top: 7em; } .banner-content h2{ font-size: 34px; color: #e8cc4e; text-align: center; padding-bottom: 100px; }
.work-header{ text-align: center; margin-bottom: 66px; } .how-work{ background-color: #f2f2f2; } @media (max-width: 1199px){ .work-content{ text-align: center; } } .work-header h2{ width: 350px; color: #0a3c63; font-weight: bold; padding-bottom: 10px; margin: 62px auto 37px auto; border-bottom: 2px solid #0a3c63; } .work-header p,.work-content{ color: #868687; } .work-header h2 span{ color: #e8cd4d; } .work-content{ margin-bottom: 50px; } @media (min-width: 1600px) { .container{ width: 1500px; } } @media screen and (device-width: 1024px) { .container{ width: 990px; } } .index-details{ color: #868687; } /*.index-details img{ margin: 80px 0; }*/ .index-details .caption{ margin: 20% 0; color: #868687; } .index-details .caption h3:before{ content: url(../images/h-before.jpg); position: relative; top: 20px; margin-right: 15px; } .index-details .caption h3{ margin-bottom: 40px; } .index-details .caption p:last-child{ margin-top: 20px; } .index-details .caption p:last-child a{ background-color: #0a3c63; border: none; -webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out;
}
.index-details .caption p:last-child a:hover{
background-color: #206295;
}
.index-details2{
background-color: #f2f2f2;
}
.index-headline{
width: 270px;
margin: 0 auto;
font-size: 28px;
font-weight: bold;
padding-top: 20px;
padding-bottom: 10px;
color: #0a3c63;
border-bottom: 1px solid #0a3c63;
}
.index-headline2{
width: 400px;
padding-top: 50px;
margin-bottom: 20px;
}
.index-headline span{
color: #f0c11b;
}
footer{
width: 100%;
}
footer address{
width: 35%;
position: relative;
top: 3px;
}
footer address:after{
content: url(
);
width:10px;
height:50px;
position: absolute;
left: 19em; bottom: -4px; } .footer-img{ width: 960px; margin: 0 auto; margin-top: 70px; } .footer-img li{ float: left; margin-left: 50px; } .footer-img li:first-child{ margin: 0; } @media screen and (max-width: 992px){ .footer-img{ width: 550px; } .work-content div{ margin-bottom: 30px; } .work-content div img{ margin: 0 auto; } .index-details .caption{ margin: 5% 0; } }
/*Member*/ .member-head{ margin-top: 55px; background-color: #3ea79d; } .member-head h2{ color: #fff; padding: 50px 0; } .member-about{ margin-top: 40px; } .member-about img{ margin: 20px 0; } .member-about h5{ color: #3ea79d; } .member-content{ padding-top: 50px; background-color: #f2f2f2; } .member-content div.row{ margin-top: 50px; } .member-content div.row div{ position: relative; /*width: 10%;*/ } .memberPhoto{ position: absolute; z-index: 901; top: 6%; left: 7%; width: 85%; } .returnTop{ position: fixed; bottom: 8%; right: 3%; cursor: pointer; } /*@media screen and (min-width: 1366px) { .photo-content img.memberPhoto{ -webkit-transition: all .35s ease-out; -o-transition: all .35s ease-out; transition: all .35s ease-out; } .photo-content img.memberPhoto:hover{ -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } }*/
.photo-content+h3{ color: #3ea79d; margin-top: 20px; margin-bottom: 10px; } .photo-content+h3 +h4{ font-style: italic; padding-bottom: 10px; } .photo-content+h3 +h4 +p{ padding-bottom: 30px; } @media screen and (max-width: 991px) { .memberPhoto{ top: 6%; left: 19.5%; width: 61%; } .photo-content img:first-child{ margin: 0 auto; } .member-content div.col-md-4{ text-align: center; margin-bottom: 50px; }
} @media screen and (width: 1366px) { .memberPhoto{ top: 6.3%; } }
.text-content{
margin-top: 40px;
}
.text-content article h2{
margin-bottom: 15px;
}
.text-content article h2:before{
content: url(
);
margin-right: 10px;
position: relative;
top: 13px;
}
.text-content article p span{
color: #3ea79d;
}
.text-content article img{
margin: 20px 0;
}
/*文章目录颜色修改*/ .tocible_header{ background-color: #131327 !important; } .tocible .tocible_heading{ background: #2B3352; }
.note li{ background-color: #f2f2f2; margin-bottom: 10px; cursor: pointer; } .note li:hover{ background-color: #e2e1e1; } .note li h4{ font-size: 24px; line-height: 50px; /*color: #868586;*/ margin: 0 0 0 10px; position: relative; } .note li i{ /*margin-left: 85%;*/ position: absolute; left: 94%; top: 24%;
display: inline-block;
width:43px;
height: 30px;
}
.noteHide{
cursor: auto;
background-color: #f2f2f2 !important;
margin: -7px 0 10px 0;
padding: 10px;
}
.toggleNote{
background-color: #58bbb6 !important;
color: #fff !important;
}
.toggleNote i:before{
content: url(
) !important;
}
.index-details .caption p a:visited{
color:#fff !important;
}
i.icon-chevron-down:before{
content: url();
} .img-example{
font-size:13px;
font-family:"Arial",sans-serif;
}