Team:SUSTC-Shenzhen-A/tutorial

From 2012.igem.org

(Difference between revisions)
Line 209: Line 209:
<p>
<p>
-
 
-
<DIV id=con>
 
-
<UL id=tags>
 
-
  <LI><A onMouseOver="selectTag('tagContent0',this)"
 
-
  href="javascript:void(0)"> <em><strong>Tip  1 </strong></em><strong></strong></A> </LI>
 
-
  <LI class=selectTag><A onMouseOver="selectTag('tagContent1',this)"
 
-
  href="javascript:void(0)"> <em><strong>Tip  2 </strong></em><strong></strong></A> </LI>
 
-
  <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)"
 
-
  href="javascript:void(0)"> <em><strong>Tip  4 </strong></em><strong></strong></A> </LI>
 
-
  </UL>
 
-
<DIV id=tagContent>
 
-
<DIV class=tagContent id=tagContent0>  <table width="505" border="0">
 
-
    <tr>
 
-
      <td width="300"><img src="http://taftproot.gotoip2.com/ld/img/tutorial_01.png" width="300" height="500"></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>
 
-
  </table></DIV>
 
-
<DIV class="tagContent selectTag" id=tagContent1>
 
-
  <table width="505" border="0">
 
-
    <tr>
 
-
      <td width="300"><img src="http://taftproot.gotoip2.com/ld/img/tutorial_02.png" width="300" height="500"></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>
 
-
  </table>
 
-
</DIV>
 
-
<DIV class=tagContent id=tagContent2>
 
-
<table width="505" border="0">
 
-
    <tr>
 
-
      <td width="300"><img src="http://taftproot.gotoip2.com/ld/img/tutorial_03.png" width="300" height="500"></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>
 
-
  </table></DIV>
 
-
<DIV class=tagContent id=tagContent3>
 
-
<table width="505" border="0">
 
-
    <tr>
 
-
      <td width="300"><img src="http://taftproot.gotoip2.com/ld/img/tutorial_04.png" width="300" height="500"></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>
 
-
  </table></DIV></DIV></DIV>
 
-
<SCRIPT type=text/javascript>
 
-
function selectTag(showContent,selfObj){
 
-
// 标签6a8a.com
 
-
var tag = document.getElementById("tags").getElementsByTagName("li");
 
-
var taglength = tag.length;
 
-
for(i=0; i<taglength; i++){
 
-
tag[i].className = "";
 
-
}
 
-
selfObj.parentNode.className = "selectTag";
 
-
// 标签内容
 
-
for(i=0; j=document.getElementById("tagContent"+i); i++){
 
-
j.style.display = "none";
 
-
}
 
-
document.getElementById(showContent).style.display = "block";
 
-
}
 
-
</SCRIPT>
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
<div id="tagContent0" class="HackBox" style="width:100%;display:block;">
 
-
<div align="center">
 
-
<table border="0" width="95%" cellpadding="0" style="border-collapse: collapse" height="90" id="table1">
 
-
<tr>
 
-
<td style="line-height: 150%">&nbsp;
 
-
  <table width="200" border="0">
 
-
    <tr>
 
-
      <td><img src="http://taftproot.gotoip2.com/ld/img/tutorial_01.png" width="350" height="550"></td>
 
-
      <td>123</td>
 
-
    </tr>
 
-
    <tr>
 
-
      <td><img src="http://taftproot.gotoip2.com/ld/img/tutorial_01.png" width="350" height="550"></td>
 
-
      <td>123</td>
 
-
    </tr>
 
-
    <tr>
 
-
      <td>&nbsp;</td>
 
-
      <td>&nbsp;</td>
 
-
    </tr>
 
-
    <tr>
 
-
      <td>&nbsp;</td>
 
-
      <td>&nbsp;</td>
 
-
    </tr>
 
-
  </table></td>
 
-
</tr>
 
-
</table>
 
-
</div>
 
-
</div>
 
-
 
-
 
-
<div id="tagContent1" class="HackBox" style="width:100%;display:none;">
 
-
<div align="center">
 
-
<table border="0" width="95%" cellpadding="0" style="border-collapse: collapse" height="90" id="table1">
 
-
<tr>
 
-
<td style="line-height: 150%">&nbsp;
 
-
  <table width="200" border="0">
 
-
    <tr>
 
-
      <td><img src="http://taftproot.gotoip2.com/ld/img/tutorial_03.png" width="350" height="550"></td>
 
-
      <td>123</td>
 
-
    </tr>
 
-
    <tr>
 
-
      <td><img src="http://taftproot.gotoip2.com/ld/img/tutorial_04.png" width="350" height="550"></td>
 
-
      <td>123</td>
 
-
    </tr>
 
-
    <tr>
 
-
      <td>&nbsp;</td>
 
-
      <td>&nbsp;</td>
 
-
    </tr>
 
-
    <tr>
 
-
      <td>&nbsp;</td>
 
-
      <td>&nbsp;</td>
 
-
    </tr>
 
-
  </table></td>
 
-
</tr>
 
-
</table>
 
-
</div>
 
-
</div>
 
Line 349: Line 221:
         
         
         </table></td>
         </table></td>
 +
 +
 +
 +
    <td valign="TOP" width="305">
    <td valign="TOP" width="305">
Line 367: Line 243:
<div class="sidebar_box_bottom">
<div class="sidebar_box_bottom">
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
<div id="content">
 
-
<div class="row-1">
 
-
<div class="inside">
 
-
<div class="container">
 
-
<div class="aside">
 
-
<ul>
 
-
<li>
 
-
<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />          <A onMouseOver="selectTag('tagContent1',this)"
 
-
  href="javascript:void(0)">  Step 1    -    4</a> </li> <br>  <li>
 
-
<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />            <A onMouseOver="selectTag('tagContent2',this)"
 
-
  href="javascript:void(0)">  Step 5    -    8</a> </li><br>
 
-
 
-
<li>
 
-
<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />          <A onMouseOver="selectTag('tagContent3',this)"
 
-
  href="javascript:void(0)">  Step 9    -12</a>
 
-
</li><br>
 
-
 
-
<li>
 
-
<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />        <A onMouseOver="selectTag('tagContent4',this)"
 
-
  href="javascript:void(0)">    Step 13-16</a>
 
-
</li> <br>
 
-
 
-
 
-
<li style="list-style-type:none;">
 
-
<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />        <A onMouseOver="selectTag('tagContent5',this)"
 
-
  href="javascript:void(0)">  Step 17-20</a> </li><br>
 
-
<li style="list-style-type:none;">
 
-
<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />          <A onMouseOver="selectTag('tagContent6',this)"
 
-
  href="javascript:void(0)">  Step 21-24</a> </li><br>
 
-
 
-
<li style="list-style-type:none;">
 
-
<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />          <A onMouseOver="selectTag('tagContent7',this)"
 
-
  href="javascript:void(0)">  Step 25-28</a> </li><br>
 
-
<li style="list-style-type:none;">
 
-
<img src="http://taftproot.gotoip2.com/ld/images/pic2.gif" alt="" />          <A onMouseOver="selectTag('tagContent8',this)"
 
-
  href="javascript:void(0)">  Step 29-32</a> </li><br>
 
-
 
-
 
-
 
-
</ul>
 
-
</div>
 
-
 
-
<div class="clear"> </div>
 
-
</div>
 
-
</div>
 
-
</div>
 
-
</div>
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 

Revision as of 09:35, 16 September 2012

The pictures of each step