Line 2: | Line 2: | ||
<html> | <html> | ||
− | < | + | <!doctype html> |
− | < | + | <html> |
− | </ | + | <head> |
+ | <meta charset="utf-8"> | ||
+ | <title>CIEI 2016 iGEM</title> | ||
+ | </head> | ||
− | <div | + | <body> |
− | < | + | <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"> <!-- 鼠标移动到图按钮时样式设置 --> | |
− | </div> | + | <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='Notebook.html'"/> | |
− | <div class=" | + | <!-- 大图及点击后的链接地址 --> |
− | < | + | <ul style="margin-left:-280px; margin-top:0px; position:absolute; font-size:20px; color:red; white-space:nowrap;" > |
− | < | + | <!-- 鼠标指到时显示提示信息,使用margin-left:-280px; margin-top:0px;控制位置,font-size:20px为字体大小,color:red;为字的颜色,white-space:nowrap;避免自动换行 --> |
− | <ul> | + | <b><!-- 每句一行,前面自动加点 --> |
− | <li> | + | <li>materials and methods</li> |
− | <li> < | + | <li>Protocol</li> |
− | <li> < | + | <li>Notes</li> |
− | </ul> | + | </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='Practice.html'"/> | ||
+ | <ul style="margin-left:160px; margin-top:0px; position:absolute; font-size:20px; color:red; white-space:nowrap;" > | ||
+ | <b> | ||
+ | <li>Collaboration</li> | ||
+ | <li>Human practice</li> | ||
+ | </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='Results.html'"/> | ||
+ | <ul style="margin-left:-115px; margin-top:0px; position:absolute; font-size:20px; color:red; white-space:nowrap;" > | ||
+ | <b> | ||
+ | <li>Part</li> | ||
+ | <li>Data</li> | ||
+ | </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='Project.html'"/> | ||
+ | <ul style="margin-left:150px; margin-top:0px; position:absolute; font-size:20px; color:red; white-space:nowrap;" > | ||
+ | <b> | ||
+ | <li>background</li> | ||
+ | <li>Our idea</li> | ||
+ | <li>Achievement</li> | ||
+ | </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='Team.html'"/> | ||
+ | <ul style="margin-left:-260px; margin-top:0px; position:absolute; font-size:20px; color:red; white-space:nowrap;" > | ||
+ | <b> | ||
+ | <li>member introduction</li> | ||
+ | <li>Attribution</li> | ||
+ | <li>Lab</li> | ||
+ | </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='Others.html'"/> | ||
+ | <ul style="margin-left:160px; margin-top:0px; position:absolute; font-size:20px; color:red; white-space:nowrap;" > | ||
+ | <b> | ||
+ | <li>Lab safety</li> | ||
+ | <li>Modeling</li> | ||
+ | <li>acknowledgment</li> | ||
+ | </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> |
Revision as of 03:13, 3 October 2016
- materials and methods
- Protocol
- Notes
- Collaboration
- Human practice
- Part
- Data
- background
- Our idea
- Achievement
- member introduction
- Attribution
- Lab
- Lab safety
- Modeling
- acknowledgment