|
|
(176 intermediate revisions by 6 users not shown) |
Line 1: |
Line 1: |
| + | {{:Team:Jilin_China/partofBs_CSS}} |
| + | {{:Team:Jilin_China/fontawesome_CSS}} |
| + | {{:Team:Jilin_China/Nav_Cont}} |
| + | {{:Team:Jilin_China/Main_Cont_CSS}} |
| + | {{:Team:Jilin_China/Home_cont}} |
| + | <html> |
| | | |
| + | </html> |
| <html> | | <html> |
− | <style>
| |
− | #top_title{
| |
− | display: none;
| |
− | }
| |
− | body{
| |
− | margin: 0 auto;
| |
− | }
| |
| | | |
| + | <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> |
| | | |
− | /**
| |
− | *第一部分
| |
− | */
| |
− | #first_s{
| |
− | padding-left: 0;
| |
− | padding-right: 0;
| |
− | background-color: #fff;
| |
− | margin: 0;
| |
− | height:0px;
| |
− | z-index: 999;
| |
− | position: relative;
| |
− | }
| |
− | #first_s #nav_bg{
| |
− | height: 80px;
| |
− | }
| |
− | #first_s .container {
| |
− | height: 80px;
| |
− | }
| |
− | #first_s .container .navbar-header {
| |
− | height: 80px;
| |
− | float: left;
| |
− | }
| |
− | #first_s .container .navbar-brand {
| |
− | font-size: 24px;
| |
− | line-height: 72px;
| |
− | }
| |
− | #first_s .container ul {
| |
− | text-align: center;
| |
− | padding: 0 0;
| |
− | margin:0 0;
| |
− | height: 80px;
| |
− | float: right;
| |
− | font-size: 18px;
| |
− | color: #c0c0c0;
| |
− | }
| |
| | | |
| + | <script>//coupleColor = [ "#fff","#485"]; |
| | | |
− | #first_s .container li
| + | (function(){ |
− | { | + | |
− | width: 80px;
| + | $("#HQ_page").addClass("luanhaixin"); |
− | list-style: none; | + | $("#HQ_page").removeAttr("id"); |
− | height: 80px;
| + | })(); |
− | line-height: 80px;
| + | |
− | float: left;
| + | |
− | color: #c0c0c0;
| + | |
− | } | + | |
| | | |
| | | |
| | | |
− | #first_s .container li ul
| |
− | {
| |
− | list-style: none;
| |
− | padding-left: 0;
| |
− | text-align: center;
| |
− | position: relative;
| |
− | display: none;
| |
− |
| |
− | }
| |
| | | |
− | #first_s .container li:hover > ul
| + | var HXT=1; |
− | {
| + | </script> |
− | display: block;
| + | |
− | }
| + | |
| | | |
| | | |
− | #first_s .container li ul li | + | <style> |
− | { | + | |
− | height: 30px;
| + | /*This Part for Cleaning Default Template*/ |
− | padding-top: 0px;
| + | |
− | padding-bottom: 0px;
| + | #home_logo, #sideMenu { display:none; } |
− | line-height: 30px;
| + | html{width:100%;height:100%;background:white; list-style:none;} |
− | position: relative;
| + | #globalWrapper,#HQ_page,#bodyContent,#mw-content-text{height:100%;} |
− |
| + | #sideMenu, #top_title, .patrollink {display:none;} |
− | } | + | #content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;height:100%;} |
| + | body {background-color:white;height:100%;} |
| + | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } |
| | | |
− | #first_s .container li ul li ul
| + | @font-face{ |
− | { width: 100%; | + | font-family: 'DIN B'; |
− | position: absolute; | + | src: url('https://static.igem.org/mediawiki/2019/f/f5/T--Jilin_China--Home--Font--Medium.otf'); |
− | left:100%; | + | font-weight: normal; |
− | top:0; | + | font-size: normal; |
− | display: none; | + | |
| } | | } |
− | #first_s .container li ul li li
| |
− | {
| |
− | height: 30px;
| |
− | line-height: 30px;
| |
| | | |
| + | @font-face{ |
| + | font-family: 'DIN B'; |
| + | src: url('https://static.igem.org/mediawiki/2019/9/90/T--Jilin_China--Home--Font--Bold.otf'); |
| + | font-weight: Bold; |
| + | font-size: normal; |
| } | | } |
| | | |
− | | + | h1,h2,h3,h4,h5,p{ |
− | /*
| + | font-family:'DIN B','DIN Medium'; |
− | 菜单按钮部分
| + | |
− | */
| + | |
− | #menu_btn{
| + | |
− | margin-top: 18px;
| + | |
− | display: none;
| + | |
− | width:10%;
| + | |
− | height:0px;
| + | |
− | background-color: gold;
| + | |
− | position: fixed;
| + | |
− | max-width: 60px;
| + | |
− | max-height: 60px;
| + | |
− | min-width: 30px;
| + | |
− | min-height: 30px;
| + | |
− | text-align: center;
| + | |
− | line-height: 50px; | + | |
| } | | } |
− | .cebian{
| + | h1, h2, h3, h4, h5, h6{ |
− | position: fixed;
| + | overflow:auto !important; |
− | bottom: 0;
| + | padding: 1rem 0 !important; |
− | margin-bottom: 0;
| + | |
− | z-index: 999;
| + | |
− | width: 100%;
| + | |
− | height: 50%;
| + | |
− | top:auto;
| + | |
− | font-size: 100%;
| + | |
− | background-color: #000;
| + | |
| } | | } |
− | .cebian > .menu_title{
| + | p{ |
− | position: relative;
| + | margin:0 !important; |
− | width: 100%;
| + | |
− | height: 20%;
| + | |
− | top:auto;
| + | |
− | bottom: 0px;
| + | |
− | background-color: green;
| + | |
− | /*border: 1px solid #c0c0c0;*/
| + | |
− | | + | |
| } | | } |
| + | html, |
| + | body, |
| + | div, |
| + | span, |
| + | applet, |
| + | object, |
| + | iframe, |
| + | h1, |
| + | h2, |
| + | h3, |
| + | h4, |
| + | h5, |
| + | h6, |
| + | p, |
| + | blockquote, |
| + | pre, |
| + | a, |
| + | abbr, |
| + | acronym, |
| + | address, |
| + | big, |
| + | cite, |
| + | code, |
| + | del, |
| + | dfn, |
| + | em, |
| + | img, |
| + | ins, |
| + | kbd, |
| + | q, |
| + | s, |
| + | samp, |
| + | small, |
| + | strike, |
| + | strong, |
| + | sub, |
| + | sup, |
| + | tt, |
| + | var, |
| + | b, |
| + | u, |
| + | i, |
| + | center, |
| + | dl, |
| + | dt, |
| + | dd, |
| + | ol, |
| + | ul, |
| + | li, |
| + | fieldset, |
| + | form, |
| + | label, |
| + | legend, |
| + | table, |
| + | caption, |
| + | tbody, |
| + | tfoot, |
| + | thead, |
| + | tr, |
| + | th, |
| + | td, |
| + | article, |
| + | aside, |
| + | canvas, |
| + | details, |
| + | embed, |
| + | figure, |
| + | figcaption, |
| + | footer, |
| + | header, |
| + | hgroup, |
| + | menu, |
| + | nav, |
| + | output, |
| + | ruby, |
| + | section, |
| + | summary, |
| + | time, |
| + | mark, |
| + | audio, |
| + | video { |
| | | |
− | .cebian > .menu_title> .menu_logo{
| + | border: 0; |
− | position: relative;
| + | |
− | width: 50%;
| + | |
− | height: 100%;
| + | |
− | background-color: green;
| + | |
− | | + | |
− | float: left;
| + | |
| | | |
| } | | } |
− | .cebian > .menu_title> .menu_button{
| |
− | position: relative;
| |
− | width: 50%;
| |
− | height: 100%;
| |
− | background-color: green;
| |
| | | |
− | float: right;
| |
| | | |
| | | |
| | | |
| + | html{ |
| + | height: 100% !important; |
| + | } |
| + | |
| + | body{ |
| + | background-color:#fff !important; |
| + | height:100% !important; |
| + | display:block !important; |
| + | position:relative !important; |
| + | overflow-x:hidden !important; |
| | | |
| } | | } |
− | .cebian > .menu_box{
| + | #bodyContent{ |
− | position: relative;
| + | height:100% !important; |
− | width: 100%;
| + | display:block !important; |
− | height: 80%;
| + | position:relative !important; |
| + | } |
| | | |
| + | #content{ |
| + | height:100% !important; |
| + | display:block !important; |
| + | position:relative !important; |
| | | |
| } | | } |
− | .cebian > .menu_box>.menu{
| |
− | position: relative;
| |
− | width: 22.5%;
| |
− | height: 30%;
| |
− | background-color: green;
| |
− | /*border: 1px solid #c0c0c0;*/
| |
− | float: left;
| |
− | margin-left: 2%;
| |
| | | |
| + | #mw-content-text{ |
| + | height:100% !important; |
| + | display:block !important; |
| + | position:relative !important; |
| } | | } |
− | /*
| + | |
− | 菜单按钮部分
| + | |
− | */
| + | #globalWrapper{ |
− | #second_s{ | + | height:100% !important; |
− | height: 700px;
| + | display:block !important; |
− | background-position: center center;
| + | position:relative !important; |
− | position: relative;
| + | |
− | background-color: rgba(236,132,255,1.00);
| + | |
| } | | } |
− | #third_s {
| + | .luanhaixin{ |
− | height: 824px;
| + | height:100% !important; |
− | position: relative;
| + | display:block !important; |
− | background-color: rgba(255,255,255,1.00);
| + | position:relative !important; |
| + | |
| + | |
| } | | } |
− | #third_s #third_1 {
| + | |
− | height: 810px;
| + | .s1 p{ |
− | background-color: rgba(255,255,255,1.00);
| + | float:left; |
− | position: relative;
| + | |
| } | | } |
− | #third_s #third_1 #third_1_1 {
| + | section{ |
− | background-color: rgba(195,128,129,1.00);
| + | font-family: 'DIN Alternate'; |
− | height: 810px;
| + | line-height: 150%; |
− | position: absolute;
| + | |
− | margin: 0 0;
| + | |
− | width: 75%;
| + | |
− | left: 19px;
| + | |
− | top: -37px;
| + | |
| } | | } |
− | #zhuan {
| + | |
− | margin-top: 18px;
| + | @media (min-width:1000px) { |
− | display: block;
| + | section{ |
− | width: 10%;
| + | line-height: 200%; |
− | height: 60px;
| + | |
− | background-color: gold;
| + | |
− | position: fixed;
| + | |
− | max-width: 60px;
| + | |
− | max-height: 60px;
| + | |
− | min-width: 30px;
| + | |
− | min-height: 30px;
| + | |
− | text-align: center;
| + | |
− | line-height: 50px;
| + | |
− | bottom: 45px;
| + | |
− | right: 134px;
| + | |
| } | | } |
| | | |
− | a{
| |
− | text-decoration: none;
| |
− | color: #4ba8ff;
| |
| } | | } |
| | | |
| | | |
− | .container { | + | |
− | padding-right: 15px;
| + | |
− | padding-left: 15px;
| + | .word { |
− | margin-right: auto;
| + | color: rgba(0,0,0,1.00); |
− | margin-left: auto;
| + | font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; |
| } | | } |
− | | + | p{ |
− | @media (min-width: 768px) {
| + | width: 100%; |
− | .container {
| + | height: auto;1 |
− | width: 750px;
| + | margin: 0 auto; |
| + | position: relative; |
| } | | } |
− | }
| |
| | | |
− | @media (min-width: 992px) {
| + | tbody{ |
− | .container { | + | width:50%; |
− | width: 970px;
| + | position: relative; |
| + | } |
| + | |
| + | #HQ_page .np1{ |
| + | color: rgba(0,0,0,1.00); |
| + | font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; |
| + | font-size: 39px; |
| + | padding-bottom: 25px; |
| + | padding-top: 25px; |
| } | | } |
| + | #HQ_page .np3 { |
| + | font-size: 26px; |
| + | margin-bottom: 13px; |
| } | | } |
| | | |
− | @media (min-width: 1200px) {
| + | #HQ_page .np5{ |
− | .container {
| + | font-size: 19px; |
− | width: 1170px;
| + | line-height: 31px; |
| + | margin-bottom: 13px; |
| } | | } |
− | }
| |
| | | |
− | .container-fluid {
| |
− | padding-right: 15px;
| |
− | padding-left: 15px;
| |
− | margin-right: auto;
| |
− | margin-left: auto;
| |
| | | |
− | }
| |
− | .row {
| |
− | margin-right: -15px;
| |
− | margin-left: -15px;
| |
− | }
| |
| | | |
− | .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
| |
− | position: relative;
| |
− | min-height: 1px;
| |
− | }
| |
− | .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
| |
− | float: left;
| |
− | }
| |
− | .col-xs-12 {
| |
− | width: 100%;
| |
− | }
| |
− | .col-xs-11 {
| |
− | width: 91.66666667%;
| |
− | }
| |
− | .col-xs-10 {
| |
− | width: 83.33333333%;
| |
− | }
| |
− | .col-xs-9 {
| |
− | width: 75%;
| |
− | }
| |
− | .col-xs-8 {
| |
− | width: 66.66666667%;
| |
− | }
| |
− | .col-xs-7 {
| |
− | width: 58.33333333%;
| |
− | }
| |
− | .col-xs-6 {
| |
− | width: 50%;
| |
− | }
| |
− | .col-xs-5 {
| |
− | width: 41.66666667%;
| |
− | }
| |
− | .col-xs-4 {
| |
− | width: 33.33333333%;
| |
− | }
| |
− | .col-xs-3 {
| |
− | width: 25%;
| |
− | }
| |
− | .col-xs-2 {
| |
− | width: 16.66666667%;
| |
− | }
| |
− | .col-xs-1 {
| |
− | width: 8.33333333%;
| |
− | }
| |
− | .col-xs-pull-12 {
| |
− | right: 100%;
| |
− | }
| |
− | .col-xs-pull-11 {
| |
− | right: 91.66666667%;
| |
− | }
| |
− | .col-xs-pull-10 {
| |
− | right: 83.33333333%;
| |
− | }
| |
− | .col-xs-pull-9 {
| |
− | right: 75%;
| |
− | }
| |
− | .col-xs-pull-8 {
| |
− | right: 66.66666667%;
| |
− | }
| |
− | .col-xs-pull-7 {
| |
− | right: 58.33333333%;
| |
− | }
| |
− | .col-xs-pull-6 {
| |
− | right: 50%;
| |
− | }
| |
− | .col-xs-pull-5 {
| |
− | right: 41.66666667%;
| |
− | }
| |
− | .col-xs-pull-4 {
| |
− | right: 33.33333333%;
| |
− | }
| |
− | .col-xs-pull-3 {
| |
− | right: 25%;
| |
− | }
| |
− | .col-xs-pull-2 {
| |
− | right: 16.66666667%;
| |
− | }
| |
− | .col-xs-pull-1 {
| |
− | right: 8.33333333%;
| |
− | }
| |
− | .col-xs-pull-0 {
| |
− | right: auto;
| |
− | }
| |
− | .col-xs-push-12 {
| |
− | left: 100%;
| |
− | }
| |
− | .col-xs-push-11 {
| |
− | left: 91.66666667%;
| |
− | }
| |
− | .col-xs-push-10 {
| |
− | left: 83.33333333%;
| |
− | }
| |
− | .col-xs-push-9 {
| |
− | left: 75%;
| |
− | }
| |
− | .col-xs-push-8 {
| |
− | left: 66.66666667%;
| |
− | }
| |
− | .col-xs-push-7 {
| |
− | left: 58.33333333%;
| |
− | }
| |
− | .col-xs-push-6 {
| |
− | left: 50%;
| |
− | }
| |
− | .col-xs-push-5 {
| |
− | left: 41.66666667%;
| |
− | }
| |
− | .col-xs-push-4 {
| |
− | left: 33.33333333%;
| |
− | }
| |
− | .col-xs-push-3 {
| |
− | left: 25%;
| |
− | }
| |
− | .col-xs-push-2 {
| |
− | left: 16.66666667%;
| |
− | }
| |
− | .col-xs-push-1 {
| |
− | left: 8.33333333%;
| |
− | }
| |
− | .col-xs-push-0 {
| |
− | left: auto;
| |
− | }
| |
− | .col-xs-offset-12 {
| |
− | margin-left: 100%;
| |
− | }
| |
− | .col-xs-offset-11 {
| |
− | margin-left: 91.66666667%;
| |
− | }
| |
− | .col-xs-offset-10 {
| |
− | margin-left: 83.33333333%;
| |
− | }
| |
− | .col-xs-offset-9 {
| |
− | margin-left: 75%;
| |
− | }
| |
− | .col-xs-offset-8 {
| |
− | margin-left: 66.66666667%;
| |
− | }
| |
− | .col-xs-offset-7 {
| |
− | margin-left: 58.33333333%;
| |
− | }
| |
− | .col-xs-offset-6 {
| |
− | margin-left: 50%;
| |
− | }
| |
− | .col-xs-offset-5 {
| |
− | margin-left: 41.66666667%;
| |
− | }
| |
− | .col-xs-offset-4 {
| |
− | margin-left: 33.33333333%;
| |
− | }
| |
− | .col-xs-offset-3 {
| |
− | margin-left: 25%;
| |
− | }
| |
− | .col-xs-offset-2 {
| |
− | margin-left: 16.66666667%;
| |
− | }
| |
− | .col-xs-offset-1 {
| |
− | margin-left: 8.33333333%;
| |
− | }
| |
− | .col-xs-offset-0 {
| |
− | margin-left: 0;
| |
− | }
| |
| | | |
− | @media (min-width: 768px) {
| + | |
− | .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
| + | |
− | float: left;
| + | #HQ_page p{ |
| + | font-size: auto; |
| + | line-height: auto; |
| + | margin-bottom: auto; |
| } | | } |
− | .col-sm-12 {
| |
− | width: 100%;
| |
− | }
| |
− | .col-sm-11 {
| |
− | width: 91.66666667%;
| |
− | }
| |
− | .col-sm-10 {
| |
− | width: 83.33333333%;
| |
− | }
| |
− | .col-sm-9 {
| |
− | width: 75%;
| |
− | }
| |
− | .col-sm-8 {
| |
− | width: 66.66666667%;
| |
− | }
| |
− | .col-sm-7 {
| |
− | width: 58.33333333%;
| |
− | }
| |
− | .col-sm-6 {
| |
− | width: 50%;
| |
− | }
| |
− | .col-sm-5 {
| |
− | width: 41.66666667%;
| |
− | }
| |
− | .col-sm-4 {
| |
− | width: 33.33333333%;
| |
− | }
| |
− | .col-sm-3 {
| |
− | width: 25%;
| |
− | }
| |
− | .col-sm-2 {
| |
− | width: 16.66666667%;
| |
− | }
| |
− | .col-sm-1 {
| |
− | width: 8.33333333%;
| |
− | }
| |
− | .col-sm-pull-12 {
| |
− | right: 100%;
| |
− | }
| |
− | .col-sm-pull-11 {
| |
− | right: 91.66666667%;
| |
− | }
| |
− | .col-sm-pull-10 {
| |
− | right: 83.33333333%;
| |
− | }
| |
− | .col-sm-pull-9 {
| |
− | right: 75%;
| |
− | }
| |
− | .col-sm-pull-8 {
| |
− | right: 66.66666667%;
| |
− | }
| |
− | .col-sm-pull-7 {
| |
− | right: 58.33333333%;
| |
− | }
| |
− | .col-sm-pull-6 {
| |
− | right: 50%;
| |
− | }
| |
− | .col-sm-pull-5 {
| |
− | right: 41.66666667%;
| |
− | }
| |
− | .col-sm-pull-4 {
| |
− | right: 33.33333333%;
| |
− | }
| |
− | .col-sm-pull-3 {
| |
− | right: 25%;
| |
− | }
| |
− | .col-sm-pull-2 {
| |
− | right: 16.66666667%;
| |
− | }
| |
− | .col-sm-pull-1 {
| |
− | right: 8.33333333%;
| |
− | }
| |
− | .col-sm-pull-0 {
| |
− | right: auto;
| |
− | }
| |
− | .col-sm-push-12 {
| |
− | left: 100%;
| |
− | }
| |
− | .col-sm-push-11 {
| |
− | left: 91.66666667%;
| |
− | }
| |
− | .col-sm-push-10 {
| |
− | left: 83.33333333%;
| |
− | }
| |
− | .col-sm-push-9 {
| |
− | left: 75%;
| |
− | }
| |
− | .col-sm-push-8 {
| |
− | left: 66.66666667%;
| |
− | }
| |
− | .col-sm-push-7 {
| |
− | left: 58.33333333%;
| |
− | }
| |
− | .col-sm-push-6 {
| |
− | left: 50%;
| |
− | }
| |
− | .col-sm-push-5 {
| |
− | left: 41.66666667%;
| |
− | }
| |
− | .col-sm-push-4 {
| |
− | left: 33.33333333%;
| |
− | }
| |
− | .col-sm-push-3 {
| |
− | left: 25%;
| |
− | }
| |
− | .col-sm-push-2 {
| |
− | left: 16.66666667%;
| |
− | }
| |
− | .col-sm-push-1 {
| |
− | left: 8.33333333%;
| |
− | }
| |
− | .col-sm-push-0 {
| |
− | left: auto;
| |
− | }
| |
− | .col-sm-offset-12 {
| |
− | margin-left: 100%;
| |
− | }
| |
− | .col-sm-offset-11 {
| |
− | margin-left: 91.66666667%;
| |
− | }
| |
− | .col-sm-offset-10 {
| |
− | margin-left: 83.33333333%;
| |
− | }
| |
− | .col-sm-offset-9 {
| |
− | margin-left: 75%;
| |
− | }
| |
− | .col-sm-offset-8 {
| |
− | margin-left: 66.66666667%;
| |
− | }
| |
− | .col-sm-offset-7 {
| |
− | margin-left: 58.33333333%;
| |
− | }
| |
− | .col-sm-offset-6 {
| |
− | margin-left: 50%;
| |
− | }
| |
− | .col-sm-offset-5 {
| |
− | margin-left: 41.66666667%;
| |
− | }
| |
− | .col-sm-offset-4 {
| |
− | margin-left: 33.33333333%;
| |
− | }
| |
− | .col-sm-offset-3 {
| |
− | margin-left: 25%;
| |
− | }
| |
− | .col-sm-offset-2 {
| |
− | margin-left: 16.66666667%;
| |
− | }
| |
− | .col-sm-offset-1 {
| |
− | margin-left: 8.33333333%;
| |
− | }
| |
− | .col-sm-offset-0 {
| |
− | margin-left: 0;
| |
− | }
| |
− | }
| |
− | @media (min-width: 992px) {
| |
− | .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
| |
− | float: left;
| |
− | }
| |
− | .col-md-12 {
| |
− | width: 100%;
| |
− | }
| |
− | .col-md-11 {
| |
− | width: 91.66666667%;
| |
− | }
| |
− | .col-md-10 {
| |
− | width: 83.33333333%;
| |
− | }
| |
− | .col-md-9 {
| |
− | width: 75%;
| |
− | }
| |
− | .col-md-8 {
| |
− | width: 66.66666667%;
| |
− | }
| |
− | .col-md-7 {
| |
− | width: 58.33333333%;
| |
− | }
| |
− | .col-md-6 {
| |
− | width: 50%;
| |
− | }
| |
− | .col-md-5 {
| |
− | width: 41.66666667%;
| |
− | }
| |
− | .col-md-4 {
| |
− | width: 33.33333333%;
| |
− | }
| |
− | .col-md-3 {
| |
− | width: 25%;
| |
− | }
| |
− | .col-md-2 {
| |
− | width: 16.66666667%;
| |
− | }
| |
− | .col-md-1 {
| |
− | width: 8.33333333%;
| |
− | }
| |
− | .col-md-pull-12 {
| |
− | right: 100%;
| |
− | }
| |
− | .col-md-pull-11 {
| |
− | right: 91.66666667%;
| |
− | }
| |
− | .col-md-pull-10 {
| |
− | right: 83.33333333%;
| |
− | }
| |
− | .col-md-pull-9 {
| |
− | right: 75%;
| |
− | }
| |
− | .col-md-pull-8 {
| |
− | right: 66.66666667%;
| |
− | }
| |
− | .col-md-pull-7 {
| |
− | right: 58.33333333%;
| |
− | }
| |
− | .col-md-pull-6 {
| |
− | right: 50%;
| |
− | }
| |
− | .col-md-pull-5 {
| |
− | right: 41.66666667%;
| |
− | }
| |
− | .col-md-pull-4 {
| |
− | right: 33.33333333%;
| |
− | }
| |
− | .col-md-pull-3 {
| |
− | right: 25%;
| |
− | }
| |
− | .col-md-pull-2 {
| |
− | right: 16.66666667%;
| |
− | }
| |
− | .col-md-pull-1 {
| |
− | right: 8.33333333%;
| |
− | }
| |
− | .col-md-pull-0 {
| |
− | right: auto;
| |
− | }
| |
− | .col-md-push-12 {
| |
− | left: 100%;
| |
− | }
| |
− | .col-md-push-11 {
| |
− | left: 91.66666667%;
| |
− | }
| |
− | .col-md-push-10 {
| |
− | left: 83.33333333%;
| |
− | }
| |
− | .col-md-push-9 {
| |
− | left: 75%;
| |
− | }
| |
− | .col-md-push-8 {
| |
− | left: 66.66666667%;
| |
− | }
| |
− | .col-md-push-7 {
| |
− | left: 58.33333333%;
| |
− | }
| |
− | .col-md-push-6 {
| |
− | left: 50%;
| |
− | }
| |
− | .col-md-push-5 {
| |
− | left: 41.66666667%;
| |
− | }
| |
− | .col-md-push-4 {
| |
− | left: 33.33333333%;
| |
− | }
| |
− | .col-md-push-3 {
| |
− | left: 25%;
| |
− | }
| |
− | .col-md-push-2 {
| |
− | left: 16.66666667%;
| |
− | }
| |
− | .col-md-push-1 {
| |
− | left: 8.33333333%;
| |
− | }
| |
− | .col-md-push-0 {
| |
− | left: auto;
| |
− | }
| |
− | .col-md-offset-12 {
| |
− | margin-left: 100%;
| |
− | }
| |
− | .col-md-offset-11 {
| |
− | margin-left: 91.66666667%;
| |
− | }
| |
− | .col-md-offset-10 {
| |
− | margin-left: 83.33333333%;
| |
− | }
| |
− | .col-md-offset-9 {
| |
− | margin-left: 75%;
| |
− | }
| |
− | .col-md-offset-8 {
| |
− | margin-left: 66.66666667%;
| |
− | }
| |
− | .col-md-offset-7 {
| |
− | margin-left: 58.33333333%;
| |
− | }
| |
− | .col-md-offset-6 {
| |
− | margin-left: 50%;
| |
− | }
| |
− | .col-md-offset-5 {
| |
− | margin-left: 41.66666667%;
| |
− | }
| |
− | .col-md-offset-4 {
| |
− | margin-left: 33.33333333%;
| |
− | }
| |
− | .col-md-offset-3 {
| |
− | margin-left: 25%;
| |
− | }
| |
− | .col-md-offset-2 {
| |
− | margin-left: 16.66666667%;
| |
− | }
| |
− | .col-md-offset-1 {
| |
− | margin-left: 8.33333333%;
| |
− | }
| |
− | .col-md-offset-0 {
| |
− | margin-left: 0;
| |
− | }
| |
− | }
| |
− | @media (min-width: 1200px) {
| |
− | .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
| |
− | float: left;
| |
− | }
| |
− | .col-lg-12 {
| |
− | width: 100%;
| |
− | }
| |
− | .col-lg-11 {
| |
− | width: 91.66666667%;
| |
− | }
| |
− | .col-lg-10 {
| |
− | width: 83.33333333%;
| |
− | }
| |
− | .col-lg-9 {
| |
− | width: 75%;
| |
− | }
| |
− | .col-lg-8 {
| |
− | width: 66.66666667%;
| |
− | }
| |
− | .col-lg-7 {
| |
− | width: 58.33333333%;
| |
− | }
| |
− | .col-lg-6 {
| |
− | width: 50%;
| |
− | }
| |
− | .col-lg-5 {
| |
− | width: 41.66666667%;
| |
− | }
| |
− | .col-lg-4 {
| |
− | width: 33.33333333%;
| |
− | }
| |
− | .col-lg-3 {
| |
− | width: 25%;
| |
− | }
| |
− | .col-lg-2 {
| |
− | width: 16.66666667%;
| |
− | }
| |
− | .col-lg-1 {
| |
− | width: 8.33333333%;
| |
− | }
| |
− | .col-lg-pull-12 {
| |
− | right: 100%;
| |
− | }
| |
− | .col-lg-pull-11 {
| |
− | right: 91.66666667%;
| |
− | }
| |
− | .col-lg-pull-10 {
| |
− | right: 83.33333333%;
| |
− | }
| |
− | .col-lg-pull-9 {
| |
− | right: 75%;
| |
− | }
| |
− | .col-lg-pull-8 {
| |
− | right: 66.66666667%;
| |
− | }
| |
− | .col-lg-pull-7 {
| |
− | right: 58.33333333%;
| |
− | }
| |
− | .col-lg-pull-6 {
| |
− | right: 50%;
| |
− | }
| |
− | .col-lg-pull-5 {
| |
− | right: 41.66666667%;
| |
− | }
| |
− | .col-lg-pull-4 {
| |
− | right: 33.33333333%;
| |
− | }
| |
− | .col-lg-pull-3 {
| |
− | right: 25%;
| |
− | }
| |
− | .col-lg-pull-2 {
| |
− | right: 16.66666667%;
| |
− | }
| |
− | .col-lg-pull-1 {
| |
− | right: 8.33333333%;
| |
− | }
| |
− | .col-lg-pull-0 {
| |
− | right: auto;
| |
− | }
| |
− | .col-lg-push-12 {
| |
− | left: 100%;
| |
− | }
| |
− | .col-lg-push-11 {
| |
− | left: 91.66666667%;
| |
− | }
| |
− | .col-lg-push-10 {
| |
− | left: 83.33333333%;
| |
− | }
| |
− | .col-lg-push-9 {
| |
− | left: 75%;
| |
− | }
| |
− | .col-lg-push-8 {
| |
− | left: 66.66666667%;
| |
− | }
| |
− | .col-lg-push-7 {
| |
− | left: 58.33333333%;
| |
− | }
| |
− | .col-lg-push-6 {
| |
− | left: 50%;
| |
− | }
| |
− | .col-lg-push-5 {
| |
− | left: 41.66666667%;
| |
− | }
| |
− | .col-lg-push-4 {
| |
− | left: 33.33333333%;
| |
− | }
| |
− | .col-lg-push-3 {
| |
− | left: 25%;
| |
− | }
| |
− | .col-lg-push-2 {
| |
− | left: 16.66666667%;
| |
− | }
| |
− | .col-lg-push-1 {
| |
− | left: 8.33333333%;
| |
− | }
| |
− | .col-lg-push-0 {
| |
− | left: auto;
| |
− | }
| |
− | .col-lg-offset-12 {
| |
− | margin-left: 100%;
| |
− | }
| |
− | .col-lg-offset-11 {
| |
− | margin-left: 91.66666667%;
| |
− | }
| |
− | .col-lg-offset-10 {
| |
− | margin-left: 83.33333333%;
| |
− | }
| |
− | .col-lg-offset-9 {
| |
− | margin-left: 75%;
| |
− | }
| |
− | .col-lg-offset-8 {
| |
− | margin-left: 66.66666667%;
| |
− | }
| |
− | .col-lg-offset-7 {
| |
− | margin-left: 58.33333333%;
| |
− | }
| |
− | .col-lg-offset-6 {
| |
− | margin-left: 50%;
| |
− | }
| |
− | .col-lg-offset-5 {
| |
− | margin-left: 41.66666667%;
| |
− | }
| |
− | .col-lg-offset-4 {
| |
− | margin-left: 33.33333333%;
| |
− | }
| |
− | .col-lg-offset-3 {
| |
− | margin-left: 25%;
| |
− | }
| |
− | .col-lg-offset-2 {
| |
− | margin-left: 16.66666667%;
| |
− | }
| |
− | .col-lg-offset-1 {
| |
− | margin-left: 8.33333333%;
| |
− | }
| |
− | .col-lg-offset-0 {
| |
− | margin-left: 0;
| |
− | }
| |
− | }
| |
| | | |
| | | |
− | .show {
| + | |
− | display: block !important;
| + | |
− | }
| + | |
− | .invisible { | + | |
− | visibility: hidden;
| + | |
− | }
| + | |
− | .text-hide {
| + | |
− | font: 0/0 a;
| + | |
− | color: transparent;
| + | |
− | text-shadow: none;
| + | |
− | background-color: transparent;
| + | |
− | border: 0;
| + | |
− | }
| + | |
− | .hidden {
| + | .picCont{ |
− | display: none !important;
| + | width: 85%; |
− | } | + | margin-top: 0; |
− | .affix { | + | margin-right: auto; |
− | position: fixed;
| + | margin-left: auto; |
− | }
| + | margin-bottom: 14px; |
− | @-ms-viewport {
| + | height: auto; |
− | width: device-width;
| + | overflow: hidden; |
− | }
| + | } |
− | .visible-xs,
| + | .picCont .pic{ |
− | .visible-sm,
| + | width: 300px; |
− | .visible-md,
| + | height: 500px; |
− | .visible-lg {
| + | float: left; |
− | display: none !important;
| + | margin-bottom: 0px; |
− | }
| + | background-position: center 0%; |
− | .visible-xs-block,
| + | overflow-x: hidden; |
− | .visible-xs-inline,
| + | overflow-y: hidden; |
− | .visible-xs-inline-block,
| + | background-size: 100% auto; |
− | .visible-sm-block,
| + | background-repeat: no-repeat; |
− | .visible-sm-inline,
| + | |
− | .visible-sm-inline-block,
| + | |
− | .visible-md-block,
| + | |
− | .visible-md-inline,
| + | |
− | .visible-md-inline-block,
| + | |
− | .visible-lg-block,
| + | |
− | .visible-lg-inline,
| + | |
− | .visible-lg-inline-block {
| + | |
− | display: none !important;
| + | |
− | }
| + | |
− | @media (max-width: 768px) {
| + | |
− | .visible-xs {
| + | |
− | display: block !important;
| + | |
− | }
| + | |
− | table.visible-xs {
| + | |
− | display: table !important;
| + | |
− | }
| + | |
− | tr.visible-xs {
| + | |
− | display: table-row !important;
| + | |
− | }
| + | |
− | th.visible-xs,
| + | |
− | td.visible-xs {
| + | |
− | display: table-cell !important;
| + | |
| } | | } |
| + | .picCont .pic .picinner { |
| + | height: 10%; |
| + | width: 100%; |
| + | background-color: rgba(0,227,202,0.79); |
| + | position: relative; |
| + | top: -10%; |
| } | | } |
− | @media (max-width: 768px) {
| + | .picCont .picword{ |
− | .visible-xs-block {
| + | position: absolute; |
− | display: block !important;
| + | float: left; |
| + | width: 100%; |
| + | text-align: center; |
| + | height: 100%; |
| } | | } |
| + | .tableCont { |
| + | display: block; |
| + | height: auto; |
| + | margin: 0 auto; |
| + | width: 85%; |
| + | overflow-x: hidden; |
| + | overflow-y: hidden; |
| } | | } |
− | @media (max-width: 768px) {
| + | .tableCont table { |
− | .visible-xs-inline {
| + | height: auto; |
− | display: inline !important;
| + | display: block; |
− | }
| + | border-collapse: collapse; |
| + | position: relative; |
| + | float: left; |
| + | text-align: center; |
| + | margin-top: 30px; |
| } | | } |
− | @media (max-width: 768px) {
| + | .tableCont table tbody { |
− | .visible-xs-inline-block {
| + | display: block; |
− | display: inline-block !important;
| + | width: auto; |
− | }
| + | height: auto; |
| } | | } |
− | @media (min-width: 768px) and (max-width: 991px) {
| + | .tableCont .table .tableinner { |
− | .visible-sm {
| + | height: 39px; |
− | display: block !important;
| + | width: 100%; |
− | }
| + | font-size: 18px; |
− | table.visible-sm {
| + | line-height: 31px; |
− | display: table !important;
| + | |
− | }
| + | |
− | tr.visible-sm {
| + | |
− | display: table-row !important;
| + | |
− | }
| + | |
− | th.visible-sm,
| + | |
− | td.visible-sm {
| + | |
− | display: table-cell !important;
| + | |
− | }
| + | |
| } | | } |
− | @media (min-width: 768px) and (max-width: 991px) {
| + | .tableCont table tbody tr:nth-child(2n) { |
− | .visible-sm-block {
| + | background-color: rgba(212,234,249,1.00); |
− | display: block !important;
| + | |
− | }
| + | |
| } | | } |
− | @media (min-width: 768px) and (max-width: 991px) {
| + | .tableCont table tbody tr:nth-child(2n+1) { |
− | .visible-sm-inline {
| + | background-color: rgba(220,239,252,1.00); |
− | display: inline !important;
| + | |
− | }
| + | |
| } | | } |
− | @media (min-width: 768px) and (max-width: 991px) {
| + | .tableCont table tbody tr:first-child { |
− | .visible-sm-inline-block {
| + | background-color: rgba(159,217,255,1.00); |
− | display: inline-block !important;
| + | |
− | }
| + | |
| } | | } |
− | @media (min-width: 992px) and (max-width: 1199px) {
| + | |
− | .visible-md {
| + | tbody td { |
− | display: block !important;
| + | border: 1px solid rgba(64,137,251,1.00); |
− | }
| + | width: 1000px; |
− | table.visible-md {
| + | height: 37px; |
− | display: table !important;
| + | |
− | }
| + | |
− | tr.visible-md {
| + | |
− | display: table-row !important;
| + | |
− | }
| + | |
− | th.visible-md,
| + | |
− | td.visible-md {
| + | |
− | display: table-cell !important;
| + | |
− | }
| + | |
| } | | } |
− | @media (min-width: 992px) and (max-width: 1199px) {
| + | |
− | .visible-md-block {
| + | |
− | display: block !important; | + | #top_title{ |
− | }
| + | display: none; |
| + | |
| } | | } |
− | @media (min-width: 992px) and (max-width: 1199px) {
| + | #content{ |
− | .visible-md-inline {
| + | width:100%; |
− | display: inline !important;
| + | margin: 00; |
− | }
| + | padding:00; |
− | }
| + | |
− | @media (min-width: 992px) and (max-width: 1199px) {
| + | |
− | .visible-md-inline-block {
| + | |
− | display: inline-block !important;
| + | |
− | }
| + | |
− | }
| + | |
− | @media (min-width: 1200px) {
| + | |
− | .visible-lg {
| + | |
− | display: block !important;
| + | |
− | }
| + | |
− | table.visible-lg {
| + | |
− | display: table !important;
| + | |
− | }
| + | |
− | tr.visible-lg {
| + | |
− | display: table-row !important;
| + | |
− | }
| + | |
− | th.visible-lg,
| + | |
− | td.visible-lg {
| + | |
− | display: table-cell !important;
| + | |
− | }
| + | |
− | }
| + | |
− | @media (min-width: 1200px) {
| + | |
− | .visible-lg-block {
| + | |
− | display: block !important;
| + | |
− | }
| + | |
− | }
| + | |
− | @media (min-width: 1200px) {
| + | |
− | .visible-lg-inline {
| + | |
− | display: inline !important;
| + | |
− | }
| + | |
− | }
| + | |
− | @media (min-width: 1200px) {
| + | |
− | .visible-lg-inline-block {
| + | |
− | display: inline-block !important;
| + | |
− | }
| + | |
− | }
| + | |
− | @media (max-width: 768px) {
| + | |
− | .hidden-xs {
| + | |
− | display: none !important;
| + | |
− | }
| + | |
− | }
| + | |
− | @media (min-width: 768px) and (max-width: 991px) {
| + | |
− | .hidden-sm {
| + | |
− | display: none !important;
| + | |
− | }
| + | |
− | }
| + | |
− | @media (min-width: 992px) and (max-width: 1199px) {
| + | |
− | .hidden-md {
| + | |
− | display: none !important;
| + | |
− | }
| + | |
− | }
| + | |
− | @media (min-width: 1200px) {
| + | |
− | .hidden-lg {
| + | |
− | display: none !important;
| + | |
− | }
| + | |
− | }
| + | |
− | .center-block {
| + | |
− | display: block;
| + | |
− | margin-right: auto;
| + | |
− | margin-left: auto;
| + | |
| } | | } |
| + | |
| + | |
| </style> | | </style> |
− | <script> | + | <!--屏幕内容第一条 导航栏 --> |
− | function $$(id){
| + | |
− | var el=document.getElementById(id);
| + | |
− | return el;
| + | |
− | }
| + | |
− | //获取全局元素部分
| + | |
− | var menudiv=document.getElementsByClassName("menu");
| + | |
− | var menu_box=document.getElementById("menu_box");
| + | |
− | var menu_btn=document.getElementById("menu_btn");
| + | |
− | var bg_menu=document.getElementById("bg_menu");
| + | |
− | //菜单部分函数
| + | |
− | function menuStart(){
| + | |
− | var menu_w=document.documentElement.clientWidth;
| + | |
− | var menu_h=document.documentElement.clientHeight;
| + | |
− | document.getElementById("lizi").innerHTML="宽度:"+menu_w+",高度:"+menu_h;
| + | |
− | for(var i=0;i<menudiv.length;i++){
| + | |
− | menudiv[i].style.marginTop=menu_box.offsetHeight*0.025+"px";
| + | |
− | }
| + | |
− | //菜单按钮的改变
| + | |
− | menu_btn.style.height=menu_btn.offsetWidth+"px";
| + | |
− | menu_btn.style.bottom=menu_btn.offsetWidth+"px";
| + | |
− | menu_btn.style.right=menu_btn.offsetWidth+"px"
| + | |
| | | |
| + | <!--this part for the home page content. with built-in css--> |
| + | <style> |
| + | |
| + | /*Body Content*/ |
| + | section{ |
| + | width:100%; |
| + | min-height:5rem; |
| + | border:0px red solid; |
| + | box-sizing:border-box; |
| + | padding:3vw 7.5vw 6.5vw; |
| + | } |
| + | section h1{ |
| + | font-size: 2.8rem !important; |
| + | /*font-family: 'DIN Condensed';*/ |
| + | } |
| + | section h1.bg-white{ |
| + | color: rgba(255,83,83,1) !important; |
| + | } |
| + | section h2{ |
| + | font-size: 2rem !important; |
| + | /*font-family: 'DIN Condensed';*/ |
| + | } |
| + | |
| + | section.left .text{ |
| + | float: left !important; |
| + | } |
| + | section.right .text{ |
| + | float: right !important; |
| + | } |
| + | section.right .text *{ |
| + | float: right !important; |
| + | } |
| + | section.right .text h1{ |
| + | text-align: left !important; |
| + | } |
| | | |
| | | |
− | if(menu_w>=430){
| + | .button:hover{ |
− | //整个菜单的改变
| + | box-shadow: 0.3rem 0 1rem rgba(0,0,0,0.3); |
− | bg_menu.style.width=35+"%";
| + | transition: all 0.3s ease; |
− | bg_menu.style.height=bg_menu.offsetWidth*0.8+"px";
| + | background: rgba(255,201,230,1); |
− | bg_menu.style.minWidth=150+"px";
| + | } |
− | bg_menu.style.minHeight=150+"px";
| + | .button a{ |
− | bg_menu.style.maxWidth=430+"px";
| + | display: block; |
− | bg_menu.style.maxHeight=430+"px";
| + | color: rgba(138,0,0,1); |
| + | } |
| + | |
| + | .button.colored{ |
| + | /*background: white;*/ |
| + | color: rgba(138,0,0,1); |
| + | } |
| + | |
| + | .clear{ |
| + | clear: both; |
| + | } |
| + | .s0{ |
| + | height:80%; |
| + | background:rgba(255,0,90,0.7); |
| + | overflow: hidden; |
| + | z-index: 1; |
| + | position:relative; |
| + | } |
| + | .s0 .title{ |
| + | position: relative; |
| + | width: 50%; |
| + | height: 100%; |
| + | } |
| + | .s0 .title img{ |
| + | position: absolute; |
| + | bottom: 5vh; |
| + | left:8vw; |
| + | } |
| + | .s0 .rose-background{ |
| + | background: url(https://static.igem.org/mediawiki/2019/f/fe/T--Jilin_China--Main--Rose.svg) no-repeat; |
| + | background-size: contain; |
| + | position: absolute; |
| + | right:3vw; |
| + | bottom:-25vw; |
| + | transform: rotate(-19.9deg); |
| + | filter: blur(10px) brightness(0.7); |
| + | opacity: 0.3; |
| + | width: 50vw; |
| + | height:75vw; |
| + | } |
| + | |
| + | .s1{ |
| + | background: white; |
| + | } |
| + | /*对于内容相关的CSS使用内容相关Class,对于与顺序相关的使用 .s[num]*/ |
| + | .introduction .text{ |
| + | width:100%; |
| + | |
| + | background-size: auto 75%; |
| + | background-position: 90% calc(50% + 1.25rem); |
| + | } |
| + | |
| + | |
| + | |
| + | |
| + | .symptom .digits .digit{ |
| + | font-size:5.5vw; |
| + | margin:0; |
| + | } |
| + | .symptom .digits .explain{ |
| + | margin:0 0 3vw !important; |
| + | border:0px; |
| + | } |
| + | |
| + | .symptom .small-bg .image{ |
| + | width: 44%; |
| + | padding: 0 5vw; |
| + | margin:0 auto; |
| + | box-sizing: border-box; |
| + | } |
| + | .symptom .small-bg .image img{ |
| + | width: 100%; |
| + | text-align: center; |
| + | margin: 0 auto; |
| + | } |
| + | .s2 .text{ |
| + | width: 100%; |
| + | text-align: center; |
| + | font-size:2vw; |
| + | } |
| + | |
| + | |
| | | |
− | bg_menu.style.right=menu_btn.offsetWidth*1.7+"px";
| |
− | bg_menu.style.bottom=menu_btn.offsetWidth*2.2+"px";
| |
− | bg_menu.style.left="auto";
| |
− | console.log(bg_menu.offsetHeight);
| |
− |
| |
| | | |
| + | |
| + | |
| + | |
| + | .s4{ |
| + | background: rgba(255,0,90,0.1); |
| + | min-height: 34vh; |
| + | z-index: -1; |
| + | position: relative; |
| + | } |
| + | |
| + | |
| + | .s5{ |
| + | background: white; |
| + | padding: 3vw 7.5vw; |
| + | } |
| + | .reverse p{ |
| + | color: rgba(199,0,0,1); |
| + | margin:0; |
| + | } |
| + | |
| + | |
| + | .s6{ |
| + | background: rgba(255,0,99,.5); |
| + | } |
| + | .our-system{ |
| + | color: rgba(138,0,0,1); |
| + | text-align: center; |
| + | } |
| + | |
| + | .our-system .theraputic{ |
| + | width: 100%; |
| + | } |
| + | |
| | | |
− | }
| + | .hp{ |
− | else{
| + | background: white; |
− | bg_menu.style.width=100+"%";
| + | text-align: center; |
− | bg_menu.style.height=50+"%";
| + | position: relative; |
− | bg_menu.style.right=0;
| + | padding-bottom: 5vw; |
− | bg_menu.style.left=0;
| + | |
− | bg_menu.style.bottom=0;
| + | |
| | | |
| + | } |
| + | .hp h1{ |
| + | text-align: center; |
| + | } |
| + | |
| + | |
| | | |
− | }
| + | .model h1{ |
− |
| + | position: relative; |
| + | text-align: center; |
| + | z-index: 1; |
| + | } |
| | | |
− | } | + | @keyframes swirling { |
| + | 0%{ |
| + | background-position: 48% 50%; |
| + | /*transform: rotate(0deg);*/ |
| + | } |
| + | 100%{ |
| + | background-position: 52% 50%; |
| + | /*transform: rotate(360deg);*/ |
| + | } |
| + | } |
| + | |
| + | .more h1{ |
| + | font-size: 3rem; |
| + | color: rgba(119,0,0,1); |
| + | } |
| + | .more .bottons{ |
| + | width: 100%; |
| + | |
| + | } |
| + | .more .botton{ |
| + | float: left; |
| + | width: calc(33% - 2rem); |
| + | margin: 1rem; |
| + | height: 20vw; |
| + | background: rgba(255,201,230,1); |
| + | transition: 0.3s all ease; |
| + | } |
| + | .more .botton:hover { |
| + | background: rgba(255,201,230,0.3); |
| + | transition: 0.3s all ease; |
| + | } |
| + | .more .botton p{ |
| + | margin: 0; |
| + | line-height: 20vw; |
| + | text-align: center; |
| + | font-size: 2.5vw; |
| + | } |
| + | </style> |
| + | <section class="s0 banner" style="padding: 0 0;"> |
| + | <div class="title"><img alt="" src="https://static.igem.org/mediawiki/2019/f/f8/T--Jilin_China--Main--Words_-_Title.svg"/></div> |
| + | <div class="rose-background"> |
| + | </div> |
| + | <canvas id="maincabg" width="1920px" height="1080px" style="height:100%; height:auto;display: block;position: absolute;top: 0px; z-index: -1;"></canvas> |
| + | </section> |
| + | <section class="s1 introduction left"> |
| + | <div></div> |
| + | <div class="text"> |
| + | <h1 class="bg-white">What's VVC?</h1> |
| + | <p>Vulvovaginal candidiasis (VVC) has been recognized as one of the most common infections in female reproductive organs. </p> |
| + | <p>VVC is mainly caused by <em>Candida albicans (C. albicans)</em>, accounting for more than 85% of the incidence, which seriously affects the normal life of women.</p> |
| + | </div> |
| + | <div class="clear"></div> |
| + | </section> |
| + | <section class="s2 symptom"> |
| + | <div class="digits"> |
| + | <p class="digit">70-75%</p> |
| + | <p class="explain">of women will suffer from VVC at least once in thier life time.</p> |
| + | <p class="digit">40-45%</p> |
| + | <p class="explain">will have 2 or more episodes.</p> |
| + | </div> |
| + | <div class="small-bg"> |
| + | <div class="title"> |
| + | <h2 class="bg-colored">Symptoms</h2> |
| + | </div> |
| + | <div class="image"> |
| + | <img alt="" src="https://static.igem.org/mediawiki/2019/7/71/T--Jilin_China--Main--Girl_under_Period.svg" /> |
| + | </div> |
| + | <div class="text"> |
| + | <p>Abnormal Vaginal Discharge</p> |
| + | <p>Genital and Vaginal burning</p> |
| + | <p>External Dysuria</p> |
| + | <p>Itching and Redness</p> |
| + | </div> |
| + | |
| + | <div class="clear"></div> |
| + | </div> |
| + | </section> |
| + | <section class="s3 current-treatment right"> |
| + | <div class="text"> |
| + | <h1 class="bg-white">How to Treat?</h1> |
| + | <p>Till now, as a commonly used antifungal drug for VVC treatment, vaginal azole preparations can inhibit the growth of C. albicans, or kill them directly.</p> |
| + | </div> |
| + | <div class="clear"></div> |
| + | </section> |
| + | <div class="interspace"> |
| + | <p>HOWEVER</p> |
| + | <div class="clear"></div> |
| + | </div> |
| + | <section class="s4 resistance right"> |
| + | <div class="text"> |
| + | <p id="ssss">The widespread usage of antifungal drugs and the increase in the number of fungal infections have led to the emergence of drug resistance, even the repeated recurrence to VVC of patients.</p> |
| + | </div> |
| + | <div class="clear"></div> |
| + | <div class="button colored"><a href="https://2019.igem.org/Team:Jilin_China/Background"><p>Learn More about The Background</p></a></div> |
| + | <div class="clear"></div> |
| + | </section> |
| + | <section class="s5 reverse"> |
| + | <p>But, there is a</p> |
| + | <p>New Therapy for Vulvovaginal Candidasis:</p> |
| + | <div class="clear"></div> |
| + | </section> |
| + | <section class="s6 our-system"> |
| + | <h1>Our Systems</h1> |
| + | <div class="sensing"> |
| + | <h2>Sensing System</h2> |
| + | <p style="margin-bottom:30px;margin-top:30px; ">Sensing system can sense C. albicans and activate the downstream gene.</p > |
| + | <img alt="" src="https://static.igem.org/mediawiki/2019/5/56/T--Jilin_China--Main--Words_-_Sensing_System.svg" /> |
| + | <p></p> |
| + | </div> |
| + | |
| + | |
| + | <div class="theraputic"> |
| + | <h2>Therapeutic System</h2> |
| + | <div> |
| + | <div class="effector1"><p>LL-37 can perforate the cell membrane of C. albicans.</p><img alt="" src="https://static.igem.org/mediawiki/2019/2/2e/T--Jilin_China--Main--LL37.svg"/></div> |
| + | <div class="effector2"><p>The β-1,3-glucanase can disrupt the </br>biofilm of C. albicans.</p><img alt="" src="https://static.igem.org/mediawiki/2019/3/32/T--Jilin_China--Main--beta-1%EF%BC%8C3-glu.svg"/></div> |
| + | <div class="effector3"><p>BDSF can inhibit hypha formation </br>by C. albicans.</p><img alt="" src="https://static.igem.org/mediawiki/2019/e/ed/T--Jilin_China--Main--BDSF.svg"/></div> |
| + | <div class="effector4"><p>Msp1 can destabilize the hyphae of C. albicans.</p><img alt="" src="https://static.igem.org/mediawiki/2019/c/cc/T--Jilin_China--Main--Msp1.svg"/></div> |
| + | </div> |
| + | </div> |
| + | <div class="clear"></div> |
| + | <div class="button colored"><a href="https://2019.igem.org/Team:Jilin_China/Design"><p>Learn More about Our Design</p></a></div> |
| + | <div class="clear"></div> |
| + | </section> |
| + | <section class="s7 hp"> |
| | | |
− | //窗口加载
| |
− | window.onload=function(){
| |
− | menu_btn.style.display="block";
| |
− | menuStart();
| |
− | document.getElementById('bg_menu').classList.add("hidden");
| |
| | | |
− | }
| |
− | //窗口改变
| |
− | window.onresize = function(){
| |
− | menuStart();
| |
− | }
| |
| | | |
− | //自定义菜单开关
| |
− | menu_btn.onclick=function(){
| |
| | | |
− | if(hasClass(bg_menu, 'hidden')){
| |
− | removeClass(bg_menu,'hidden');
| |
− | }
| |
− | else{
| |
− | addClass(bg_menu,'hidden');
| |
− | }
| |
− | menuStart();
| |
− | }
| |
− | //特效部分
| |
− | //导航鼠标hover
| |
− | var nav_bg=document.getElementById("nav_bg");
| |
− | var list_1=document.getElementsByClassName("list_1");//获取导航外层项目
| |
| | | |
− | function nav_anti(){
| + | <h1 class="bg-white">Practices Facilitated Our Project</h1> |
− | for(var i=0;i<list_1.length;i++){
| + | |
− | list_1[i].onmouseenter=function(){
| + | <div class="third_s"> |
− | nav_bg.style.backgroundColor="#fff";
| + | <div id="third_1"> |
− | nav_bg.style.transition =0.5+"s";
| + | <div style="padding: 7.5vw"><img src="https://static.igem.org/mediawiki/2019/b/bc/T--Jilin_China--HP--HP_Overview.svg" width="100%" style=" margin: 0 auto"></div> |
− | }
| + | </div> |
− | list_1[i].onmouseleave=function(){
| + | |
− | nav_bg.style.backgroundColor="transparent";
| + | |
− | }
| + | |
− | } | + | |
− | }
| + | |
− | nav_anti();
| + | |
| | | |
| | | |
− | $$("zhuan").onclick=function(){
| + | |
− | $$("third_1_1").style.transition=1+"s linear";
| + | |
− | $$("third_1_1").style.transform="rotateY("+180+"deg)";
| + | <div class="clear"></div> |
− | }
| + | </section> |
− | function $$(id){
| + | |
− | var el=document.getElementById(id); | + | <style> |
− | return el; | + | |
− | } | + | |
− | function $C$(Class){
| + | |
− | var el=document.getElementsByClassName(Class); | + | |
− | return el;
| + | .s8 .text { |
| + | |
| + | float: right; |
| + | z-index: 20000; |
| + | |
| + | |
| + | } |
| + | .modelbg{ |
| + | z-index: 20px; |
| } | | } |
| | | |
− | //有关类名字的方法 | + | </style> |
− | function addClass(el, className) {
| + | |
− | if (hasClass(el, className)) {
| + | |
− | return;
| + | |
− | }
| + | |
− | let newClass = el.className.split(' ');
| + | |
− | newClass.push(className);
| + | |
− | el.className = newClass.join(' ');
| + | |
− | }
| + | |
| | | |
− | function hasClass(el, className) {
| |
− | // \s匹配任何空白字符,包括空格、制表符、换页符等等
| |
− | let reg = new RegExp('(^|\\s)' + className + '(\\s|$)');
| |
− | return reg.test(el.className);
| |
− | }
| |
− | function removeClass(el, className){
| |
− | if (!hasClass(el, className)) {
| |
− | return;
| |
− | }
| |
− | let newClass = el.className.split(' ');
| |
− | newClass.forEach(function(val, index, newClass){
| |
− | if(val === className){
| |
− | newClass.splice(index,1);
| |
− | }
| |
− | }) ;
| |
− | el.className = newClass.join(' ');
| |
− | }
| |
| | | |
− | //获取屏幕上滚高度
| |
− | function getScrollTop(){
| |
− | var scrollTop=0;
| |
− | if(document.documentElement&&document.documentElement.scrollTop){
| |
− | scrollTop=document.documentElement.scrollTop;
| |
− | }else if(document.body){
| |
− | scrollTop=document.body.scrollTop;
| |
− | }
| |
− | return scrollTop;
| |
− | }
| |
− | var content={
| |
− | detail : [
| |
| | | |
− | {title : "ertyu",
| |
− | para : [
| |
| | | |
| + | <section class="s8 model right"> |
| + | <h1 class="bg-white">Model</h1> |
| + | <div class="text"> |
| | | |
− | {
| + | <p>Our project is well conducted by Model in terms of experiments and prediction of future application. Our Model is constituted with</br></br>1. C. albicans Sensing Model</br>2. Gene Concentration Prediction Model</br>3. Market Prediction Model</p> |
− | word : "我是第一段",
| + | </div> |
− | pic : "1.png",
| + | <div class="clear"></div> |
− | strong : ["strong","asd"],
| + | <div class="button colored"><a href="https://2019.igem.org/Team:Jilin_China/Model"><p>Learn More about Our Model</p></a></div> |
− | div : {
| + | <div class="clear"></div> |
− | id : "chart1",
| + | </section> |
− | class : ["strong","asd"]
| + | |
− | }
| + | |
− | },
| + | |
| | | |
− | {
| |
− | word : "你知道吗",
| |
− | pic : "none",
| |
− | strong : []
| |
− | }
| |
| | | |
| | | |
− | ]},
| |
| | | |
| + | <section class="s9 more"> |
| + | <h1>In Case You Missed Them:</h1> |
| + | <div class="bottons"> |
| + | <div id="bbgd" class="botton otr"><p>Background</p><a class="foota otr1" href="https://2019.igem.org/Team:Jilin_China/Background"></a></div> |
| + | <div id="design" class="botton otr"><p>Design</p><a class="foota otr1" href="https://2019.igem.org/Team:Jilin_China/Design"></a></div> |
| | | |
| + | <div id="result" class="botton otr"><p>Result</p><a class="foota otr1" href="https://2019.igem.org/Result"></a></div> |
| | | |
− | {title : "ert2121221",
| + | <div id="par" class="botton otr"><p>Parts</p><a class="foota otr1" href="https://2019.igem.org/Team:Jilin_China/Parts"></a></div> |
− | para : [
| + | |
| | | |
| + | <div id="hpp" class="botton otr"><p>Practices</p><a class="foota otr1" href="https://2019.igem.org/Team:Jilin_China/Human_Practices"></a></div> |
| + | <div id="medal" class="botton otr"><p>Medals</p><a class="foota otr1" href="https://2019.igem.org/Team:Jilin_China/Medals"></a></div> |
| + | </div> |
| + | <div class="clear"></div> |
| + | </section> |
| | | |
− | {
| + | <style> |
− | word : "我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你",
| + | #bbgd{ |
− | pic : "1.png",
| + | background-image: url(https://static.igem.org/mediawiki/2019/d/d4/T--Jilin_China--Main--back.jpg); |
− | strong : ["strong","asd"],
| + | background-size: cover; |
− | div : {
| + | } |
− | id : "chart1",
| + | |
− | class : ["strong","asd"]
| + | #design{ |
− | }
| + | background-image: url(https://static.igem.org/mediawiki/2019/d/d9/T--Jilin_China--Main--design.JPG); |
− | },
| + | background-size: cover; |
| + | } |
| + | #result{ |
| + | background-image: url(https://static.igem.org/mediawiki/2019/6/6b/T--Jilin_China--Main--result.JPG); |
| + | background-size: cover; |
| + | } |
| + | #par{ |
| + | background-image: url(https://static.igem.org/mediawiki/2019/b/b2/T--Jilin_China--Main--part.jpg); |
| + | background-size: cover; |
| + | } |
| + | #hpp{ |
| + | background-image: url(https://static.igem.org/mediawiki/2019/9/9a/T--Jilin_China--Main--HP.jpg); |
| + | background-size: cover; |
| + | } |
| + | #medal{ |
| + | background-image: url(https://static.igem.org/mediawiki/2019/8/80/T--Jilin_China--Main--model.JPG); |
| + | background-size: cover; |
| + | } |
| | | |
− | {
| |
− | word : "你知道吗",
| |
− | pic : "none",
| |
− | strong : []
| |
− | },
| |
| | | |
− | {
| |
− | word : "你知道吗",
| |
− | pic : "none",
| |
− | strong : []
| |
− | },
| |
| | | |
− | ]}
| |
| | | |
− | ]
| + | .otr{ |
− | }
| + | display: block; |
− | var contElement=[];
| + | position: relative; |
− | function renderWord(){
| + | |
− | for(var i=0;i<content.detail.length;i++){ | + | color: #fff; |
− | var tT=document.createElement("h1"); | + | text-shadow: 5px 2px 35px #000; |
− | tT.innerHTML=content.detail[i].title; | + | transition: 1s; |
− | console.log(tT);
| + | |
− | contElement.push(tT); | + | |
− | for(var j=0;j<content.detail[i].para.length;j++){
| + | |
− | var tP=document.createElement("p");
| + | |
− | tP.innerHTML=content.detail[i].para[j].word;
| + | |
− | console.log(tP);
| + | |
− | contElement.push(tP);
| + | |
− | if(content.detail[i].para[j].pic!="none"){
| + | |
− | var tImg=document.createElement("div");
| + | |
− | tImg.innerHTML="<img src=\'"+content.detail[i].para[j].pic+"\'>";
| + | |
− | console.log(tImg);
| + | |
− | contElement.push(tImg);
| + | |
− | }
| + | |
− | }
| + | |
| } | | } |
− | for(var i=0;i<contElement.length;i++){ | + | |
− | $$("third_1_1").appendChild(contElement[i]);
| + | |
| + | .otr:hover{ |
| + | text-shadow: 5px 2px 10px #000; |
| } | | } |
| | | |
| + | .otr1{ |
| + | display: block; |
| + | position: relative; |
| + | top: 0vw; |
| + | } |
| + | </style> |
| | | |
− | }
| |
− | renderWord();
| |
| | | |
− | </script> | + | </html> |
− | <div id="bg_menu" class="cebian hidden">
| + | |
− | <div class="menu_title">
| + | |
− | <div class="menu_logo">jilinchina!</div>
| + | |
− | <div class="menu_button" id="menu_button">取消按钮</div>
| + | |
− | </div>
| + | |
− | <div id="menu_box" class="menu_box">
| + | |
− | <div id="lizi" class="menu">第一块</div>
| + | |
− | <div class="menu">第一块</div>
| + | |
− | <div class="menu">第一块</div>
| + | |
− | <div class="menu">第一块</div>
| + | |
− | <div class="menu">第一块</div>
| + | |
− | <div class="menu">第一块</div>
| + | |
− | <div class="menu">第一块</div>
| + | |
− | <div class="menu">第一块</div>
| + | |
− |
| + | |
− | </div>
| + | |
− | </div>
| + | |
− | <!--屏幕内容第一条 导航栏 -->
| + | |
− | <nav id="first_s">
| + | |
− | <div id="nav_bg" class="container-fluid">
| + | |
− | <div class="container">
| + | |
− | <div class="navbar-header">
| + | |
− | <a class="navbar-brand" href="#">Jilin_China</a>
| + | |
− | </div>
| + | |
− | <ul class="hidden-xs">
| + | |
− | <li class="active list_1"><a href="#">Home</a></li>
| + | |
− | <li class="list_1"><a href="#">第一块</a>
| + | |
− | <ul>
| + | |
− | <li>内一块</li>
| + | |
− | <li>内一块
| + | |
− | <ul>
| + | |
− | <li>内二块</li>
| + | |
− | <li>内二块</li>
| + | |
− | <li>内二块</li>
| + | |
− | </ul>
| + | |
− | </li>
| + | |
− | <li>内一块</li>
| + | |
− | </ul>
| + | |
− | </li>
| + | |
− | <li class="list_1"><a href="#">第二块</a></li>
| + | |
− | <li class="list_1"><a href="#">第三块</a></li>
| + | |
− | <li class="list_1"><a href="#">第四块</a></li>
| + | |
− | <li class="list_1"><a href="#">第五块</a></li>
| + | |
− | <li class="list_1"><a href="#">第四块</a></li>
| + | |
− | <li class="list_1"><a href="#">第五块</a></li>
| + | |
− | </ul>
| + | |
− |
| + | |
− | </div>
| + | |
− | </div>
| + | |
− | </nav>
| + | |
− | <div id="second_s" class="banner container-fluid">
| + | |
− |
| + | |
| | | |
− | </div>
| |
− | <div id="third_s" class="container-fluid">
| |
− | <div id="third_1" class="container">
| |
− | <div id="third_1_1">
| |
− | backface-visibility:hidden;
| |
− | </div>
| |
− | </div>
| |
| | | |
− | </div>
| + | <html> |
− | <div id="zhuan">翻转</div>
| + | |
− | <div id="menu_btn">菜单</div>
| + | <script src="https://2019.igem.org/wiki/index.php?title=Template:Jilin_China/tool.js&action=raw&ctype=text/javascript"></script> |
| + | <script src="https://2019.igem.org/wiki/index.php?title=Template:Jilin_China/bubble.js&action=raw&ctype=text/javascript"></script> |
| + | <script type="text/javascript"> |
| + | |
| + | let configs = { |
| + | colorStart: "#fff4e6", |
| + | colorStop: "#ffe9e4", |
| + | |
| + | compose: "source-over", |
| + | bubbleFunc: () => `hsla(${Math.random() * 50}, 100%, 50%, .3)`, |
| + | canvas: $$("maincabg") |
| + | } |
| + | |
| + | |
| + | bubbly(configs); |
| + | </script> |
| </html> | | </html> |
| + | {{:Team:Jilin_China/foot_Cont}} |