Team:SUSTC-Shenzhen-A/tutorial

From 2012.igem.org

(Difference between revisions)
Line 154: Line 154:
#content .content {float:left;width:570px}
#content .content {float:left;width:570px}
#content .indent {padding:0 20px}
#content .indent {padding:0 20px}
-
 
Line 161: Line 160:
}
}
#con {
#con {
-
FONT-SIZE: 12px; MARGIN: 0px auto; WIDTH: 600px
+
FONT-SIZE: 12px; MARGIN: 0px auto; WIDTH: 550px
}
}
#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: 600px; 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: 1px; 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 175:
}
}
#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 181:
}
}
#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 {
DISPLAY: block
DISPLAY: block
}
}
 +
 +
 +
Line 206: Line 208:
<p>
<p>
-
 
<DIV id=con>
<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> <table width="505" border="0">
-
<DIV class="tagContent selectTag" id=tagContent1>这时是ASP标签的内容。</DIV>
+
    <tr>
-
<DIV class=tagContent id=tagContent2>自适应宽度的标签内容。</DIV></DIV>
+
      <td width="300"><img src="http://taftproot.gotoip2.com/ld/img/tutorial_01.png" width="300" height="500"></td>
-
</div>
+
      <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>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
Line 364: Line 423:
<div class="clear"> </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>
Line 378: Line 428:
</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>
 

Revision as of 08:24, 16 September 2012

The pictures of each step

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.
 
123
123
   
   

Tutorial

In this page,the tutorial of the APP will be showed to you.

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