Team:SUSTC-Shenzhen-A/tutorial

From 2012.igem.org

(Difference between revisions)
 
(22 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 160: Line 10:
}
}
#con {
#con {
-
FONT-SIZE: 12px; MARGIN: 0px auto; WIDTH: 550px
+
FONT-SIZE: 12px; WIDTH: 530px
}
}
#tags {
#tags {
-
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 0px 0px; WIDTH: 600px; PADDING-TOP: 0px; HEIGHT: 40px
+
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://taftproot.gotoip2.com/ld/images/tagleft.gif) no-repeat left bottom; FLOAT: left; MARGIN-RIGHT: 1px; LIST-STYLE-TYPE: none; HEIGHT: 40px
+
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 {
Line 190: Line 40:
}
}
 +
 +
 +
#width_1{width:60px}
Line 208: Line 61:
  background-color:#c3f3c3;
  background-color:#c3f3c3;
  }
  }
-
 
+
</STYLE>
-
 
+
-
 
+
-
 
+
-
</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>
 +
  <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="458" 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="458" border="0">
 +
    <tr>
 +
      <td width="300"><img src="http://taftproot.gotoip2.com/ld/img/tutorial_02.png" width="300" height="500"></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>
 +
  </table>
 +
</DIV>
 +
<DIV class=tagContent id=tagContent2>
 +
<table width="458" 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="458" 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>
 +
<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">          
-
            <p class="title"><strong>The pictures of each step</strong></p>
 
-
 
-
<p>
 
-
 
-
 
-
 
-
 
-
 
-
</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 263: Line 158:
-
     <dl id="course">
+
     <dl id="course" width="200">
-
  <dt><strong>Step 1 - 4</strong></dt>
+
  <dt><strong><a href="#">Tips 1 - 4</a></strong></dt>
   <dd>&nbsp;</dd>
   <dd>&nbsp;</dd>
-
  <dt>Step 5 - 8</dt>
+
  <dt>Tips 5 - 8</dt>
   <dd>&nbsp;</dd>
   <dd>&nbsp;</dd>
-
  <dt>Step 9 - 12</dt>
+
  <dt>Tips 9 - 12</dt>
   <dd>&nbsp;</dd>
   <dd>&nbsp;</dd>
-
  <dt>Step 13 - 16</dt>
+
  <dt>Tips 13 - 16</dt>
   <dd>&nbsp;</dd>
   <dd>&nbsp;</dd>
-
  <dt>Step 17 - 20</dt>
+
  <dt>Tips 17 - 20</dt>
   <dd>&nbsp;</dd>
   <dd>&nbsp;</dd>
-
  <dt>Step 21 - 24</dt>
+
  <dt>Tips 21 - 24</dt>
   <dd>&nbsp;</dd>
   <dd>&nbsp;</dd>
-
  <dt>Step 25 - 28</dt>
+
  <dt>Tips 25 - 28</dt>
   <dd>&nbsp;</dd>
   <dd>&nbsp;</dd>
-
  <dt>Step 28 - 32</dt>
+
  <dt>Tips 28 - 32</dt>
   <dd>&nbsp;</dd>
   <dd>&nbsp;</dd>
</dl>
</dl>
Line 285: Line 180:
</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"