Team:SUSTC-Shenzhen-A/tutorial
From 2012.igem.org
(Difference between revisions)
(56 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> | ||
- | < | + | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
+ | <title>无标题文档</title> | ||
+ | <STYLE type=text/css> | ||
- | + | OL LI { | |
- | + | MARGIN: 8px | |
} | } | ||
- | + | #con { | |
- | + | FONT-SIZE: 12px; WIDTH: 530px | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | #tags { | |
- | + | PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 0px 0px; WIDTH: 500px; PADDING-TOP: 0px; HEIGHT: 40px | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | #tags LI { | |
- | + | 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 { | |
- | + | 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 { | |
- | . | + | BACKGROUND: none transparent scroll repeat 0% 0%; WIDTH: 4px |
- | + | ||
} | } | ||
- | + | #tags LI.selectTag { | |
- | . | + | BACKGROUND-POSITION: left top; MARGIN-BOTTOM: -2px; POSITION: relative; HEIGHT: 40px |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | . | + | #tags LI.selectTag A { |
- | + | BACKGROUND-POSITION: right top; COLOR: #000; LINE-HEIGHT: 25px; HEIGHT: 25px | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | #tagContent { | |
- | + | PADDING-RIGHT: 1px; BORDER-TOP: #aecbd4 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; PADDING-TOP:1px; BACKGROUND-COLOR: #fff | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | . | + | .tagContent { |
- | + | 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 { |
- | + | DISPLAY: block | |
- | + | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
+ | #width_1{width:60px} | ||
- | + | #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" width="900" border="0"> |
- | + | <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)" | |
- | this | + | href="javascript:void(0)"> <em><strong>Tip 2 </strong></em><strong></strong></A> </LI> |
- | this | + | <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)" | |
- | 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> | |
- | this. | + | <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> | </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"> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
Line 350: | Line 158: | ||
- | + | <dl id="course" width="200"> | |
- | + | <dt><strong><a href="#">Tips 1 - 4</a></strong></dt> | |
- | + | <dd> </dd> | |
- | + | <dt>Tips 5 - 8</dt> | |
- | + | <dd> </dd> | |
- | + | <dt>Tips 9 - 12</dt> | |
- | + | <dd> </dd> | |
- | + | <dt>Tips 13 - 16</dt> | |
- | + | <dd> </dd> | |
- | + | <dt>Tips 17 - 20</dt> | |
- | + | <dd> </dd> | |
- | + | <dt>Tips 21 - 24</dt> | |
- | + | <dd> </dd> | |
- | + | <dt>Tips 25 - 28</dt> | |
- | + | <dd> </dd> | |
- | + | <dt>Tips 28 - 32</dt> | |
- | + | <dd> </dd> | |
- | + | </dl> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
</div> | </div> | ||
</div> | </div> | ||
- | </div></td> | + | </div> |
- | + | ||
+ | </td> | ||
+ | </tr> | ||
</table> | </table> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
</body> | </body> | ||
</html> | </html> |
Latest revision as of 16:28, 18 September 2012
|