Team:SUSTC-Shenzhen-A/tutorial

From 2012.igem.org

(Difference between revisions)
 
(25 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>
-
.sidebar_box_woframe {
+
<STYLE type=text/css>
-
margin-bottom: 20px;
+
-
}
+
-
 
+
-
.sidebar_box {
+
-
width: 260px;
+
-
padding: 0;
+
-
 
+
-
}
+
-
 
+
-
.sidebar_box_top {
+
-
width: 260px;
+
-
height: 20px;
+
-
 
+
-
}
+
-
 
+
-
.sidebar_box_bottom {
+
-
width: 260px;
+
-
height: 20px;
+
-
margin-bottom: 30px;
+
-
 
+
-
}
+
-
 
+
-
.sidebar_box_content {
+
-
padding: 0 20px;
+
-
}
+
-
 
+
-
.sidebar_box_content p {
+
-
margin-bottom: 10px;
+
-
}
+
-
 
+
-
.image_wrapper {
+
-
position: relative;
+
-
display: block;
+
-
width: 218px;
+
-
height: 128px;
+
-
padding: 9px;
+
-
}
+
-
.image_wrapper span {
+
-
position: absolute;
+
-
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; }
+
-
.image_fr { float: right; margin: 3px 0 0 20px; }
+
-
 
+
-
.title {
+
-
font-family: "Comic Sans MS", cursive;
+
-
font-size: xx-large;
+
-
color: #698B69;
+
-
}
+
-
.title1 {
+
-
font-family: "Comic Sans MS", cursive;
+
-
font-size: x-large;
+
-
color: #000;
+
-
}
+
-
.date {
+
-
      font-family: serif, cursive, fantasy;
+
-
      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}
+
-
 
+
-
 
+
OL LI {
OL LI {
Line 161: Line 10:
}
}
#con {
#con {
-
FONT-SIZE: 12px; MARGIN: 0px auto; WIDTH: 600px
+
FONT-SIZE: 12px; WIDTH: 530px
}
}
#tags {
#tags {
-
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 0px 10px; WIDTH: 400px; PADDING-TOP: 0px; HEIGHT: 23px
+
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 0px 0px; WIDTH: 500px; PADDING-TOP: 0px; HEIGHT: 40px
}
}
#tags LI {
#tags LI {
-
BACKGROUND: url(http://www.6a8a.com/images/tagleft.gif) no-repeat left bottom; FLOAT: left; MARGIN-RIGHT: 1px; LIST-STYLE-TYPE: none; HEIGHT: 23px
+
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
}
}
#tags LI A {
#tags LI A {
-
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: url(http://www.6a8a.com/images/tagright.gif) no-repeat right bottom; FLOAT: left; PADDING-BOTTOM: 0px; COLOR: #999;LINE-HEIGHT: 23px; PADDING-TOP: 0px; HEIGHT: 23px; TEXT-DECORATION: none
+
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
}
}
#tags LI.emptyTag {
#tags LI.emptyTag {
Line 176: Line 25:
}
}
#tags LI.selectTag {
#tags LI.selectTag {
-
BACKGROUND-POSITION: left top; MARGIN-BOTTOM: -2px; POSITION: relative; HEIGHT: 25px
+
BACKGROUND-POSITION: left top; MARGIN-BOTTOM: -2px; POSITION: relative; HEIGHT: 40px
}
}
#tags LI.selectTag A {
#tags LI.selectTag A {
Line 182: Line 31:
}
}
#tagContent {
#tagContent {
-
BORDER-RIGHT: #aecbd4 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #aecbd4 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: #aecbd4 1px solid;PADDING-TOP:1px; BORDER-BOTTOM: #aecbd4 1px solid; BACKGROUND-COLOR: #fff
+
PADDING-RIGHT: 1px; BORDER-TOP: #aecbd4 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; PADDING-TOP:1px; BACKGROUND-COLOR: #fff
}
}
.tagContent {
.tagContent {
-
PADDING-RIGHT: 10px; DISPLAY: none; PADDING-LEFT: 10px; BACKGROUND: url(http://www.6a8a.com/images/bg3.gif) repeat-x; PADDING-BOTTOM: 10px; WIDTH: 576px; COLOR: #474747; PADDING-TOP: 10px; HEIGHT: 250px
+
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
}
}
#tagContent DIV.selectTag {
#tagContent DIV.selectTag {
Line 192: Line 41:
-
</style>
 
-
</head>
 
-
<body >
 
-
<table align="center">
+
#width_1{width:60px}
-
  <tr>
+
-
+
-
    <td valign="TOP" height="900"><table>
+
-
      <tr>
+
-
        <td width="584"  align="center"><div align="left" id="talkbubble">
+
-
            <p class="title"><strong>The pictures of each step</strong></p>
 
-
<p>
+
  #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>
-
 
+
<body>
-
 
+
<table align="center" width="900" border="0">
-
<DIV id=con>
+
  <tr>
 +
    <td><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 id=tagContent>
-
<DIV class=tagContent id=tagContent0>最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</DIV>
+
<DIV class=tagContent id=tagContent0>
-
<DIV class="tagContent selectTag" id=tagContent1>这时是ASP标签的内容。</DIV>
+
   <table width="458" border="0">
-
<DIV class=tagContent id=tagContent2>自适应宽度的标签内容。</DIV></DIV>
+
-
</div>
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
<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>
     <tr>
-
       <td><img src="http://taftproot.gotoip2.com/ld/img/tutorial_01.png" width="350" height="550"></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="350" height="550"></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="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>
+
-
 
+
-
 
+
-
 
+
-
 
+
-
</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>
+
-
 
+
-
 
+
-
 
+
-
<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 id=con>
+
-
<UL id=tags>
+
-
   <LI><A onMouseOver="selectTag('tagContent0',this)"
+
-
   href="javascript:void(0)">网页代码站</A> </LI>
+
-
   <LI class=selectTag><A onClick="selectTag('tagContent1',this)"
+
-
   href="javascript:void(0)">ASP源码</A> </LI>
+
-
   <LI><A onMouseOver="selectTag('tagContent2',this)"
+
-
   href="javascript:void(0)">自适应宽度的标签</A> </LI></UL>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
<SCRIPT type=text/javascript>
<SCRIPT type=text/javascript>
function selectTag(showContent,selfObj){
function selectTag(showContent,selfObj){
Line 399: Line 142:
}
}
</SCRIPT>
</SCRIPT>
 +
<br />
 +
</td>
 +
<td>
 +
<div id="width_1"></div>
 +
</td>
 +
    <td>
 +
   
 +
<div class="sidebar_box"><div class="sidebar_box_top"></div>
 +
<div class="sidebar_box_content">           
 +
<div class="sidebar_box_bottom">
-
 
+
    <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>
-
 
+
<dt>Tips 21 - 24</dt>
 +
  <dd>&nbsp;</dd>
 +
<dt>Tips 25 - 28</dt>
 +
  <dd>&nbsp;</dd>
 +
<dt>Tips 28 - 32</dt>
 +
  <dd>&nbsp;</dd>
 +
</dl>
</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"