Team:SUSTC-Shenzhen-A/tutorial test

From 2012.igem.org

(Difference between revisions)
 
(16 intermediate revisions not shown)
Line 1: Line 1:
<html xmlns="http://www.w3.org/1999/xhtml">
<html xmlns="http://www.w3.org/1999/xhtml">
-
<HEAD>
+
<head>
-
<TITLE>JS+CSS仿网易的选项卡TAB标签样式_网页代码站(www.6a8a.com)</TITLE>
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +
<title>无标题文档</title>
<STYLE type=text/css>
<STYLE type=text/css>
-
BODY {
 
-
FONT-SIZE: 14px; }
 
OL LI {
OL LI {
MARGIN: 8px
MARGIN: 8px
}
}
#con {
#con {
-
FONT-SIZE: 12px; MARGIN: 0px auto; WIDTH: 600px
+
FONT-SIZE: 12px; MARGIN: 0px auto; WIDTH: 490px
}
}
#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: 490px; 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;FONT-SIZE: 30px
+
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 24: Line 23:
}
}
#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 30: Line 29:
}
}
#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
}
}
 +
 +
 +
 +
#width_1{width:100px}
 +
 +
 +
  #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:15px;
 +
}
 +
  #course dt {
 +
border-top: 1px solid #f3c3f3;
 +
font-weight: bold;
 +
background-color:#c3f3c3;
 +
}
</STYLE>
</STYLE>
-
</HEAD>
+
</head>
-
<BODY>
+
 
-
<DIV id=con>
+
<body>
 +
<table width="200" border="0">
 +
  <tr>
 +
    <td><DIV id=con>
<UL id=tags>
<UL id=tags>
   <LI><A onMouseOver="selectTag('tagContent0',this)"  
   <LI><A onMouseOver="selectTag('tagContent0',this)"  
-
   href="javascript:void(0)"> Tip  1 </A> </LI>
+
   href="javascript:void(0)"> <em><strong>Tip  1 </strong></em><strong></strong></A> </LI>
   <LI class=selectTag><A onMouseOver="selectTag('tagContent1',this)"  
   <LI class=selectTag><A onMouseOver="selectTag('tagContent1',this)"  
-
   href="javascript:void(0)"> Tip  2 </A> </LI>
+
   href="javascript:void(0)"> <em><strong>Tip  2 </strong></em><strong></strong></A> </LI>
   <LI><A onMouseOver="selectTag('tagContent2',this)"  
   <LI><A onMouseOver="selectTag('tagContent2',this)"  
-
   href="javascript:void(0)"> Tip  3  </A> </LI></UL>
+
   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>
+
    <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>
<SCRIPT type=text/javascript>
function selectTag(showContent,selfObj){
function selectTag(showContent,selfObj){
Line 70: Line 123:
</SCRIPT>
</SCRIPT>
<br />
<br />
-
</BODY>
+
</td>
-
</HTML>
+
<td>
 +
<div id="width_1"></div>
 +
</td>
 +
    <td>
 +
   
 +
   
 +
    <dl id="course">
 +
<dt><strong>Step 1 - 4</strong></dt>
 +
  <dd>&nbsp;</dd>
 +
<dt>Step 5 - 8</dt>
 +
  <dd>&nbsp;</dd>
 +
<dt>Step 9 - 12</dt>
 +
  <dd>&nbsp;</dd>
 +
<dt>Step 13 - 16</dt>
 +
  <dd>&nbsp;</dd>
 +
<dt>Step 17 - 20</dt>
 +
  <dd>&nbsp;</dd>
 +
<dt>Step 21 - 24</dt>
 +
  <dd>&nbsp;</dd>
 +
<dt>Step 25 - 28</dt>
 +
  <dd>&nbsp;</dd>
 +
<dt>Step 28 - 32</dt>
 +
  <dd>&nbsp;</dd>
 +
</dl>
 +
   
 +
   
 +
    </td>
 +
  </tr>
 +
</table>
 +
</body>
 +
</html>

Latest revision as of 15:48, 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.

Step 1 - 4
 
Step 5 - 8
 
Step 9 - 12
 
Step 13 - 16
 
Step 17 - 20
 
Step 21 - 24
 
Step 25 - 28
 
Step 28 - 32
 

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