Difference between revisions of "Team:HZAU-China"
| (35 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
| − | + | {{HZAU-China}} | |
<html> | <html> | ||
<head> | <head> | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
| − | + | <style> | |
| − | <style | + | |
body { | body { | ||
background-color: rgb(249, 228, 137); | background-color: rgb(249, 228, 137); | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
#content { | #content { | ||
| − | + | background-color: rgb(249, 228, 137); | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| Line 49: | Line 18: | ||
} | } | ||
| − | . | + | .fourC_div { |
width: 100%; | width: 100%; | ||
| − | + | margin: 48px auto 0 auto; | |
| − | margin | + | |
} | } | ||
| − | . | + | .fourC { |
width: 100%; | width: 100%; | ||
| − | + | height: auto; | |
| − | + | ||
| − | + | ||
} | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | #anniu { | |
| − | + | position: relative; | |
| − | + | top: 70px; | |
| − | + | transition: top 0.2s; | |
| − | + | left: 50%; | |
| − | + | margin: 0 0 0 -50px; | |
| − | + | ||
| − | + | ||
} | } | ||
| − | + | #anniu>img { | |
| − | + | height: 100px; | |
| − | + | ||
} | } | ||
| − | + | #anniu:hover { | |
| − | + | top: 90px; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | .di { | |
| − | + | width: 100%; | |
| − | margin | + | position: relative; |
| + | top: 600px; | ||
| + | margin: -350px auto 0 auto; | ||
vertical-align: middle; | vertical-align: middle; | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
| Line 174: | Line 57: | ||
margin: 0; | margin: 0; | ||
} | } | ||
| + | |||
/*-- 轮播图整体样式-- */ | /*-- 轮播图整体样式-- */ | ||
.zhanshiqu { | .zhanshiqu { | ||
position: relative; | position: relative; | ||
| − | |||
} | } | ||
| + | |||
/*-- 轮播图主体样式-- */ | /*-- 轮播图主体样式-- */ | ||
| + | |||
| + | .bianda { | ||
| + | width: 1200px; | ||
| + | margin: 300px auto 0 auto; | ||
| + | } | ||
#rongqi { | #rongqi { | ||
width: 950px; | width: 950px; | ||
| − | height: | + | height: 570px; |
| − | margin: | + | margin: 0 auto; |
border-radius: 5px; | border-radius: 5px; | ||
overflow: hidden; | overflow: hidden; | ||
position: relative; | position: relative; | ||
} | } | ||
| + | |||
/*-- 图片样式 --*/ | /*-- 图片样式 --*/ | ||
.shiying { | .shiying { | ||
width: 950px; | width: 950px; | ||
| − | height: | + | height: 570px; |
} | } | ||
| Line 213: | Line 103: | ||
left: -950px; | left: -950px; | ||
} | } | ||
| + | |||
/*-- 页码样式 --*/ | /*-- 页码样式 --*/ | ||
| Line 227: | Line 118: | ||
#rongqi span { | #rongqi span { | ||
display: inline-block; | display: inline-block; | ||
| − | width: | + | width: 50px; |
| − | height: | + | height: 22px; |
| − | margin: 0 | + | margin: 0 10px; |
| − | border-radius: | + | border-radius: 11px; |
background: white; | background: white; | ||
transition: width 0.3s; | transition: width 0.3s; | ||
| Line 236: | Line 127: | ||
#rongqi span.yundong { | #rongqi span.yundong { | ||
| − | width: | + | width: 78px; |
background: #A08989; | background: #A08989; | ||
} | } | ||
| + | |||
/*-- 图片描述的样式 --*/ | /*-- 图片描述的样式 --*/ | ||
| Line 257: | Line 149: | ||
opacity: 1; | opacity: 1; | ||
} | } | ||
| + | |||
/*--齿轮样式--*/ | /*--齿轮样式--*/ | ||
| Line 277: | Line 170: | ||
} | } | ||
| − | @- | + | @-moz-keyframes mymove { |
| − | + | from {} | |
| + | to { | ||
| + | transform: rotate(360deg); | ||
| + | } | ||
| + | } | ||
| − | { | + | @-webkit-keyframes mymove { |
| + | from {} | ||
| + | to { | ||
| + | transform: rotate(360deg); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @-o-keyframes mymove { | ||
from {} | from {} | ||
to { | to { | ||
| Line 294: | Line 198: | ||
} | } | ||
| − | @-webkit-keyframes mymove_2 | + | @-moz-keyframes mymove_2 { |
| − | + | from {} | |
| + | to { | ||
| + | transform: rotate(-360deg); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes mymove_2 { | ||
| + | from {} | ||
| + | to { | ||
| + | transform: rotate(-360deg); | ||
| + | } | ||
| + | } | ||
| − | { | + | @-o-keyframes mymove_2 { |
from {} | from {} | ||
to { | to { | ||
| Line 347: | Line 262: | ||
-webkit-animation: mymove 10s infinite; | -webkit-animation: mymove 10s infinite; | ||
animation-timing-function: linear; | animation-timing-function: linear; | ||
| − | background: url(https://static.igem.org/mediawiki/2017/ | + | background: url(https://static.igem.org/mediawiki/2017/c/c0/T--HZAU-China--gear.png); |
background-size: 250px 250px; | background-size: 250px 250px; | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
| Line 353: | Line 268: | ||
z-index: -1; | z-index: -1; | ||
} | } | ||
| + | |||
| + | #tiaozhuan { | ||
| + | position: absolute; | ||
| + | top: -135px; | ||
| + | } | ||
| + | |||
/*--线框样式--*/ | /*--线框样式--*/ | ||
| Line 360: | Line 281: | ||
margin: 0 50%; | margin: 0 50%; | ||
width: 1020px; | width: 1020px; | ||
| − | height: | + | height: 630px; |
left: -510px; | left: -510px; | ||
z-index: 1; | z-index: 1; | ||
| Line 367: | Line 288: | ||
.frame_tu { | .frame_tu { | ||
width: 1020px; | width: 1020px; | ||
| − | height: | + | height: 630px; |
} | } | ||
</style> | </style> | ||
| Line 373: | Line 294: | ||
<body> | <body> | ||
| − | <div class=" | + | <div class="fourC_div"> |
| − | < | + | <img class="fourC" src="https://static.igem.org/mediawiki/2017/8/8d/T--HZAU-China--4C.gif"> |
| − | + | <div> | |
| − | + | <a id="anniu" href="#tiaozhuan"> | |
| − | + | <img src="https://static.igem.org/mediawiki/2017/7/7e/T--HZAU-China--arrow.gif"> | |
| − | + | </a> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | < | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | </ | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | <div class=" | + | </div> |
| − | <img class="frame_tu" src="https://static.igem.org/mediawiki/2017/ | + | <div class="bianda"> |
| − | + | <div class="zhanshiqu"> | |
| − | + | <!-- 大小齿轮们 --> | |
| − | + | <div class="hezi"> | |
| − | + | <div id="tiaozhuan"></div> | |
| − | + | <div class="chilun_1"></div> | |
| − | + | <div class="chilun_2"></div> | |
| − | + | <div class="chilun_3"></div> | |
| − | + | </div> | |
| − | + | <div class="frame"> | |
| + | <img class="frame_tu" src="https://static.igem.org/mediawiki/2017/1/17/T--HZAU-China--frame.png" /> | ||
| + | </div> | ||
| + | <div id="rongqi"> | ||
| + | <!-- 插入轮播的图片们 --> | ||
| + | <img class="yundong shiying" src="https://static.igem.org/mediawiki/2017/6/64/T--HZAU-China--confirm2.png" /> | ||
| + | <img class="shiying" src="https://static.igem.org/mediawiki/2017/4/4a/T--HZAU-China--confirm3.png" /> | ||
| + | <img class="shiying" src="https://static.igem.org/mediawiki/2017/8/88/T--HZAU-China--confirm4.png" /> | ||
| + | <!-- 插入轮播的页码们 --> | ||
| + | <div style="top: 543px;"> | ||
| + | <span class="yundong" name="0"></span> | ||
| + | <span name="1"></span> | ||
| + | <span name="2"></span> | ||
| + | </div> | ||
| + | <!-- 插入图片的描述们 --> | ||
| + | <p class="yundong"></p> | ||
| + | <p></p> | ||
| + | <p></p> | ||
</div> | </div> | ||
| − | |||
| − | |||
| − | |||
| − | |||
</div> | </div> | ||
</div> | </div> | ||
<div> | <div> | ||
| − | <img class="di" src="https://static.igem.org/mediawiki/2017/ | + | <img class="di" src="https://static.igem.org/mediawiki/2017/c/c7/T--HZAU-China--di.png"> |
</div> | </div> | ||
</body> | </body> | ||
| Line 482: | Line 370: | ||
//每2s调用changeSlide函数进行图片轮播 | //每2s调用changeSlide函数进行图片轮播 | ||
| − | var slideon = setInterval(changeSlide, | + | var slideon = setInterval(changeSlide, 60000); |
rongqi.onmouseover = function () { | rongqi.onmouseover = function () { | ||
| Line 488: | Line 376: | ||
} | } | ||
rongqi.onmouseout = function () { | rongqi.onmouseout = function () { | ||
| − | slideon = setInterval(changeSlide, | + | slideon = setInterval(changeSlide, 60000); //当鼠标移出时重新开始轮播事件 |
} | } | ||
Latest revision as of 01:31, 2 November 2017
