Team:SJTU-Software/Project/Demo
From 2014.igem.org
(Difference between revisions)
Caoweijian (Talk | contribs) |
|||
(176 intermediate revisions not shown) | |||
Line 7: | Line 7: | ||
<p> | <p> | ||
- | <style type="text/css"> body {background- | + | <style type="text/css"> body {background-color:#BEBEBE; background-attachment:fixed; width:1366px;height:auto;align:center} </style> |
<script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/182min.js%20?action=raw&ctype=text/js"></script> | <script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/182min.js%20?action=raw&ctype=text/js"></script> | ||
<script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/toolsmin.js%20?action=raw&ctype=text/js"></script> | <script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/toolsmin.js%20?action=raw&ctype=text/js"></script> | ||
<script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/main.js%20?action=raw&ctype=text/js"></script> | <script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/main.js%20?action=raw&ctype=text/js"></script> | ||
<style type="text/css"> | <style type="text/css"> | ||
+ | |||
ul.expmenu { width: 200px; } | ul.expmenu { width: 200px; } | ||
ul.expmenu * { list-style: none; } | ul.expmenu * { list-style: none; } | ||
Line 125: | Line 126: | ||
.container { | .container { | ||
height: 5px; | height: 5px; | ||
- | margin: | + | margin: 1.6% auto 3.9% auto; |
- | width: | + | width: 71%; |
align: center; | align: center; | ||
} | } | ||
Line 135: | Line 136: | ||
} | } | ||
#nav { | #nav { | ||
- | background: url('https://static.igem.org/mediawiki/2014/ | + | background: url('https://static.igem.org/mediawiki/2014/c/c7/Sjtu_software_menu_bg2.png')no-repeat scroll 0 0 transparent ; |
clear: both; | clear: both; | ||
font-size: 16px; | font-size: 16px; | ||
height: 58px; | height: 58px; | ||
- | padding: 0 0 0 | + | padding: 0 0 0 0px; |
position: relative; | position: relative; | ||
- | width: | + | width: 100%; |
} | } | ||
#nav ul { | #nav ul { | ||
Line 223: | Line 224: | ||
background: url('https://static.igem.org/mediawiki/2014/d/d5/Sjtu_software_lavalamp.png') no-repeat scroll 0 0 transparent; | background: url('https://static.igem.org/mediawiki/2014/d/d5/Sjtu_software_lavalamp.png') no-repeat scroll 0 0 transparent; | ||
height: 16px; | height: 16px; | ||
- | left: | + | left: 93px; |
position: absolute; | position: absolute; | ||
top: 0px; | top: 0px; | ||
Line 243: | Line 244: | ||
#nav li:nth-of-type(1):hover ~ #lavalamp { | #nav li:nth-of-type(1):hover ~ #lavalamp { | ||
- | left: | + | left: 6px; |
} | } | ||
#nav li:nth-of-type(2):hover ~ #lavalamp { | #nav li:nth-of-type(2):hover ~ #lavalamp { | ||
- | left: | + | left: 93px; |
} | } | ||
#nav li:nth-of-type(3):hover ~ #lavalamp { | #nav li:nth-of-type(3):hover ~ #lavalamp { | ||
- | left: | + | left: 195px; |
} | } | ||
#nav li:nth-of-type(4):hover ~ #lavalamp { | #nav li:nth-of-type(4):hover ~ #lavalamp { | ||
- | left: | + | left: 310px; |
} | } | ||
#nav li:nth-of-type(5):hover ~ #lavalamp { | #nav li:nth-of-type(5):hover ~ #lavalamp { | ||
- | left: | + | left: 415px; |
} | } | ||
#nav li:nth-of-type(6):hover ~ #lavalamp { | #nav li:nth-of-type(6):hover ~ #lavalamp { | ||
Line 265: | Line 266: | ||
#nav li:nth-of-type(8):hover ~ #lavalamp { | #nav li:nth-of-type(8):hover ~ #lavalamp { | ||
left: 647px; | left: 647px; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | <style type="text/css"> | ||
+ | .firstHeading { | ||
+ | width: 0px; | ||
+ | height: 0px; | ||
+ | margin: -38px auto; | ||
+ | padding-top: 0px; | ||
+ | margin-bottom: 0px; | ||
+ | font-family: Georgia, Times, "Times New Roman", serif; | ||
+ | } | ||
+ | |||
+ | /*returnTop*/ | ||
+ | p#back-to-top{ | ||
+ | position:fixed; | ||
+ | display:none; | ||
+ | bottom:50px; | ||
+ | right:30px; | ||
+ | } | ||
+ | p#back-to-top a{ | ||
+ | text-align:center; | ||
+ | text-decoration:none; | ||
+ | color:#d1d1d1; | ||
+ | display:block; | ||
+ | width:112px; | ||
+ | /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/ | ||
+ | -moz-transition:color 1s; | ||
+ | -webkit-transition:color 1s; | ||
+ | -o-transition:color 1s; | ||
+ | } | ||
+ | p#back-to-top a:hover{ | ||
+ | color:#979797; | ||
+ | } | ||
+ | p#back-to-top a span{ | ||
+ | background:transparent url(https://static.igem.org/mediawiki/2014/3/3c/Sjtu_software_img100.png) no-repeat -25px -290px; | ||
+ | border-radius:6px; | ||
+ | display:block; | ||
+ | height:40px; | ||
+ | width:112px; | ||
+ | margin-bottom:5px; | ||
+ | /*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/ | ||
+ | -moz-transition:background 1s; | ||
+ | -webkit-transition:background 1s; | ||
+ | -o-transition:background 1s; | ||
+ | } | ||
+ | #back-to-top a:hover span{ | ||
+ | background:transparent url(https://static.igem.org/mediawiki/2014/3/3c/Sjtu_software_img100.png) no-repeat -25px -290px; | ||
} | } | ||
</style> | </style> | ||
Line 336: | Line 385: | ||
</script> | </script> | ||
</head> | </head> | ||
- | <body class="background"> | + | <body class="background" bgcolor="yellow"> |
- | + | <a href="http://www.igem.org/Main_Page" target=blank><img src="https://static.igem.org/mediawiki/2014/6/60/Igemlogo_300px.png" style="width:100px; height:100px; position:fixed; top:10px; right:50px;"></img></a> | |
- | <div class="container" style="position:relative;z-index:3"> | + | <div class="container" style="position:relative;z-index:3" > |
- | + | ||
<ul id="nav"> | <ul id="nav"> | ||
- | <li><a href="https://2014.igem.org/Team:SJTU-Software">Home</a></li> | + | <li><a href="https://2014.igem.org/Team:SJTU-Software"><font face="Jokerman">Home</font></a></li> |
- | <li><a class="hsubs" href="https://2014.igem.org/Team:SJTU-Software/Overview">Software</a> | + | <li><a class="hsubs" href="https://2014.igem.org/Team:SJTU-Software/Overview"><font face="Jokerman">Software</font></a> |
<ul class="subs"> | <ul class="subs"> | ||
- | <li><a href="https://2014.igem.org/Team:SJTU-Software/Overview">Overview</a></li> | + | <li><a href="https://2014.igem.org/Team:SJTU-Software/Overview"><font face="Jokerman">Overview</font></a></li> |
- | <li><a href=" | + | <li><a href="https://2014.igem.org/Team:SJTU-Software/Project/Tutorial"><font face="Jokerman">Tutorial</font></a></li> |
- | <li><a href=" | + | <li><a href="https://2014.igem.org/Team:SJTU-Software/Project/UserStudy"><font face="Jokerman">User Study</font></a></li> |
- | <li><a href=" | + | <li><a href="https://2014.igem.org/Team:SJTU-Software/Project/Demo"><font face="Jokerman">Demo</font></a></li> |
- | <li><a href=" | + | <li><a href="https://2014.igem.org/Team:SJTU-Software/Project/Download"><font face="Jokerman">Download</font></a></li> |
</ul> | </ul> | ||
</li> | </li> | ||
- | <li><a class="hsubs" href=" | + | <li><a class="hsubs" href="https://2014.igem.org/Team:SJTU-Software/Database"><font face="Jokerman">Document</font></a> |
<ul class="subs"> | <ul class="subs"> | ||
- | <li><a href=" | + | <li><a href="https://2014.igem.org/Team:SJTU-Software/Database"><font face="Jokerman">Database</font></a></li> |
- | <li><a href=" | + | <li><a href="https://2014.igem.org/Team:SJTU-Software/Database/AssessmentModel"><font face="Jokerman">Assessment Model</font></a></li> |
- | <li><a href=" | + | <li><a href="https://2014.igem.org/Team:SJTU-Software/Database/Conponent"><font face="Jokerman">Conponents</font></a></li> |
- | <li><a href=" | + | <li><a href="https://2014.igem.org/Team:SJTU-Software/Database/FutureDevelopment"><font face="Jokerman">For Future</font></a></li> |
- | <li><a href=" | + | <li><a href="https://2014.igem.org/Team:SJTU-Software/Database/Event"><font face="Jokerman">Events</font></a></li> |
</ul> | </ul> | ||
</li> | </li> | ||
- | <li><a class="hsubs" href=" | + | <li><a class="hsubs" href="https://2014.igem.org/Team:SJTU-Software/Requirement/Medal"><font face="Jokerman">Requirement</font></a> |
<ul class="subs"> | <ul class="subs"> | ||
- | <li><a href=" | + | <li><a href="https://2014.igem.org/Team:SJTU-Software/Requirement/Medal"><font face="Jokerman">Medal</font></a></li> |
- | <li><a href=" | + | <li><a href="https://2014.igem.org/Team:SJTU-Software/Requirement/Acknowledgement"><font face="Jokerman">Acknowledgement</font></a></li> |
+ | |||
+ | <li><a href="https://2014.igem.org/Team:SJTU-Software/Requirement/HumanPractice"><font face="Jokerman">Human Practice</font></a></li> | ||
</ul> | </ul> | ||
</li> | </li> | ||
- | <li><a href=" | + | <li><a href="https://2014.igem.org/Team:SJTU-Software/Team"><font face="Jokerman">Team</font></a> |
<ul class="subs"> | <ul class="subs"> | ||
- | <li><a href=" | + | <li><a href="https://2014.igem.org/Team:SJTU-Software/Team"><font face="Jokerman">Member</font></a></li> |
- | + | ||
- | + | ||
</ul> | </ul> | ||
</li> | </li> | ||
Line 378: | Line 427: | ||
</div> | </div> | ||
- | |||
<div align="center"> | <div align="center"> | ||
- | <div class="container2" style="height: | + | <div class="container2" style="height:1150px;width:71%;margin:4.3% 0 0 0"> |
- | <div align= | + | <div align=left> |
- | <div class="container2" style="height: | + | <div class="container2" style="height:1150px;width:28%;background-color:#636363;float:left; display:inline" > |
- | + | <div id="content" > | |
+ | <ul id="expmenu-freebie" style="position:fixed;" > | ||
+ | <li> | ||
+ | <!-- Start Freebie --> | ||
+ | <ul class="expmenu" > | ||
+ | <li> | ||
+ | <div class="header" > | ||
+ | <span class="label" ><a href="https://2014.igem.org/Team:SJTU-Software/Overview" ><font face="Jokerman" color=#ffffff>Overview</font></a></span> | ||
+ | <span class="arrow up"></span> | ||
+ | </div> | ||
+ | |||
+ | </li> | ||
+ | <li> | ||
+ | <div class="header"> | ||
+ | <span class="label"><a href="https://2014.igem.org/Team:SJTU-Software/Project/Tutorial"><font face="Jokerman" color=#ffffff>Tutorial</font></a></span> | ||
+ | <span class="arrow up"></span> | ||
+ | </div> | ||
+ | |||
+ | </li> | ||
+ | <li> | ||
+ | <div class="header"> | ||
+ | <span class="label"><a href="https://2014.igem.org/Team:SJTU-Software/Project/UserStudy"><font face="Jokerman" color=#ffffff>User Study</font></a></span> | ||
+ | <span class="arrow down"></span> | ||
+ | </div> | ||
+ | |||
+ | </li> | ||
+ | <li> | ||
+ | <div class="header"> | ||
+ | <span class="label"><a href="https://2014.igem.org/Team:SJTU-Software/Project/Demo"><font face="Jokerman" color=#ffffff>Demo</font></a></span> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li> | ||
+ | <div class="header"> | ||
+ | <span class="label" ><a href="https://2014.igem.org/Team:SJTU-Software/Project/Download"><font face="Jokerman" color=#ffffff>Download</font></a></span> | ||
+ | </div> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <!-- End Freebie --> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
- | |||
- | |||
- | <p class="text" style="margin: | + | <div class="container2" style="height:1150px;width:72%;background-color:#E0E0E0; float:left;display:inline" > |
- | + | <div align=center > | |
- | + | ||
- | + | <div class="container2" style="height:1150px;width:100%;background-color: #ECC2FF;margin:0 0 0 0 "> | |
- | + | <div align=left > | |
- | + | <br> | |
- | + | <br> | |
+ | |||
+ | <div class="container2" style="margin:-4% 0 0 0;height:1020px;width:100%;float:left; display:inline" > | ||
+ | <p class="text" style="margin:5% 60px auto"><font face="Helvetica" size="5px" color="#242424">EASY BBK's Demo:</font></p> | ||
+ | |||
+ | <p class="text" style="margin:3% 60px auto"><font face="Helvetica" size="3px" color="#242424">This demo guides you to the function "search" and "compare":<br><br> | ||
+ | |||
+ | </font></p> | ||
+ | <iframe width="480" height="380" style="padding:2% 0 0 10%;" src="//www.youtube.com/embed/YILWQxhKEMQ" frameborder="0" allowfullscreen></iframe> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <p class="text" style="margin:3% 60px auto"><font face="Helvetica" size="3px" color="#242424">This demo guides you to the function "present" and "upload":<br><br> | ||
+ | |||
+ | |||
+ | </font></p> | ||
+ | <iframe width="480px" height="380px" src="//www.youtube.com/embed/5ashyg6DfBw" style="padding:2% 0 0 10%;" frameborder="0" allowfullscreen></iframe> | ||
+ | |||
+ | <p class="text" style="margin:3% 60px auto"><font face="Helvetica" size="3px" color="#242424">If you want more detailed information, please click this link for user tutorial: <a href="https://2014.igem.org/Team:SJTU-Software/Project/Tutorial" target=blank>https://2014.igem.org/Team:SJTU-Software/Project/Tutorial</a><br><br> | ||
+ | |||
+ | |||
+ | </font></p> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
- | </div> | + | </div> |
+ | |||
+ | |||
<div align=center> | <div align=center> | ||
- | <div class="container2" style="height: | + | <div class="container2" style="height:150px;width:71%;background-color: #272727;margin:0.5%;" > |
- | <div align= | + | <div class="container2" style="height:80px;width:100%;background-color: #272727;float:left; display:inline;" > |
+ | <div style=" float:left;margin:3% auto auto 4%;"> | ||
+ | <a href="http://www.sjtu.edu.cn"target="_blank"> | ||
+ | <img style="height:50px;width:auto;" src="https://static.igem.org/mediawiki/2014/7/77/Sjtu_software_SJTU_Logo.png"></img></a></div> | ||
+ | |||
+ | |||
+ | <div style="float:left;margin:3% auto auto 4%;"> | ||
+ | <a href="http://life.sjtu.edu.cn"target="_blank"> | ||
+ | <img style="height:50px;width:auto;" src="https://static.igem.org/mediawiki/2014/0/09/Sjtu_software_Life-logo.png"></img></a></div> | ||
+ | |||
+ | <div style=" float:left;margin:3% auto auto 4%;"> | ||
+ | <a href="http://www.seiee.sjtu.edu.cn/"target="_blank"> | ||
+ | <img style="height:50px;width:150px;" src="https://static.igem.org/mediawiki/2014/5/5b/Sjtu_software_seiee.png"></img></a></div> | ||
+ | |||
+ | |||
+ | |||
+ | <div style="float:left;margin:3% auto auto 4%;"> | ||
+ | <a href="http://bme.sjtu.edu.cn/"target="_blank"> | ||
+ | <img style=height:50px;width:150px;" src="https://static.igem.org/mediawiki/2014/3/31/Sjtu_software_sbe.jpg"></img></a></div> | ||
+ | |||
+ | <div style=" float:left;margin:3% auto auto 4%;"> | ||
+ | <a href="http://skmml.sjtu.edu.cn/"target="_blank"> | ||
+ | <img style="height:50px;width:150px;" src="https://static.igem.org/mediawiki/2014/2/28/Sjtu_software_%E5%BE%AE%E7%94%9F%E7%89%A9%E4%BB%A3%E8%B0%A2%E9%87%8D%E7%82%B9%E5%AE%9E%E9%AA%8C%E5%AE%A4logo.png"></img></a></div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <div class="container2" style="height:80px;width:100%;background-color: #272727;float:left; display:inline;" > | ||
+ | <div align=center style="margin:-10px "> | ||
<br> | <br> | ||
<br> | <br> | ||
- | <p class="container2" style="margin:0 | + | <p class="container2" style="margin:0% 5% auto"><font face="MoolBoran" size="5px" color="#FFFFFF">iGemdry2014@163.com</font></p> |
- | <p class="container2" style="margin:0 | + | <p class="container2" style="margin:0 5% auto"><font face="MoolBoran" size="5px" color="#FFFFFF">SJTU-Software,Shanghai,China</font></p> |
- | + | ||
- | + | ||
</div> | </div> | ||
- | + | </div> | |
</div> | </div> | ||
+ | </div> | ||
+ | |||
<p id="back-to-top"><a href="#top"><span></span><img style="width:100%;height:100%" src="https://static.igem.org/mediawiki/2014/c/cc/Sjtu_software_teamlogo.png" alt="" />back to top</a></p> | <p id="back-to-top"><a href="#top"><span></span><img style="width:100%;height:100%" src="https://static.igem.org/mediawiki/2014/c/cc/Sjtu_software_teamlogo.png" alt="" />back to top</a></p> | ||
<div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div> | <div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div> | ||
Line 439: | Line 589: | ||
}); | }); | ||
</script> | </script> | ||
+ | |||
Latest revision as of 20:06, 17 October 2014
EASY BBK's Demo:
This demo guides you to the function "search" and "compare":
This demo guides you to the function "present" and "upload":
If you want more detailed information, please click this link for user tutorial: https://2014.igem.org/Team:SJTU-Software/Project/Tutorial