Team:SUSTC-Shenzhen-A/tutorial

From 2012.igem.org

(Difference between revisions)
Line 157: Line 157:
-
 
+
OL LI {
-
.li{list-style-type:none;}
+
MARGIN: 8px
 +
}
 +
#con {
 +
FONT-SIZE: 12px; MARGIN: 0px auto; WIDTH: 600px
 +
}
 +
#tags {
 +
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 0px 10px; WIDTH: 400px; PADDING-TOP: 0px; HEIGHT: 23px
 +
}
 +
#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
 +
}
 +
#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
 +
}
 +
#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: 25px
 +
}
 +
#tags LI.selectTag A {
 +
BACKGROUND-POSITION: right top; COLOR: #000; LINE-HEIGHT: 25px; HEIGHT: 25px
 +
}
 +
#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
 +
}
 +
.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
 +
}
 +
#tagContent DIV.selectTag {
 +
DISPLAY: block
 +
}
Line 175: Line 206:
<p>
<p>
 +
 +
 +
 +
 +
<DIV id=tagContent>
 +
<DIV class=tagContent id=tagContent0>最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!</DIV>
 +
<DIV class="tagContent selectTag" id=tagContent1>这时是ASP标签的内容。</DIV>
 +
<DIV class=tagContent id=tagContent2>自适应宽度的标签内容。</DIV></DIV>
 +
 +
 +
 +
 +
 +
Line 318: Line 363:
</div>
</div>
-
<div class="clear"> <br>
+
<div class="clear"> </div>
-
<br>
+
<DIV id=con>
-
<br>
+
<UL id=tags>
-
<br>
+
  <LI><A onMouseOver="selectTag('tagContent0',this)"
-
<br>
+
  href="javascript:void(0)">网页代码站</A> </LI>
-
<br>
+
  <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>

Revision as of 07:03, 16 September 2012

The pictures of each step

最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!
这时是ASP标签的内容。
自适应宽度的标签内容。
 
123
123