Team:SUSTC-Shenzhen-A/tutorial

From 2012.igem.org

(Difference between revisions)
 
(30 intermediate revisions not shown)
Line 1: Line 1:
{{Template:SUSTC_A}}
{{Template:SUSTC_A}}
-
<html>
+
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<head>
-
<style type="text/css">
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +
<title>无标题文档</title>
 +
<STYLE type=text/css>
-
.sidebar_box_woframe {
+
OL LI {
-
margin-bottom: 20px;
+
MARGIN: 8px
}
}
-
 
+
#con {
-
.sidebar_box {
+
FONT-SIZE: 12px; WIDTH: 530px
-
width: 260px;
+
-
padding: 0;
+
-
 
+
}
}
-
 
+
#tags {
-
.sidebar_box_top {
+
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 0px 0px; WIDTH: 500px; PADDING-TOP: 0px; HEIGHT: 40px
-
width: 260px;
+
-
height: 20px;
+
-
 
+
}
}
-
 
+
#tags LI {
-
.sidebar_box_bottom {
+
BACKGROUND: url(http://taftproot.gotoip2.com/ld/images/tagleft.gif) no-repeat left bottom; FLOAT: left; MARGIN-RIGHT: 0px; LIST-STYLE-TYPE: none; HEIGHT: 40px
-
width: 260px;
+
-
height: 20px;
+
-
margin-bottom: 30px;
+
-
 
+
}
}
-
 
+
#tags LI A {
-
.sidebar_box_content {
+
PADDING-RIGHT: 25px; PADDING-LEFT: 25px; BACKGROUND: url(http://taftproot.gotoip2.com/ld/images/tip_bg.gif) no-repeat right bottom; FLOAT: left; PADDING-BOTTOM: 0px; COLOR: #999;LINE-HEIGHT: 23px; PADDING-TOP: 5px; HEIGHT: 23px; TEXT-DECORATION: none;FONT-SIZE: 30px
-
padding: 0 20px;
+
}
}
-
 
+
#tags LI.emptyTag {
-
.sidebar_box_content p {
+
BACKGROUND: none transparent scroll repeat 0% 0%; WIDTH: 4px
-
margin-bottom: 10px;
+
}
}
-
 
+
#tags LI.selectTag {
-
.image_wrapper {
+
BACKGROUND-POSITION: left top; MARGIN-BOTTOM: -2px; POSITION: relative; HEIGHT: 40px
-
position: relative;
+
-
display: block;
+
-
width: 218px;
+
-
height: 128px;
+
-
padding: 9px;
+
}
}
-
.image_wrapper span {
+
#tags LI.selectTag A {
-
position: absolute;
+
BACKGROUND-POSITION: right top; COLOR: #000; LINE-HEIGHT: 25px; HEIGHT: 25px
-
left: 0;
+
-
top: 0;
+
-
width: 236px;
+
-
height: 144px;
+
-
background: url(https://static.igem.org/mediawiki/2012/3/3d/Fruit_site_templatemo_image_frame.png) no-repeat;
+
}
}
-
.image_fl { float: left; margin: 3px 20px 0 0; }
+
#tagContent {
-
.image_fr { float: right; margin: 3px 0 0 20px; }
+
PADDING-RIGHT: 1px; BORDER-TOP: #aecbd4 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; PADDING-TOP:1px; BACKGROUND-COLOR: #fff
-
 
+
-
.title {
+
-
font-family: "Comic Sans MS", cursive;
+
-
font-size: xx-large;
+
-
color: #698B69;
+
}
}
-
.title1 {
+
.tagContent {
-
font-family: "Comic Sans MS", cursive;
+
PADDING-RIGHT: 10px; DISPLAY: none; PADDING-LEFT: 10px; BACKGROUND: url(http://www.6a8a.com/images/bg3.gif) repeat-x; PADDING-BOTTOM: 10px; COLOR: #474747; PADDING-TOP: 10px; HEIGHT: 250px
-
font-size: x-large;
+
-
color: #000;
+
}
}
-
.date {
+
#tagContent DIV.selectTag {
-
      font-family: serif, cursive, fantasy;
+
DISPLAY: block
-
      color:#5f3c23;
+
}
}
-
 
-
#talkbubble {
 
-
  width: 544px;
 
-
  height:165px;
 
-
  background:#ffffff;
 
-
//  background:#EFEFEF;
 
-
  position: relative;
 
-
  -moz-border-radius:    0px;
 
-
  -webkit-border-radius: 0px;
 
-
  border-radius:        10px;
 
-
  font-family: Tahoma, Geneva, sans-serif;
 
-
font-size: 14px;
 
-
  color:#333;
 
-
}
 
-
#talkbubble_a {
 
-
  width: 544px;
 
-
  height:200px;
 
-
//  background:#EFEFEF;
 
-
  background:#ffffff;
 
-
  position: relative;
 
-
  -moz-border-radius:    0px;
 
-
  -webkit-border-radius: 0px;
 
-
  border-radius:        10px;
 
-
  font-family: Tahoma, Geneva, sans-serif;
 
-
  font-size: 13px;
 
-
  color:#333;
 
-
}
 
-
#talkbubble_b {
 
-
  width: 544px;
 
-
  height:250px;
 
-
//  background:#EFEFEF;
 
-
  background:#ffffff;
 
-
  position: relative;
 
-
  -moz-border-radius:    0px;
 
-
  -webkit-border-radius: 0px;
 
-
  border-radius:        10px;
 
-
  font-family: Tahoma, Geneva, sans-serif;
 
-
  font-size: 13px;
 
-
  color:#333;
 
-
}
 
-
 
-
#talkbubble1 {
 
-
  width: 275px;
 
-
  height:500px;
 
-
//  background:#FAF0E6;
 
-
//  background:#feeeed;
 
-
  background:#EFEFEF;
 
-
  position: relative;
 
-
  -moz-border-radius:    10px;
 
-
  -webkit-border-radius: 10px;
 
-
  border-radius:        10px;
 
-
text-align: left;
 
-
border-top-style: solid;
 
-
border-right-style: solid;
 
-
border-bottom-style: solid;
 
-
border-left-style: solid;
 
-
        border-width: thin;
 
-
border-top-color:#DCDCDC;
 
-
border-right-color: #DCDCDC;
 
-
border-bottom-color:#DCDCDC;
 
-
border-left-color:#DCDCDC;
 
-
  font-size: 13px;
 
-
  color:#333;
 
-
font-family: Tahoma, Geneva;
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
#content .row-1, #content .row-2{font-size:0.814em;width:960px;margin:0 auto}
 
-
#content {margin-top:0px;position:relative}
 
-
#content .row-1 .inside {padding:0 0 40px 40px}
 
-
#content .row-2 .inside {padding:32px 0 40px 0}
 
-
#content .row-2 h3 {padding-left:42px}
 
-
#content .aside {float:left;width:258px;margin-right:58px}
 
-
#content .aside h3 {border-bottom:1px solid #d4d4d4;padding:0 0 0 10px;margin-bottom:20px;left:-10px;position:relative}
 
-
#content .aside ul {padding-bottom:5px}
 
-
 
-
 
-
 
-
#content .aside ul li img {float:left;position:relative;top:3px;margin-right:15px}
 
-
#content .aside ul li span {display:block;color:#000;font-size:20px;line-height:1.2em;padding-bottom:2px}
 
-
#content .content {float:left;width:570px}
 
-
#content .indent {padding:0 20px}
 
-
 
-
.li{list-style-type:none;}
+
#width_1{width:60px}
-
</style>
+
  #course {
 +
border-width:0px 1px 1px 1px;
 +
border-style:solid;
 +
border-color:#f3c3f3;
 +
width:150px;
 +
}
 +
  #course dt,#course dd {
 +
margin:0;
 +
padding:3px;
 +
font-size:25px;
 +
}
 +
  #course dt {
 +
border-top: 1px solid #f3c3f3;
 +
font-weight: bold;
 +
background-color:#c3f3c3;
 +
}
 +
</STYLE>
</head>
</head>
-
<body >
 
-
<table align="center">
+
<body>
-
  <tr>
+
<table align="center" width="900" border="0">
-
+
  <tr>
-
    <td valign="TOP" height="900"><table>
+
    <td><DIV id=con>
-
      <tr>
+
<UL id=tags>
-
        <td width="584"  align="center"><div align="left" id="talkbubble">
+
  <LI><A onMouseOver="selectTag('tagContent0',this)"  
-
 
+
  href="javascript:void(0)"> <em><strong>Tip  1 </strong></em><strong></strong></A> </LI>
-
            <p class="title"><strong>The pictures of each step</strong></p>
+
  <LI class=selectTag><A onMouseOver="selectTag('tagContent1',this)"  
-
 
+
  href="javascript:void(0)"> <em><strong>Tip  2 </strong></em><strong></strong></A> </LI>
-
<p>
+
  <LI><A onMouseOver="selectTag('tagContent2',this)"  
-
 
+
  href="javascript:void(0)"> <em><strong>Tip  3 </strong></em><strong></strong></A> </LI>
-
 
+
    <LI><A onMouseOver="selectTag('tagContent3',this)"  
-
<div id="HackBox1" class="HackBox" style="width:100%;display:block;">
+
  href="javascript:void(0)"> <em><strong>Tip  4 </strong></em><strong></strong></A> </LI>
-
<div align="center">
+
  </UL>
-
<table border="0" width="95%" cellpadding="0" style="border-collapse: collapse" height="90" id="table1">
+
<DIV id=tagContent>
-
<tr>
+
<DIV class=tagContent id=tagContent0>
-
<td style="line-height: 150%">&nbsp;
+
   <table width="458" border="0">
-
   <table width="200" border="0">
+
     <tr>
     <tr>
-
       <td><img src="http://taftproot.gotoip2.com/ld/img/tutorial_01.png" width="400" height="700"></td>
+
       <td width="300"><img src="http://taftproot.gotoip2.com/ld/img/tutorial_01.png" width="300" height="500"></td>
-
       <td>123</td>
+
       <td width="195"><p><strong>This is the first page after you open the  app first time. In this page, you can choice your address in order we can  choice the best server to provide the data.</strong></p></td>
     </tr>
     </tr>
 +
  </table></DIV>
 +
<DIV class="tagContent selectTag" id=tagContent1>
 +
  <table width="458" border="0">
     <tr>
     <tr>
-
       <td><img src="http://taftproot.gotoip2.com/ld/img/tutorial_01.png" width="400" height="700"></td>
+
       <td width="300"><img src="http://taftproot.gotoip2.com/ld/img/tutorial_02.png" width="300" height="500"></td>
-
       <td>123</td>
+
       <td width="148"><p><strong>This is the first page after you open the  app first time. In this page, you can choice your address in order we can  choice the best server to provide the data.</strong></p></td>
     </tr>
     </tr>
 +
  </table>
 +
</DIV>
 +
<DIV class=tagContent id=tagContent2>
 +
<table width="458" border="0">
     <tr>
     <tr>
-
       <td>&nbsp;</td>
+
       <td width="300"><img src="http://taftproot.gotoip2.com/ld/img/tutorial_03.png" width="300" height="500"></td>
-
       <td>&nbsp;</td>
+
       <td width="195"><p><strong>This is the first page after you open the  app first time. In this page, you can choice your address in order we can  choice the best server to provide the data.</strong></p></td>
     </tr>
     </tr>
 +
  </table></DIV>
 +
<DIV class=tagContent id=tagContent3>
 +
<table width="458" border="0">
     <tr>
     <tr>
-
       <td>&nbsp;</td>
+
       <td width="300"><img src="http://taftproot.gotoip2.com/ld/img/tutorial_04.png" width="300" height="500"></td>
-
       <td>&nbsp;</td>
+
       <td width="195"><p><strong>This is the first page after you open the  app first time. In this page, you can choice your address in order we can  choice the best server to provide the data.</strong></p></td>
     </tr>
     </tr>
-
   </table></td>
+
   </table></DIV></DIV></DIV>
-
</tr>
+
 
-
</table>
+
 
-
</div>
+
 
-
</div>
+
 
-
 
+
 
-
<div id="HackBox2" class="HackBox" style="width:100%;display:none;">
+
 
-
<div align="center">
+
 
-
<table border="0" width="95%" cellpadding="0" style="border-collapse: collapse" height="90" id="table2">
+
 
-
<tr>
+
 
-
<td style="line-height: 150%"><b>拜金主义的女人</b> <br>
+
 
-
　　她不会看上穷光蛋，因为她的爱情首先建立在物质的满足上，她知道花男人的钱比自己辛苦赚来的钱容易，这是她限定和男人交往的条件。和她交往，总有金山银山被挖光的一天，那时只有落的人财两空的局面。</td>
+
 
-
</tr>
+
 
-
</table>
+
 
-
</div>
+
 
-
</div>
+
 
-
 
+
 
-
 
+
 
-
<div id="HackBox3" class="HackBox" style="width:100%;display:none;">
+
 
-
<div align="center">
+
<SCRIPT type=text/javascript>
-
<table border="0" width="95%" cellpadding="0" style="border-collapse: collapse" height="90" id="table3">
+
function selectTag(showContent,selfObj){
-
<tr>
+
// 标签6a8a.com
-
<td style="line-height: 150%"><b>歇斯底里的女人</b> <br>
+
var tag = document.getElementById("tags").getElementsByTagName("li");
-
　　她的专长是一哭二闹三上吊，只要稍稍辜负她，她就会以死作威胁，当发现一个女人充满神经质，动不动就有发动千军万马之势，要随时提防它闹出失控的局面，否则就意味着不得安宁的日子从此开始。</td>
+
var taglength = tag.length;
-
</tr>
+
for(i=0; i<taglength; i++){
-
</table>
+
tag[i].className = "";
-
</div>
+
}
-
</div>
+
selfObj.parentNode.className = "selectTag";
-
 
+
// 标签内容
-
<div id="HackBox4" class="HackBox" style="width:100%;display:none;">
+
for(i=0; j=document.getElementById("tagContent"+i); i++){
-
<div align="center">
+
j.style.display = "none";
-
<table border="0" width="95%" cellpadding="0" style="border-collapse: collapse" height="90" id="table4">
+
}
-
<tr>
+
document.getElementById(showContent).style.display = "block";
-
<td style="line-height: 150%"><b>翻脸不认人的女人</b> <br>
+
-
　　不管好的时候多好，一旦反目，她则完全变成另外一个人，毫不留情地公开你们之间所有的秘密，甚至不行玉石俱焚。碰到这样的女人，要有心理准备，分手后她底报复心会炸的你粉身碎骨。 </td>
+
-
</tr>
+
-
</table>
+
-
</div>
+
-
</div>
+
-
 
+
-
<script language="JavaScript">
+
-
 
+
-
function switchTab(tabpage,tabid,show_n){
+
-
//alert(show_n);
+
-
for(var i=1;i<5;i++){
+
-
document.getElementById('HackBox'+i).style.display="none";
+
}
}
-
document.getElementById(show_n).style.display="block";
+
</SCRIPT>
-
var oItem = document.getElementById(tabpage);
+
<br />
-
for(var i=0;i<oItem.children.length;i++){
+
</td>
-
var x = oItem.children(i);
+
<td>
-
x.className = "";
+
<div id="width_1"></div>
-
var y = x.getElementsByTagName('a');
+
</td>
-
y[0].style.color="#333333";
+
    <td>
-
}
+
   
-
document.getElementById(tabid).className = "Selected";
+
<div class="sidebar_box"><div class="sidebar_box_top"></div>
-
}
+
<div class="sidebar_box_content">          
-
</script>
+
-
 
-
 
-
</p>
 
-
 
-
 
-
</div>
 
-
    </td>
 
-
          </tr>
 
-
       
 
-
        </table></td>
 
-
    <td valign="TOP" width="305">
 
-
 
-
 
-
<table>
 
-
 
-
 
-
 
-
 
-
  <tr>
 
-
    <td align="left"><div id="talkbubble1"><div class="sidebar_box"><div class="sidebar_box_top"></div>
 
-
<div class="sidebar_box_content">           
 
-
<p class="title1">Tutorial</p>
 
-
<img src="https://static.igem.org/mediawiki/2012/c/c9/Devidingline_side.jpg">
 
-
<span class="date"><strong>In this page,the tutorial of the APP will be showed to you.</strong></span>
 
Line 288: Line 158:
-
 
+
    <dl id="course" width="200">
-
 
+
<dt><strong><a href="#">Tips 1 - 4</a></strong></dt>
-
 
+
  <dd>&nbsp;</dd>
-
 
+
<dt>Tips 5 - 8</dt>
-
 
+
  <dd>&nbsp;</dd>
-
 
+
<dt>Tips 9 - 12</dt>
-
 
+
  <dd>&nbsp;</dd>
-
 
+
<dt>Tips 13 - 16</dt>
-
 
+
  <dd>&nbsp;</dd>
-
 
+
<dt>Tips 17 - 20</dt>
-
 
+
  <dd>&nbsp;</dd>
-
<div id="content">
+
<dt>Tips 21 - 24</dt>
-
<div class="row-1">
+
  <dd>&nbsp;</dd>
-
<div class="inside">
+
<dt>Tips 25 - 28</dt>
-
<div class="container">
+
  <dd>&nbsp;</dd>
-
<div class="aside">
+
<dt>Tips 28 - 32</dt>
-
<ul>
+
  <dd>&nbsp;</dd>
-
<li>
+
</dl>
-
<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />           <a href="#" onClick="javascript:switchTab('TabPage1','Tab1','HackBox1');">   Step 1   -   4</a> </li> <br> <li>
+
-
<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />           <a href="#" onClick="javascript:switchTab('TabPage1','Tab2','HackBox2');">   Step 5   -   8</a> </li><br>
+
-
 
+
-
<li>
+
-
<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />           <a href="#" onClick="javascript:switchTab('TabPage1','Tab3','HackBox3');">   Step 9   -12</a>
+
-
</li><br>
+
-
 
+
-
<li>
+
-
<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />          <a href="#" onClick="javascript:switchTab('TabPage1','Tab4','HackBox4');">   Step 13-16</a>
+
-
</li> <br>
+
-
 
+
-
 
+
-
<li style="list-style-type:none;">
+
-
<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />           <a href="#" onClick="javascript:switchTab('TabPage1','Tab5','HackBox5');">   Step 17-20</a> </li><br>
+
-
<li style="list-style-type:none;">
+
-
<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />           <a href="#">   Step 21-24</a> </li><br>
+
-
 
+
-
<li style="list-style-type:none;">
+
-
<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />           <a href="#">   Step 25-28</a> </li><br>
+
-
<li style="list-style-type:none;">
+
-
<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />           <a href="#">   Step 29-32</a> </li><br>
+
-
 
+
-
 
+
-
 
+
-
</ul>
+
-
</div>
+
-
 
+
-
<div class="clear"> <br>
+
-
<br>
+
-
<br>
+
-
<br>
+
-
<br>
+
-
<br>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
</div>                     
</div>                     
             </div>
             </div>
-
</div></td>
+
</div>  
-
      </tr>
+
   
 +
    </td>
 +
  </tr>
</table>
</table>
-
 
-
 
-
</td>
 
-
      </tr>
 
-
</table>
 
-
<!-- end of header -->
 
-
 
</body>
</body>
</html>
</html>

Latest revision as of 16:28, 18 September 2012

无标题文档

This is the first page after you open the app first time. In this page, you can choice your address in order we can choice the best server to provide the data.

This is the first page after you open the app first time. In this page, you can choice your address in order we can choice the best server to provide the data.

This is the first page after you open the app first time. In this page, you can choice your address in order we can choice the best server to provide the data.

This is the first page after you open the app first time. In this page, you can choice your address in order we can choice the best server to provide the data.

Tips 1 - 4
 
Tips 5 - 8
 
Tips 9 - 12
 
Tips 13 - 16
 
Tips 17 - 20
 
Tips 21 - 24
 
Tips 25 - 28
 
Tips 28 - 32
 

Retrieved from "http://2012.igem.org/Team:SUSTC-Shenzhen-A/tutorial"