|
|
| Line 246: |
Line 246: |
| | } | | } |
| | | | |
| − | @media screen and (max-width: 880px) { | + | @media screen and (max-width: 900px) { |
| | | | |
| | .daohang .caidan { | | .daohang .caidan { |
| Line 300: |
Line 300: |
| | width: 80%; | | width: 80%; |
| | /* height: auto; */ | | /* height: auto; */ |
| − | margin: 20px auto; | + | margin: 20px 40px 0 0; |
| | /* right: 2%; */ | | /* right: 2%; */ |
| | /* top: 90px; */ | | /* top: 90px; */ |
| − | padding: 20px 3%; | + | padding: 50px 3%; |
| − | /* float: right; */ | + | float: right; |
| | /* position: relative; */ | | /* position: relative; */ |
| | background-color: #FFF; | | background-color: #FFF; |
| Line 313: |
Line 313: |
| | /* display: block; */ | | /* display: block; */ |
| | /* font-family: Arial, Verdana, Sans-serif; */ | | /* font-family: Arial, Verdana, Sans-serif; */ |
| − | }
| |
| − |
| |
| − | .lunbotu{
| |
| − | text-align: center;
| |
| − | /* height: 100vh; */
| |
| − | /* border-bottom: 1px solid #676767;
| |
| − | box-shadow: 0 1px 3px #676767; */
| |
| − | }
| |
| − |
| |
| − | .fenjiexian {
| |
| − | height: 5px;
| |
| − | width: 100%;
| |
| − | background-color: #676767;
| |
| − | margin: 20px 0;
| |
| − | /* border-bottom: 1px solid #676767; */
| |
| − | /* box-shadow: 0 1px 3px #676767; */
| |
| − | }
| |
| − |
| |
| − | .chatu1{
| |
| − | width: 16%;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | .chatu2{
| |
| − | width: 50%;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | .chatu3{
| |
| − | width: 45%;
| |
| − | margin-left: 55%;
| |
| − | /* float: right;
| |
| − | overflow: hidden; */
| |
| − |
| |
| | } | | } |
| | | | |
| | .cebian { | | .cebian { |
| − | width: 15%; | + | width: 200px; |
| | /* height: 80vh; */ | | /* height: 80vh; */ |
| | float: left; | | float: left; |
| Line 359: |
Line 325: |
| | /* border:2px solid black */ | | /* border:2px solid black */ |
| | /* background-color: #323643 */ | | /* background-color: #323643 */ |
| | + | } |
| | + | |
| | + | .zhengwen p{ |
| | + | text-align: justify !important; |
| | + | font-family: 'Times New Roman',Helvetica,'Open Sans', Arial, sans-serif !important; |
| | + | color: #3B3B3B; |
| | + | font-size: 26px !important; |
| | + | padding-right: 20px; |
| | } | | } |
| | | | |
| Line 369: |
Line 343: |
| | | | |
| | .h1 { | | .h1 { |
| − | height: 100px;
| + | line-height: 55px; |
| − | line-height: 100px; | + | |
| | font-weight: bold; | | font-weight: bold; |
| | + | height:auto; |
| | font-family: 'Product Sans', sans-serif; | | font-family: 'Product Sans', sans-serif; |
| − | font-size: 50px; | + | font-size: 40px; |
| − | color: black; | + | color: #3B3B3B; |
| − | border-bottom: 3px solid black; | + | border-bottom: 2px solid #676767; |
| − | /* margin: 0 2.4%; */ | + | margin-bottom: 20px; |
| | + | } |
| | + | |
| | + | .h2 { |
| | + | height: 40px; |
| | + | line-height: 40px; |
| | + | font-weight: bold; |
| | + | height:auto; |
| | + | /* font-weight: bold; */ |
| | + | font-family: 'Product Sans', sans-serif; |
| | + | font-size: 30px; |
| | + | color: #484848; |
| | + | /* margin-bottom: 20px; */ |
| | + | } |
| | + | |
| | + | .h3 { |
| | + | height: 30px; |
| | + | line-height: 30px; |
| | + | font-weight: bold; |
| | + | height:auto; |
| | + | /* font-weight: bold; */ |
| | + | font-family: 'Product Sans', sans-serif; |
| | + | font-size: 24px; |
| | + | color: #484848; |
| | + | /* margin-bottom: 20px; */ |
| | + | } |
| | + | |
| | + | table { |
| | + | color: #3B3B3B; |
| | } | | } |
| | | | |
| Line 489: |
Line 491: |
| | } | | } |
| | </style> | | </style> |
| − | <!-- 轮播图CSS -->
| |
| − | <style class="text/css">
| |
| − |
| |
| − | .csslider {
| |
| − | -moz-perspective: 1300px;
| |
| − | -ms-perspective: 1300px;
| |
| − | -webkit-perspective: 1300px;
| |
| − | perspective: 1300px;
| |
| − | display: inline-block;
| |
| − | text-align: left;
| |
| − | position: relative;
| |
| − | margin-bottom: 22px;
| |
| − | }
| |
| − | .csslider > input {
| |
| − | display: none;
| |
| − | }
| |
| − | .csslider > input:nth-of-type(10):checked ~ ul li:first-of-type {
| |
| − | margin-left: -900%;
| |
| − | }
| |
| − | .csslider > input:nth-of-type(9):checked ~ ul li:first-of-type {
| |
| − | margin-left: -800%;
| |
| − | }
| |
| − | .csslider > input:nth-of-type(8):checked ~ ul li:first-of-type {
| |
| − | margin-left: -700%;
| |
| − | }
| |
| − | .csslider > input:nth-of-type(7):checked ~ ul li:first-of-type {
| |
| − | margin-left: -600%;
| |
| − | }
| |
| − | .csslider > input:nth-of-type(6):checked ~ ul li:first-of-type {
| |
| − | margin-left: -500%;
| |
| − | }
| |
| − | .csslider > input:nth-of-type(5):checked ~ ul li:first-of-type {
| |
| − | margin-left: -400%;
| |
| − | }
| |
| − | .csslider > input:nth-of-type(4):checked ~ ul li:first-of-type {
| |
| − | margin-left: -300%;
| |
| − | }
| |
| − | .csslider > input:nth-of-type(3):checked ~ ul li:first-of-type {
| |
| − | margin-left: -200%;
| |
| − | }
| |
| − | .csslider > input:nth-of-type(2):checked ~ ul li:first-of-type {
| |
| − | margin-left: -100%;
| |
| − | }
| |
| − | .csslider > input:nth-of-type(1):checked ~ ul li:first-of-type {
| |
| − | margin-left: 0%;
| |
| − | }
| |
| − | .csslider > ul {
| |
| − | position: relative;
| |
| − | width: 900px;
| |
| − | height: 500px;
| |
| − | z-index: 1;
| |
| − | font-size: 0;
| |
| − | line-height: 0;
| |
| − | background-color: #d1d1d1;
| |
| − | border: 10px solid #d1d1d1;
| |
| − | margin: 0 auto;
| |
| − | padding: 0;
| |
| − | overflow: hidden;
| |
| − | white-space: nowrap;
| |
| − | -moz-box-sizing: border-box;
| |
| − | -webkit-box-sizing: border-box;
| |
| − | box-sizing: border-box;
| |
| − | }
| |
| − | .csslider > ul > li {
| |
| − | position: relative;
| |
| − | display: inline-block;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | overflow: hidden;
| |
| − | font-size: 15px;
| |
| − | font-size: initial;
| |
| − | line-height: normal;
| |
| − | -moz-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
| |
| − | -o-transition: all 0.5s ease-out;
| |
| − | -webkit-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
| |
| − | transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
| |
| − | -moz-background-size: cover;
| |
| − | -o-background-size: cover;
| |
| − | -webkit-background-size: cover;
| |
| − | background-size: cover;
| |
| − | vertical-align: top;
| |
| − | -moz-box-sizing: border-box;
| |
| − | -webkit-box-sizing: border-box;
| |
| − | box-sizing: border-box;
| |
| − | white-space: normal;
| |
| − | }
| |
| − |
| |
| − | .csslider > .navigation {
| |
| − | position: absolute;
| |
| − | bottom: -10px;
| |
| − | left: 50%;
| |
| − | z-index: 10;
| |
| − | margin-bottom: -10px;
| |
| − | font-size: 0;
| |
| − | line-height: 0;
| |
| − | text-align: center;
| |
| − | -webkit-touch-callout: none;
| |
| − | -webkit-user-select: none;
| |
| − | -khtml-user-select: none;
| |
| − | -moz-user-select: none;
| |
| − | -ms-user-select: none;
| |
| − | user-select: none;
| |
| − | }
| |
| − | .csslider > .navigation > div {
| |
| − | margin-left: -100%;
| |
| − | }
| |
| − | .csslider > .navigation label {
| |
| − | position: relative;
| |
| − | display: inline-block;
| |
| − | cursor: pointer;
| |
| − | border-radius: 50%;
| |
| − | margin: 0 2px;
| |
| − | padding: 5px;
| |
| − | background: #d1d1d1;
| |
| − | }
| |
| − | .csslider > .navigation label:hover:after {
| |
| − | opacity: 1;
| |
| − | }
| |
| − | .csslider > .navigation label:after {
| |
| − | content: '';
| |
| − | position: absolute;
| |
| − | left: 50%;
| |
| − | top: 50%;
| |
| − | margin-left: -5px;
| |
| − | margin-top: -5px;
| |
| − | background: #f51720;
| |
| − | border-radius: 50%;
| |
| − | padding: 5px;
| |
| − | opacity: 0;
| |
| − | }
| |
| − | .csslider > .arrows {
| |
| − | -webkit-touch-callout: none;
| |
| − | -webkit-user-select: none;
| |
| − | -khtml-user-select: none;
| |
| − | -moz-user-select: none;
| |
| − | -ms-user-select: none;
| |
| − | user-select: none;
| |
| − | }
| |
| − | .csslider.inside .navigation {
| |
| − | bottom: 10px;
| |
| − | margin-bottom: 10px;
| |
| − | }
| |
| − | .csslider.inside .navigation label {
| |
| − | border: 1px solid #7e7e7e;
| |
| − | }
| |
| − | .csslider > input:nth-of-type(1):checked ~ .navigation label:nth-of-type(1):after,
| |
| − | .csslider > input:nth-of-type(2):checked ~ .navigation label:nth-of-type(2):after,
| |
| − | .csslider > input:nth-of-type(3):checked ~ .navigation label:nth-of-type(3):after,
| |
| − | .csslider > input:nth-of-type(4):checked ~ .navigation label:nth-of-type(4):after,
| |
| − | .csslider > input:nth-of-type(5):checked ~ .navigation label:nth-of-type(5):after,
| |
| − | .csslider > input:nth-of-type(6):checked ~ .navigation label:nth-of-type(6):after,
| |
| − | .csslider > input:nth-of-type(7):checked ~ .navigation label:nth-of-type(7):after,
| |
| − | .csslider > input:nth-of-type(8):checked ~ .navigation label:nth-of-type(8):after,
| |
| − | .csslider > input:nth-of-type(9):checked ~ .navigation label:nth-of-type(9):after,
| |
| − | .csslider > input:nth-of-type(10):checked ~ .navigation label:nth-of-type(10):after,
| |
| − | .csslider > input:nth-of-type(11):checked ~ .navigation label:nth-of-type(11):after {
| |
| − | opacity: 1;
| |
| − | }
| |
| − | .csslider > .arrows {
| |
| − | position: absolute;
| |
| − | left: -31px;
| |
| − | top: 50%;
| |
| − | width: 100%;
| |
| − | height: 26px;
| |
| − | padding: 0 31px;
| |
| − | z-index: 0;
| |
| − | -moz-box-sizing: content-box;
| |
| − | -webkit-box-sizing: content-box;
| |
| − | box-sizing: content-box;
| |
| − | }
| |
| − | .csslider > .arrows label {
| |
| − | display: none;
| |
| − | position: absolute;
| |
| − | top: -50%;
| |
| − | padding: 13px;
| |
| − | box-shadow: inset 2px -2px 0 1px #d1d1d1;
| |
| − | cursor: pointer;
| |
| − | -moz-transition: .15s;
| |
| − | -o-transition: .15s;
| |
| − | -webkit-transition: .15s;
| |
| − | transition: .15s;
| |
| − | }
| |
| − | .csslider > .arrows label:hover {
| |
| − | box-shadow: inset 3px -3px 0 2px #f51720;
| |
| − | margin: 0 0px;
| |
| − | }
| |
| − | .csslider > .arrows label:before {
| |
| − | content: '';
| |
| − | position: absolute;
| |
| − | top: -100%;
| |
| − | left: -100%;
| |
| − | height: 300%;
| |
| − | width: 300%;
| |
| − | }
| |
| − | .csslider.infinity > input:first-of-type:checked ~ .arrows label:last-of-type,
| |
| − | .csslider > input:nth-of-type(1):checked ~ .arrows label:nth-of-type(0),
| |
| − | .csslider > input:nth-of-type(2):checked ~ .arrows label:nth-of-type(1),
| |
| − | .csslider > input:nth-of-type(3):checked ~ .arrows label:nth-of-type(2),
| |
| − | .csslider > input:nth-of-type(4):checked ~ .arrows label:nth-of-type(3),
| |
| − | .csslider > input:nth-of-type(5):checked ~ .arrows label:nth-of-type(4),
| |
| − | .csslider > input:nth-of-type(6):checked ~ .arrows label:nth-of-type(5),
| |
| − | .csslider > input:nth-of-type(7):checked ~ .arrows label:nth-of-type(6),
| |
| − | .csslider > input:nth-of-type(8):checked ~ .arrows label:nth-of-type(7),
| |
| − | .csslider > input:nth-of-type(9):checked ~ .arrows label:nth-of-type(8),
| |
| − | .csslider > input:nth-of-type(10):checked ~ .arrows label:nth-of-type(9),
| |
| − | .csslider > input:nth-of-type(11):checked ~ .arrows label:nth-of-type(10) {
| |
| − | display: block;
| |
| − | left: 0;
| |
| − | -moz-transform: rotate(45deg);
| |
| − | -ms-transform: rotate(45deg);
| |
| − | -o-transform: rotate(45deg);
| |
| − | -webkit-transform: rotate(45deg);
| |
| − | transform: rotate(45deg);
| |
| − | }
| |
| − | .csslider.infinity > input:last-of-type:checked ~ .arrows label:first-of-type,
| |
| − | .csslider > input:nth-of-type(1):checked ~ .arrows label:nth-of-type(2),
| |
| − | .csslider > input:nth-of-type(2):checked ~ .arrows label:nth-of-type(3),
| |
| − | .csslider > input:nth-of-type(3):checked ~ .arrows label:nth-of-type(4),
| |
| − | .csslider > input:nth-of-type(4):checked ~ .arrows label:nth-of-type(5),
| |
| − | .csslider > input:nth-of-type(5):checked ~ .arrows label:nth-of-type(6),
| |
| − | .csslider > input:nth-of-type(6):checked ~ .arrows label:nth-of-type(7),
| |
| − | .csslider > input:nth-of-type(7):checked ~ .arrows label:nth-of-type(8),
| |
| − | .csslider > input:nth-of-type(8):checked ~ .arrows label:nth-of-type(9),
| |
| − | .csslider > input:nth-of-type(9):checked ~ .arrows label:nth-of-type(10),
| |
| − | .csslider > input:nth-of-type(10):checked ~ .arrows label:nth-of-type(11),
| |
| − | .csslider > input:nth-of-type(11):checked ~ .arrows label:nth-of-type(12) {
| |
| − | display: block;
| |
| − | right: 0;
| |
| − | -moz-transform: rotate(225deg);
| |
| − | -ms-transform: rotate(225deg);
| |
| − | -o-transform: rotate(225deg);
| |
| − | -webkit-transform: rotate(225deg);
| |
| − | transform: rotate(225deg);
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | .csslider .navigation label {
| |
| − | background: #B1B1B1;
| |
| − | }
| |
| − | .csslider .arrows label {
| |
| − | border-left-color: #B1B1B1;
| |
| − | border-right-color: #B1B1B1;
| |
| − | }
| |
| − | .csslider.inside .navigation label {
| |
| − | border: 1px solid #FFF;
| |
| − | }
| |
| − |
| |
| − | @import url(http://fonts.googleapis.com/css?family=Raleway:400,700|Lato);
| |
| − |
| |
| − | * {
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | }
| |
| − |
| |
| − | ::-webkit-scrollbar {
| |
| − | width: 2px;
| |
| − | background: rgba(255, 255, 255, 0.1);
| |
| − | }
| |
| − |
| |
| − | ::-webkit-scrollbar-track {
| |
| − | background: none;
| |
| − | }
| |
| − |
| |
| − | ::-webkit-scrollbar-thumb {
| |
| − | background: rgba(0, 94, 168, 0.6);
| |
| − | }
| |
| − |
| |
| − | ul, ol {
| |
| − | padding-left: 40px;
| |
| − | }
| |
| − |
| |
| − | #slider1 {
| |
| − | margin: 20px auto;
| |
| − | font-family: 'Lato';
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | </style>
| |
| − |
| |
| − |
| |
| | | | |
| | </head> | | </head> |
| Line 828: |
Line 548: |
| | </li> | | </li> |
| | <li class="hiLight shortName"> | | <li class="hiLight shortName"> |
| − | <a class="nav_head" href="https://2018.igem.org/Team:HZAU-China/Parts"> | + | <a class="nav_head" href="#"> |
| | <span>Parts</span> | | <span>Parts</span> |
| | <span class="xjtPic"></span> | | <span class="xjtPic"></span> |
| Line 842: |
Line 562: |
| | <!-- 正文 --> | | <!-- 正文 --> |
| | <div class="zhengwen"> | | <div class="zhengwen"> |
| − | <div class="lunbotu"> | + | <div align="center" style="margin-left: 8%"><img style="margin:0 auto; width:100% "src="img/home01.png" alt=""></div> |
| − | <div id="slider1" class="csslider infinity inside">
| + | < div align=" center"><img style=" margin:0 auto; width:100% "src=" img/ home02.png" alt=""></div> |
| − | <input type="radio" name="slides" id="slides_1" checked />
| + | |
| − | <input type="radio" name="slides" id="slides_2" />
| + | |
| − | <input type="radio" name="slides" id="slides_3" />
| + | |
| − | <input type="radio" name="slides" id="slides_4" />
| + | |
| − | <ul>
| + | |
| − | <li>
| + | |
| − | <img width="100%" src="https://static.igem.org/mediawiki/2018/7/70/T--HZAU-China--hezhao1.png" />
| + | |
| − | </li>
| + | |
| − | <li>
| + | |
| − | <img width="100%" src="https://static.igem.org/mediawiki/2018/7/70/T--HZAU-China--hezhao1.png" />
| + | |
| − | </li>
| + | |
| − | <li>
| + | |
| − | <img width="100%" src="https://static.igem.org/mediawiki/2018/7/70/T--HZAU-China--hezhao1.png" />
| + | |
| − | </li>
| + | |
| − | <li>
| + | |
| − | <img width="100%" src=" https:/ /static.igem.org/mediawiki/2018/7/70/T--HZAU-China--hezhao1.png" /> | + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <div class="arrows">
| + | |
| − | <label for="slides_1"></label>
| + | |
| − | <label for="slides_2"></label>
| + | |
| − | <label for="slides_3"></label>
| + | |
| − | <label for="slides_4"></label>
| + | |
| − | </div>
| + | |
| − | <div class="navigation">
| + | |
| − | <div>
| + | |
| − | <label for="slides_1"></label>
| + | |
| − | <label for="slides_2"></label>
| + | |
| − | <label for="slides_3"></label>
| + | |
| − | <label for="slides_4"></label>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| | </div> | | </div> |
| | </div> | | </div> |
