Line 1: | Line 1: | ||
+ | <!DOCTYPE html> | ||
<html> | <html> | ||
− | |||
<head> | <head> | ||
− | + | <meta charset="UTF-8"> | |
− | + | <title>HZAU-China</title> | |
− | + | <style type="text/css"> | |
− | + | body { | |
− | + | padding: 0px; | |
− | + | border: 0px; | |
− | + | margin: 0px; | |
− | + | background-color: rgb(249, 228, 137); | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | #sideMenu, | |
− | + | #top_title, | |
− | + | #team_submenu { | |
− | + | display: none; | |
− | + | } | |
− | + | #bodyContent h1, | |
− | + | #bodyContent h2, | |
− | + | #bodyContent h3, | |
− | + | #bodyContent h4, | |
− | + | #bodyContent h5 { | |
− | + | margin-bottom: 0px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | #team_name { | |
− | + | display: none | |
− | + | } | |
− | + | .global_wrapper { | |
− | + | padding: 0px 0px 0px 0px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | #top_menu_14 { | |
− | + | height: 16px; | |
− | + | } | |
− | + | div.background_page { | |
− | + | transition: opacity 1s; | |
− | + | -webkit-transition: opacity 1s; | |
+ | } | ||
− | + | .fourC { | |
− | + | width: 100%; | |
− | + | min-width: 950px; | |
+ | margin-top: 25px; | ||
+ | } | ||
− | + | .di { | |
− | + | width: 100%; | |
− | + | min-width: 950px; | |
+ | position: relative; | ||
+ | top: 600px; | ||
+ | } | ||
− | + | div.nav_body { | |
− | + | position: fixed; | |
− | + | padding: 0px; | |
+ | left: 0px; | ||
+ | top: 16px; | ||
+ | width: 100%; | ||
+ | min-width: 950px; | ||
+ | height: 36px; | ||
+ | box-shadow: 0px 1px 3px #aaaaaa; | ||
+ | z-index: 1; | ||
+ | color: rgb(249, 228, 137); | ||
+ | text-decoration-line: none; | ||
+ | font-family: "Arial", Helvetica, sans-serif; | ||
+ | background-color: #000; | ||
+ | z-index: 99; | ||
+ | } | ||
− | + | ul#nav_organ { | |
− | + | float: right; | |
− | + | list-style: none; | |
+ | margin: 6px auto; | ||
+ | text-decoration-line: none; | ||
+ | font-family: "Arial", Helvetica, sans-serif; | ||
+ | color: rgb(249, 228, 137); | ||
+ | background-color: #000; | ||
+ | } | ||
− | + | ul#nav_organ li { | |
− | + | display: block; | |
− | + | float: left; | |
+ | } | ||
− | + | a.nav_tissue { | |
− | + | padding: 8px 15px 8px 15px; | |
− | + | line-height: 20px; | |
+ | text-decoration-line: none; | ||
+ | font-family: "Arial", Helvetica, sans-serif; | ||
+ | color: rgb(249, 228, 137); | ||
+ | } | ||
− | + | span.caret { | |
− | + | display: inline-block; | |
− | + | margin-left: 2px; | |
− | + | vertical-align: middle; | |
− | + | width: 0; | |
− | + | height: 0; | |
− | + | border-left: 4px solid transparent; | |
− | + | border-right: 4px solid transparent; | |
− | + | border-top: 4px solid rgb(249, 228, 137); | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .nav_cell { | |
− | + | visibility: hidden; | |
− | + | opacity: 0; | |
− | + | display: block; | |
− | + | box-sizing: border-box; | |
− | + | left: auto; | |
+ | position: absolute; | ||
+ | top: 100%; | ||
+ | z-index: 1000; | ||
+ | float: left; | ||
+ | min-width: 160px; | ||
+ | padding: 5px 0; | ||
+ | margin: -4px 0 0 0; | ||
+ | font-size: 14px; | ||
+ | text-align: left; | ||
+ | list-style: none; | ||
+ | color: rgb(249, 228, 137); | ||
+ | background-color: #000; | ||
+ | background-clip: padding-box; | ||
+ | border: 1px solid rgba(0, 0, 0, .15); | ||
+ | border-radius: 4px; | ||
+ | box-shadow: 0 6px 12px rgba(0, 0, 0, .175); | ||
+ | -webkit-transition: opacity 0.4s linear; | ||
+ | -moz-transition: opacity 0.4s linear; | ||
+ | -ms-transition: opacity 0.4s linear; | ||
+ | -o-transition: opacity 0.4s linear; | ||
+ | transition: opacity 0.4s linear; | ||
+ | } | ||
− | + | .shadow { | |
− | + | box-shadow: 0px 1px 3px rgb(249, 228, 137); | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .nav_cell>li { | |
− | + | display: block; | |
− | + | float: left; | |
+ | clear: both; | ||
+ | height: 30px; | ||
+ | } | ||
− | + | .nav_cell>li>a { | |
− | + | padding-top: 3px; | |
− | + | padding-bottom: 3px; | |
− | + | padding-left: 20px; | |
− | + | padding-right: 20px; | |
− | + | text-decoration-line: none; | |
− | + | color: rgb(249, 228, 137); | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .menu_item:hover .nav_cell { | |
− | + | visibility: visible; | |
− | + | opacity: 1; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | #rongqi p { | |
− | + | padding: 0; | |
− | + | margin: 0; | |
+ | } | ||
+ | /*-- 轮播图整体样式-- */ | ||
− | + | .zhanshiqu { | |
− | + | position: relative; | |
− | + | top: 400px; | |
+ | } | ||
+ | /*-- 轮播图主体样式-- */ | ||
− | + | #rongqi { | |
− | + | width: 950px; | |
− | } | + | height: 600px; |
− | </style> | + | margin: 20px auto; |
+ | border-radius: 5px; | ||
+ | overflow: hidden; | ||
+ | position: relative; | ||
+ | } | ||
+ | /*-- 图片样式 --*/ | ||
+ | |||
+ | .shiying { | ||
+ | width: 950px; | ||
+ | height: 600px; | ||
+ | } | ||
+ | |||
+ | #rongqi img { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 950px; | ||
+ | /*图片均位于右侧*/ | ||
+ | transition: left 0.3s linear; | ||
+ | /*改变left值实现动画*/ | ||
+ | } | ||
+ | |||
+ | #rongqi img.yundong { | ||
+ | left: 0; | ||
+ | } | ||
+ | |||
+ | #rongqi img.left { | ||
+ | left: -950px; | ||
+ | } | ||
+ | /*-- 页码样式 --*/ | ||
+ | |||
+ | #rongqi div { | ||
+ | position: absolute; | ||
+ | bottom: 0; | ||
+ | width: 100%; | ||
+ | line-height: 0; | ||
+ | text-align: center; | ||
+ | padding: 5px 0; | ||
+ | z-index: 2; | ||
+ | } | ||
+ | |||
+ | #rongqi span { | ||
+ | display: inline-block; | ||
+ | width: 15px; | ||
+ | height: 10px; | ||
+ | margin: 0 3px; | ||
+ | border-radius: 5px; | ||
+ | background: white; | ||
+ | transition: width 0.3s; | ||
+ | } | ||
+ | |||
+ | #rongqi span.yundong { | ||
+ | width: 25px; | ||
+ | background: #A08989; | ||
+ | } | ||
+ | /*-- 图片描述的样式 --*/ | ||
+ | |||
+ | #rongqi p { | ||
+ | position: absolute; | ||
+ | bottom: 20px; | ||
+ | width: 100%; | ||
+ | line-height: 20px; | ||
+ | font-size: 14px; | ||
+ | text-indent: 5px; | ||
+ | color: white; | ||
+ | cursor: default; | ||
+ | opacity: 0; | ||
+ | transition: opacity 0.3s linear; | ||
+ | } | ||
+ | |||
+ | #rongqi p.yundong { | ||
+ | opacity: 1; | ||
+ | } | ||
+ | /*--齿轮样式--*/ | ||
+ | |||
+ | .hezi { | ||
+ | position: absolute; | ||
+ | top: 20px; | ||
+ | margin: 0 50%; | ||
+ | width: 950px; | ||
+ | height: 600px; | ||
+ | left: -475px; | ||
+ | opacity: 1; | ||
+ | transition: opacity 1s; | ||
+ | } | ||
+ | |||
+ | @keyframes mymove { | ||
+ | from {} | ||
+ | to { | ||
+ | transform: rotate(360deg); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @-webkit-keyframes mymove | ||
+ | /*Safari and Chrome*/ | ||
+ | |||
+ | { | ||
+ | from {} | ||
+ | to { | ||
+ | transform: rotate(360deg); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @keyframes mymove_2 { | ||
+ | from {} | ||
+ | to { | ||
+ | transform: rotate(-360deg); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @-webkit-keyframes mymove_2 | ||
+ | /*Safari and Chrome*/ | ||
+ | |||
+ | { | ||
+ | from {} | ||
+ | to { | ||
+ | transform: rotate(-360deg); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | .chilun_1 { | ||
+ | position: absolute; | ||
+ | top: -70px; | ||
+ | left: -80px; | ||
+ | width: 200px; | ||
+ | height: 200px; | ||
+ | animation: rotate 10s infinite; | ||
+ | -webkit-animation: mymove 10s infinite; | ||
+ | animation-timing-function: linear; | ||
+ | background: url(images/gear.png); | ||
+ | background-size: 150px 150px; | ||
+ | background-repeat: no-repeat; | ||
+ | background-size: cover; | ||
+ | z-index: -1; | ||
+ | } | ||
+ | |||
+ | .chilun_2 { | ||
+ | position: absolute; | ||
+ | top: 115px; | ||
+ | left: -105px; | ||
+ | width: 130px; | ||
+ | height: 130px; | ||
+ | background-size: cover; | ||
+ | animation: rotate 10s infinite; | ||
+ | -webkit-animation: mymove_2 10s infinite; | ||
+ | animation-timing-function: linear; | ||
+ | background: url(images/gear.png); | ||
+ | background-size: 100px 100px; | ||
+ | background-repeat: no-repeat; | ||
+ | background-size: cover; | ||
+ | z-index: -1; | ||
+ | } | ||
+ | |||
+ | .chilun_3 { | ||
+ | position: absolute; | ||
+ | bottom: 60px; | ||
+ | right: -100px; | ||
+ | width: 250px; | ||
+ | height: 250px; | ||
+ | background-size: cover; | ||
+ | animation: rotate 10s infinite; | ||
+ | -webkit-animation: mymove 10s infinite; | ||
+ | animation-timing-function: linear; | ||
+ | background: url(images/gear.png); | ||
+ | background-size: 250px 250px; | ||
+ | background-repeat: no-repeat; | ||
+ | background-size: cover; | ||
+ | z-index: -1; | ||
+ | } | ||
+ | /*--线框样式--*/ | ||
+ | |||
+ | .frame { | ||
+ | position: absolute; | ||
+ | top: -30px; | ||
+ | margin: 0 50%; | ||
+ | width: 1020px; | ||
+ | height: 660px; | ||
+ | left: -510px; | ||
+ | z-index: 1; | ||
+ | } | ||
+ | |||
+ | .frame_tu { | ||
+ | width: 1020px; | ||
+ | height: 660px; | ||
+ | } | ||
+ | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
− | <a href="https://2017.igem.org/Team:HZAU-China" class="HZAU-logo" title="logo"><img src="https://static.igem.org/mediawiki/2017/ | + | <div class="nav_body"> |
− | + | <a href="https://2017.igem.org/Team:HZAU-China" class="HZAU-logo" title="logo"><img src="https://static.igem.org/mediawiki/2017/b/be/HZAU_2017_logo_1.png" height="100%"></a> | |
− | < | + | <ul id="nav_organ"> |
− | + | <li class="Home"><a class="nav_tissue" href="https://2017.igem.org/Team:HZAU-China">Home</a></li> | |
− | <ul | + | <li class="Team"><a class="nav_tissue" href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">Team</a></li> |
− | + | <li class="Project menu_item"><a class="nav_tissue" href="">Project<span class="caret"></span></a> | |
− | + | <ul class="nav_cell shadow"> | |
− | + | <li><a href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">Description</a></li> | |
− | + | <li><a href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">Design</a></li> | |
− | + | <li><a href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">Experiments</a></li> | |
− | + | <li><a href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">Notebook</a></li> | |
− | + | <li><a href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">InterLab</a></li> | |
− | + | <li><a href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">Model</a></li> | |
+ | <li><a href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">Results</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">Demonstrate</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">Improve</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">Attributions</a></li> | ||
</ul> | </ul> | ||
− | + | </li> | |
− | + | <li class="Parts menu_item"><a class="nav_tissue" href="">Parts<span class="caret"></span></a> | |
− | + | <ul class="nav_cell shadow"> | |
− | + | <li><a href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">Parts</a></li> | |
− | + | <li><a href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">Basic Parts</a></li> | |
− | + | <li><a href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">Composite Parts</a></li> | |
− | + | <li><a href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">Part Collection</a></li> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | <ul class=" | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</ul> | </ul> | ||
+ | </li> | ||
+ | <li class="Safety"><a class="nav_tissue" href="">Safety</a></li> | ||
+ | <li class="HP menu_item"><a class="nav_tissue" href="">Human Practices<span class="caret"></span></a> | ||
+ | <ul class="nav_cell shadow"> | ||
+ | <li><a href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">Silver HP</a></li> | ||
+ | <li> <a href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">Integrated and Gold</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">Public Engagement</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="Awards menu_item"><a class="nav_tissue" href="">Awards<span class="caret"></span></a> | ||
+ | <ul class="nav_cell shadow"> | ||
+ | <li> <a href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">Hardware</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="Judging Form"><a class="nav_tissue" href="">Judging Form</a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div class="fourC"> | ||
+ | <img class="fourC" src="https://static.igem.org/mediawiki/2017/e/eb/HZAU_2017_4C_1.png"> | ||
+ | </div> | ||
+ | <div class="zhanshiqu"> | ||
+ | <!-- 大小齿轮们 --> | ||
+ | <div class="hezi"> | ||
+ | <div class="chilun_1"></div> | ||
+ | <div class="chilun_2"></div> | ||
+ | <div class="chilun_3"></div> | ||
</div> | </div> | ||
+ | <div class="frame"> | ||
+ | <img class="frame_tu" src="https://static.igem.org/mediawiki/2017/2/23/HZAU_2017_frame_1.png" /> | ||
+ | </div> | ||
+ | <div id="rongqi"> | ||
+ | <!-- 插入轮播的图片们 --> | ||
+ | <img class="yundong shiying" src="https://static.igem.org/mediawiki/2017/4/43/HZAU_2017_luhuan1_1.png" /> | ||
+ | <img class="shiying" src="https://static.igem.org/mediawiki/2017/f/f5/HZAU_2017_luhuan2_1.png" /> | ||
+ | <img class="shiying" src="https://static.igem.org/mediawiki/2017/f/fd/HZAU_2017_luhuan3_1.png" /> | ||
+ | <!-- 插入轮播的页码们 --> | ||
+ | <div> | ||
+ | <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> | ||
+ | <img class="di" src="https://static.igem.org/mediawiki/2017/6/63/HZAU_2017_di_1.png"> | ||
+ | </div> | ||
</body> | </body> | ||
+ | <script> | ||
+ | //---------主角:轮播图函数------------- | ||
+ | function rongqi() { | ||
+ | var rongqi = document.getElementById("rongqi"), | ||
+ | imgs = rongqi.getElementsByTagName("img"), //图片们 | ||
+ | pages = rongqi.getElementsByTagName("span"), //页码们 | ||
+ | descrips = rongqi.getElementsByTagName("p"), //描述们 | ||
+ | length = imgs.length, //图片数目 | ||
+ | current = 1; //current为当前活跃的图片、页码、描述的编号 | ||
+ | |||
+ | |||
+ | function changeSlide() { //切换图片的函数 | ||
+ | for (var i = 0; i < length; i++) { | ||
+ | if (i == current) { | ||
+ | imgs[i].className = "yundong shiying"; | ||
+ | pages[i].className = "yundong"; | ||
+ | descrips[i].className = "yundong"; | ||
+ | } else { | ||
+ | pages[i].className = ""; | ||
+ | descrips[i].className = ""; | ||
+ | if (i < current) { | ||
+ | imgs[i].className = "left"; | ||
+ | } else { | ||
+ | imgs[i].className = ""; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | current++; //自增1 | ||
+ | if (current >= length) { | ||
+ | current = 0; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | //每2s调用changeSlide函数进行图片轮播 | ||
+ | var slideon = setInterval(changeSlide, 4000); | ||
+ | |||
+ | rongqi.onmouseover = function () { | ||
+ | clearInterval(slideon); //当鼠标移入时清除轮播事件 | ||
+ | } | ||
+ | rongqi.onmouseout = function () { | ||
+ | slideon = setInterval(changeSlide, 4000); //当鼠标移出时重新开始轮播事件 | ||
+ | } | ||
+ | |||
+ | for (var i = 0; i < length; i++) { //定义鼠标移入页码事件 | ||
+ | pages[i].onmouseover = function () { | ||
+ | current = this.getAttribute("name"); //得到当前鼠标指的页码 | ||
+ | changeSlide(); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | rongqi(); | ||
+ | |||
+ | </script> | ||
+ | |||
</html> | </html> |
Revision as of 04:30, 19 October 2017
<!DOCTYPE html>