(Prototype team page) |
|||
(18 intermediate revisions by 3 users not shown) | |||
Line 2: | Line 2: | ||
<html> | <html> | ||
− | < | + | <!doctype html> |
− | < | + | <html> |
− | </ | + | <head> |
+ | <meta charset="utf-8"> | ||
+ | <title>CIEI 2016 iGEM</title> | ||
+ | </head> | ||
− | <div | + | <body style=" margin: 0 auto;"> |
− | < | + | <div style="background-image: url(https://static.igem.org/mediawiki/2016/e/ea/T--CIEI-BJ--mainpagebg.jpg); width: 1000px; height: 800px; margin: 0 auto;"><!-- 背景图片设置宽1000;高800像素 --> |
− | < | + | <div style="margin-left:280px; margin-top:150px; position:absolute;"><!-- 左上按钮位置 --> |
+ | <div class="pic"> <!-- 鼠标移动到图按钮时样式设置 --> | ||
+ | <img class="img1" src="https://static.igem.org/mediawiki/2016/5/5e/T--CIEI-BJ--Notebook_S.png" /> <!-- 小图 --> | ||
+ | <img class="img2" src="https://static.igem.org/mediawiki/2016/9/9c/T--CIEI-BJ--Notebook_B.png" style="margin-left:-55px; margin-top:-55px; position:absolute; cursor:pointer" onclick="location='https://2016.igem.org/Team:CIEI-BJ/Notebook'"/> | ||
+ | <!-- 大图及点击后的链接地址 --> | ||
+ | <ul style="margin-left:-280px; margin-top:0px; position:absolute; font-size:20px; color:red; white-space:nowrap;" > | ||
+ | <!-- 鼠标指到时显示提示信息,使用margin-left:-1000px; margin-top:0px;控制位置,font-size:40px为字体大小,color:white;为字的颜色,white-space:nowrap;避免自动换行 --> | ||
+ | <b><!-- 每句一行,前面自动加点 --> | ||
+ | <body> | ||
+ | <a href=https://2016.igem.org/Team:CIEI-BJ/Description#solution> materials and methods</a><br> | ||
+ | <a href=https://2016.igem.org/Team:CIEI-BJ/Demonstrate> Demonstrate</a><br> | ||
+ | <a href=https://2016.igem.org/Team:CIEI-BJ/Notebook> Notes</a><br> | ||
+ | </body> | ||
+ | |||
+ | </b> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div style="margin-left:550px; margin-top:150px; position:absolute;"><!-- 右上按钮位置,其它同上 --> | ||
+ | <div class="pic"> | ||
+ | <img class="img1" src="https://static.igem.org/mediawiki/2016/f/f6/T--CIEI-BJ--Practice_S.png" /> | ||
+ | <img class="img2" src="https://static.igem.org/mediawiki/2016/3/37/T--CIEI-BJ--Practice_B.png" style="margin-left:-55px; margin-top:-55px; position:absolute; cursor:pointer" onclick="location='https://2016.igem.org/Team:CIEI-BJ/Human_Practices'"/> | ||
+ | <ul style="margin-left:160px; margin-top:0px; position:absolute; font-size:20px; color:red; white-space:nowrap;" > | ||
+ | <b> | ||
+ | <body> | ||
+ | <a href=https://2016.igem.org/Team:CIEI-BJ/Collaborations> Collaboration</a><br> | ||
+ | <a href=https://2016.igem.org/Team:CIEI-BJ/Human_Practices> Human practice</a><br> | ||
+ | </body> | ||
+ | |||
+ | </b> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div style="margin-left:165px; margin-top:360px; position:absolute;"><!-- 左侧中间按钮位置,其它同上 --> | ||
+ | <div class="pic"> | ||
+ | <img class="img1" src="https://static.igem.org/mediawiki/2016/a/a2/T--CIEI-BJ--Results_S.png" /> | ||
+ | <img class="img2" src="https://static.igem.org/mediawiki/2016/d/de/T--CIEI-BJ--Results_B.png" style="margin-left:-55px; margin-top:-55px; position:absolute; cursor:pointer" onclick="location='https://2016.igem.org/Team:CIEI-BJ/Results'"/> | ||
+ | <ul style="margin-left:-115px; margin-top:0px; position:absolute; font-size:20px; color:red; white-space:nowrap;" > | ||
+ | <b> | ||
+ | <body> | ||
+ | <a href=https://2016.igem.org/Team:CIEI-BJ/Parts> Parts</a><br> | ||
+ | <a href=https://2016.igem.org/Team:CIEI-BJ/Description#solution> Design</a><br> | ||
+ | </body> | ||
+ | </b> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div style="margin-left:660px; margin-top:360px; position:absolute;"><!-- 右侧中间按钮位置,其它同上 --> | ||
+ | <div class="pic"> | ||
+ | <img class="img1" src="https://static.igem.org/mediawiki/2016/8/85/T--CIEI-BJ--Project_S.png" /> | ||
+ | <img class="img2" src="https://static.igem.org/mediawiki/2016/9/93/T--CIEI-BJ--Project_B.png" style="margin-left:-55px; margin-top:-55px; position:absolute; cursor:pointer" onclick="location='https://2016.igem.org/Team:CIEI-BJ/Description#description'"/> | ||
+ | <ul style="margin-left:150px; margin-top:0px; position:absolute; font-size:20px; color:red; white-space:nowrap;" > | ||
+ | <b> | ||
+ | <body> | ||
+ | <a href=https://2016.igem.org/Team:CIEI-BJ/Description#description> background</a><br> | ||
+ | <a href=https://2016.igem.org/Team:CIEI-BJ/Description#description> Our idea</a><br> | ||
+ | <a href=https://2016.igem.org/Team:CIEI-BJ/Description#description> Achievement</a><br> | ||
+ | </body> | ||
+ | |||
+ | </b> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div style="margin-left:280px; margin-top:565px; position:absolute;"><!-- 左下按钮位置,其它同上 --> | ||
+ | <div class="pic"> | ||
+ | <img class="img1" src="https://static.igem.org/mediawiki/2016/4/46/T--CIEI-BJ--Team_S.png" /> | ||
+ | <img class="img2" src="https://static.igem.org/mediawiki/2016/9/9e/T--CIEI-BJ--Team_B.png" style="margin-left:-55px; margin-top:-55px; position:absolute; cursor:pointer" onclick="location='https://2016.igem.org/Team:CIEI-BJ/Team'"/> | ||
+ | <ul style="margin-left:-260px; margin-top:0px; position:absolute; font-size:20px; color:red; white-space:nowrap;" > | ||
+ | <b> | ||
+ | <body> | ||
+ | <a href=https://2016.igem.org/Team:CIEI-BJ/Team> member introduction</a><br> | ||
+ | <a href=https://2016.igem.org/Team:CIEI-BJ/Attributions> Attribution</a><br> | ||
+ | <a href=https://2016.igem.org/Team:CIEI-BJ/Experiments> Lab</a><br> | ||
+ | </body> | ||
+ | |||
+ | </b> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div style="margin-left:550px; margin-top:565px; position:absolute;"><!-- 右下按钮位置,其它同上 --> | ||
+ | <div class="pic"> | ||
+ | <img class="img1" src="https://static.igem.org/mediawiki/2016/c/c2/T--CIEI-BJ--Others_S.png" /> | ||
+ | <img class="img2" src="https://static.igem.org/mediawiki/2016/e/ef/T--CIEI-BJ--Others_B.png" style="margin-left:-55px; margin-top:-55px; position:absolute; cursor:pointer" onclick="location='https://2016.igem.org/Team:CIEI-BJ/Safety'"/> | ||
+ | <ul style="margin-left:160px; margin-top:0px; position:absolute; font-size:20px; color:red; white-space:nowrap;" > | ||
+ | <b> | ||
+ | <body> | ||
+ | <a href=https://2016.igem.org/Team:CIEI-BJ/Safety> Lab safety</a><br> | ||
+ | <a href=https://2016.igem.org/Team:CIEI-BJ/Attributions> Modeling</a><br> | ||
+ | <a href=https://2016.igem.org/Team:CIEI-BJ/Proof> acknowledgmen</a><br> | ||
+ | </body> | ||
− | </ | + | </b> |
− | + | </ul> | |
− | + | </div> | |
− | + | </div> | |
− | + | ||
− | + | ||
− | < | + | |
− | < | + | |
− | + | ||
− | + | ||
</div> | </div> | ||
− | < | + | <style type="text/css"> |
− | + | /* 鼠标移过变换图片及显示说明效果 */ | |
− | + | .pic .img2{display: none;} | |
− | + | .pic:hover .img1{display: none;} | |
− | + | .pic:hover .img2{display: block;} | |
− | + | .pic ul{display:none;} | |
− | + | .pic:hover ul{display:block;} | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | /* 背景图片设置 */ | ||
+ | .main { | ||
+ | background-image: url(main.jpg); | ||
+ | width: 1000px; | ||
+ | height: 800px; | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | /* 呼吸效果 */ | ||
+ | .img1 { | ||
+ | overflow:hidden; | ||
+ | animation-timing-function: linear; /* 动画以相同的速度开始到结束;ease-in-out:减速开始和结束 */ | ||
+ | -webkit-animation-timing-function: linear; | ||
+ | animation-name: breathe; /* @keyframes 动画的名称。*/ | ||
+ | -webkit-animation-name: breathe; | ||
+ | animation-duration: 1000ms; /* 规定动画完成一个周期所花费的秒或毫秒。 */ | ||
+ | -webkit-animation-duration: 1000ms; | ||
+ | animation-iteration-count: infinite; /* 动画循环次数。infinite:无限次数循环 */ | ||
+ | -webkit-animation-iteration-count: infinite; | ||
+ | animation-direction: alternate; /* 动画是否在下一周期逆向地播放。normal:默认值。动画正常播放;alternate:动画轮流反向播放。 */ | ||
+ | -webkit-animation-direction: alternate; | ||
+ | } | ||
+ | @keyframes breathe { | ||
+ | 0% { opacity: 0.3; } /* opacity:不透明度。从 0.0 (透明)到 1.0(不透明)。 */ | ||
+ | 100% { opacity: 1; } | ||
+ | } | ||
+ | @-webkit-keyframes breathe { | ||
+ | 0% { opacity: 0.3; } | ||
+ | 100% { opacity: 1; } | ||
+ | } | ||
+ | </style> | ||
+ | </body> | ||
</html> | </html> |
Latest revision as of 02:03, 20 October 2016