`
webcode
  • 浏览: 5949147 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

发个简单漂亮实用的选项卡(多色可变)

阅读更多
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTMLStrict//EN"><METAhttp-equiv="Content-Type"content="text/html;charset=utf-8">
<HTMLlang="pt"xml:lang="pt"xmlns="http://www.w3.org/1999/xhtml">
<HEAD><STYLE>
/*Rule124of*/
#colMid{
PADDING-RIGHT:0px;
PADDING-LEFT:0px;
FLOAT:left;
PADDING-BOTTOM:0px;
MARGIN:0px;
PADDING-TOP:0px
}
/*Rule22ofimgs/wide.css*/
#colMid{
PADDING-RIGHT:0px;
PADDING-LEFT:10px;
PADDING-BOTTOM:0px;
WIDTH:468px;
PADDING-TOP:0px
}
/*Rule105of*/
#body_wrapper{
MARGIN:auto
}
/*Rule2ofimgs/wide.css*/
#body_wrapper{
WIDTH:960px
}
/*Rule1of*/
BODY{
MARGIN:0pxauto;
FONT:70%Tahoma,Arial,Helvetica,Verdanasans-serif;
WIDTH:100%
}
/*Rule1ofimgs/cor_verde.css*/
BODY{
BACKGROUND-COLOR:#fafafa
}
/*Rule120of*/
#destaques{
FLOAT:left;
MARGIN:5px0px0px
}
/*Rule18ofimgs/wide.css*/
#destaques{
WIDTH:468px
}
/*Rule104of*/
.tabset_content{
BORDER-RIGHT:1pxsolid;
PADDING-RIGHT:10px;
BORDER-TOP:1pxsolid;
DISPLAY:none;
PADDING-LEFT:10px;
Z-INDEX:1;
FLOAT:left;
PADDING-BOTTOM:10px;
MARGIN:5px0px;
BORDER-LEFT:1pxsolid;
PADDING-TOP:10px;
BORDER-BOTTOM:1pxsolid;
POSITION:relative;
BACKGROUND-COLOR:#fff
}
/*Rule122of*/
#destaques.tabset_content{
PADDING-LEFT:0px;
WIDTH:456px
}
/*Rule1ofimgs/wide.css*/
.tabset_content{
WIDTH:446px
}
/*Rule20ofimgs/wide.css*/
#destaques.tabset_content{
WIDTH:456px
}
/*Rule23ofimgs/cor_verde.css*/
.tabset_content{
BORDER-LEFT-COLOR:#b1cca3;
BORDER-BOTTOM-COLOR:#b1cca3;
BORDER-TOP-COLOR:#b1cca3;
BORDER-RIGHT-COLOR:#b1cca3
}
/*Rule96of*/
.footer{
CLEAR:both;
PADDING-RIGHT:0px;
PADDING-LEFT:0px;
FONT-WEIGHT:normal;
FONT-SIZE:1em;
BACKGROUND:nonetransparentscrollrepeat0%0%;
PADDING-BOTTOM:0px;
MARGIN:0px;
PADDING-TOP:5px;
TEXT-ALIGN:right
}
/*Rule195of*/
#destaques#pforacasa{
PADDING-RIGHT:0px;
PADDING-LEFT:0px;
PADDING-BOTTOM:0px;
MARGIN:0px;
PADDING-TOP:0px
}
/*Rule211of*/
#pforacasa{
WIDTH:100%
}
/*Rule92of*/
.header{
FONT-WEIGHT:bold;
FONT-SIZE:1.2em
}
/*Rule200of*/
#destaques.tabset_content.header{
PADDING-RIGHT:0px;
PADDING-LEFT:0px;
PADDING-BOTTOM:0px;
MARGIN:5px0px;
PADDING-TOP:0px;
BORDER-BOTTOM:#ccc1pxdashed;
HEIGHT:20px;
TEXT-ALIGN:right
}
/*Rule2of*/
A:link{
COLOR:#000066;
TEXT-DECORATION:none
}
/*Rule205of*/
#destaques.tabset_content.headerA{
FLOAT:right
}
/*Rule203of*/
#destaques.tabset_content.headerDIV{
FLOAT:left
}
/*Rule97of*/
.footerSPAN{
FONT-WEIGHT:normal;
COLOR:#ccc
}
/*Rule90of*/
#colMidUL{
LIST-STYLE-TYPE:none
}
/*Rule189of*/
#destaques.right_column{
PADDING-RIGHT:0px;
PADDING-LEFT:0px;
FLOAT:left;
PADDING-BOTTOM:0px;
MARGIN:0px0px0px15px;
WIDTH:63%;
PADDING-TOP:0px
}
/*Rule190of*/
#destaques.right_columnLI{
CLEAR:left;
PADDING-RIGHT:0px;
PADDING-LEFT:0px;
PADDING-BOTTOM:0px;
MARGIN:0px0px2px;
PADDING-TOP:0px
}
/*Rule191of*/
#destaques.right_columnLIA{
FONT-SIZE:1.2em
}
/*Rule209of*/
#destaques.right_columnA{
PADDING-RIGHT:0px;
PADDING-LEFT:8px;
BACKGROUND:url(http://www.52hai.com/2005/uploads/200711/20_090601_imgs.gif)no-repeat-2px-168px;
FLOAT:left;
PADDING-BOTTOM:0px;
PADDING-TOP:0px
}
/*Rule197of*/
#destaquesLI.form{
PADDING-RIGHT:0px;
PADDING-LEFT:0px;
FONT-WEIGHT:bold;
MARGIN-BOTTOM:10px;
PADDING-BOTTOM:0px;
WIDTH:260px;
PADDING-TOP:0px
}
/*Rule30ofimgs/cor_verde.css*/
.form{
BORDER-LEFT-COLOR:#fff;
BORDER-BOTTOM-COLOR:#fff;
BORDER-TOP-COLOR:#fff;
BORDER-RIGHT-COLOR:#fff
}
/*Rule194of*/
#destaques.formFORM{
PADDING-RIGHT:0px;
PADDING-LEFT:0px;
PADDING-BOTTOM:0px;
MARGIN:0px;
PADDING-TOP:0px
}
/*Rule88of*/
.btnSubmit{
BORDER-TOP-WIDTH:0px;
PADDING-RIGHT:0px;
DISPLAY:inline;
PADDING-LEFT:0px;
FONT-WEIGHT:bold;
BORDER-LEFT-WIDTH:0px;
FONT-SIZE:11px;
BACKGROUND:url(http://www.52hai.com/2005/uploads/200711/20_090601_imgs.gif)no-repeat0px-68px;
BORDER-BOTTOM-WIDTH:0px;
PADDING-BOTTOM:0px;
MARGIN:0px;
WIDTH:50px;
CURSOR:pointer;
PADDING-TOP:0px;
HEIGHT:17px;
TEXT-ALIGN:center;
BORDER-RIGHT-WIDTH:0px
}
/*Rule101of*/
.formINPUT{
FONT-WEIGHT:bold;
FONT-SIZE:1em;
WIDTH:50px
}
/*Rule396of*/
.form.btnSubmit{
MARGIN-LEFT:10px
}
/*Rule103of*/
.formSELECT{
FONT-SIZE:0.9em
}
/*Rule198of*/
#destaques.form_select{
PADDING-RIGHT:0px;
PADDING-LEFT:0px;
FLOAT:left;
PADDING-BOTTOM:0px;
MARGIN:0px3px0px0px;
WIDTH:180px;
PADDING-TOP:0px
}
/*Rule185of*/
#destaquesUL.destitems{
PADDING-RIGHT:0px;
PADDING-LEFT:0px;
FLOAT:left;
PADDING-BOTTOM:0px;
MARGIN:0px;
PADDING-TOP:0px;
LIST-STYLE-TYPE:none
}
/*Rule121of*/
#destaquesUL.destitemsLI{
FLOAT:left;
MARGIN:0px;
WIDTH:139px
}
/*Rule19ofimgs/wide.css*/
#destaquesUL.destitemsLI{
PADDING-RIGHT:0px;
PADDING-LEFT:12px;
PADDING-BOTTOM:0px;
PADDING-TOP:0px
}
/*Rule100of*/
ULLIP{
FONT-SIZE:1.1em
}
/*Rule187of*/
#destaques.destitemsP{
PADDING-RIGHT:0px;
PADDING-LEFT:0px;
PADDING-BOTTOM:0px;
MARGIN:0px;
PADDING-TOP:0px
}
/*Rule33of*/
H2{
FONT-WEIGHT:normal;
FONT-SIZE:1em
}
/*Rule186of*/
#destaques.destitemsH2{
PADDING-RIGHT:0px;
PADDING-LEFT:0px;
PADDING-BOTTOM:0px;
MARGIN:0px;
PADDING-TOP:0px
}
/*Rule188of*/
#destaques.destitemsH2{
FONT-WEIGHT:bold;
FONT-SIZE:1.2em;
MARGIN-BOTTOM:5px
}
/*Rule91of*/
#colMidUL.destitemsIMG{
BORDER-RIGHT:rgb(204,204,204)1pxsolid;
PADDING-RIGHT:1px;
BORDER-TOP:rgb(204,204,204)1pxsolid;
PADDING-LEFT:1px;
PADDING-BOTTOM:1px;
BORDER-LEFT:rgb(204,204,204)1pxsolid;
PADDING-TOP:1px;
BORDER-BOTTOM:rgb(204,204,204)1pxsolid
}
/*Rule11ofimgs/cor_verde.css*/
#destaquesUL.destitemsIMG{
BORDER-RIGHT:rgb(204,204,204)1pxsolid;
BORDER-TOP:rgb(204,204,204)1pxsolid;
BORDER-LEFT:rgb(204,204,204)1pxsolid;
BORDER-BOTTOM:rgb(204,204,204)1pxsolid
}
/*Rule192of*/
#destaques.right_columnLI.header{
TEXT-ALIGN:left
}
/*Rule22of*/
.tabset_tabs{
PADDING-RIGHT:0px;
PADDING-LEFT:0px;
FONT-SIZE:1.2em;
Z-INDEX:2;
PADDING-BOTTOM:0px;
MARGIN:0px10px0px0px;
PADDING-TOP:4px;
POSITION:relative;
TOP:1px;
TEXT-ALIGN:left
}
/*Rule23of*/
.tabset_tabsLI{
PADDING-RIGHT:0px;
DISPLAY:inline;
PADDING-LEFT:0px;
PADDING-BOTTOM:0px;
MARGIN:0px2px0px0px;
CURSOR:pointer;
COLOR:#fff;
PADDING-TOP:0px
}
/*Rule24of*/
.tabset_tabsLIA{
PADDING-RIGHT:0px;
PADDING-LEFT:12px;
BACKGROUND:no-repeat0px-41px;
PADDING-BOTTOM:5px;
MARGIN:5px-4px5px0px;
PADDING-TOP:4px
}
/*Rule31ofimgs/cor_verde.css*/
.tabset_tabsLIA{
BACKGROUND-IMAGE:url(http://www.52hai.com/2005/uploads/200711/20_090601_imgs.gif)
}
/*Rule1ofimgs/tabsie.css*/
.tabset_tabsLIA{
PADDING-RIGHT:0px;
PADDING-LEFT:12px;
PADDING-BOTTOM:0px;
PADDING-TOP:0px
}
/*Rule25of*/
.tabset_tabsLISPAN{
PADDING-RIGHT:12px;
DISPLAY:inline;
PADDING-LEFT:0px;
BACKGROUND:no-repeatright-41px;
PADDING-BOTTOM:5px;
MARGIN:0px;
PADDING-TOP:4px
}
/*Rule32ofimgs/cor_verde.css*/
.tabset_tabsLISPAN{
BACKGROUND-IMAGE:url(http://www.52hai.com/2005/uploads/200711/20_090601_imgs.gif)
}
/*Rule2ofimgs/tabsie.css*/
.tabset_tabsLISPAN{
PADDING-RIGHT:10px;
PADDING-LEFT:0px;
PADDING-BOTTOM:5px;
PADDING-TOP:4px
}
/*Rule26of*/
.tabset_tabsLI.active{
FONT-WEIGHT:bold
}
/*Rule27of*/
.tabset_tabsLI.activeA{
BACKGROUND-POSITION:lefttop;
CURSOR:default
}
/*Rule28of*/
.tabset_tabsLI.activeSPAN{
BACKGROUND-POSITION:righttop;
CURSOR:default
}
</STYLE><script>
<!--
functionsetTab(name,cursel,n){
for(i=1;i<=n;i++){
varmenu=document.getElementById(name+i);
varcon=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"active":"";
con.style.display=i==cursel?"block":"none";
}
}
//-->
</script></HEAD>
<BODY><DIVid="body_wrapper"><DIVid="colMid">
<DIVid="destaques">
<ULclass="tabset_tabs">
<LIclass="active"id="idest1">
<Aclass="active"onClick="setTab('idest',1,5)"href="#"><SPAN>Destaques</SPAN></A>
</LI>
<LIid="idest2">
<AonClick="setTab('idest',2,5)"href="#"><SPAN>Jogos</SPAN></A>
</LI>
<LIid="idest3">
<AonClick="setTab('idest',3,5)"href="#"><SPAN>Música</SPAN></A>
</LI>
<LIid="idest4">
<AonClick="setTab('idest',4,5)"href="#"><SPAN>Televis&atilde;o</SPAN></A>
</LI>
<LIid="idest5">
<AonClick="setTab('idest',5,5)"href="#"><SPAN>ForadeCasa</SPAN></A>
</LI>
</UL>
<DIVclass="tabset_content"id="con_idest_1"style="DISPLAY:block">
<ULclass="destitems">
<LI></LI>
<LI>
<AonClick="lk(this.href,'destaques_dia');"href="http://arcadenoe/petsite.php?id=803">
<H2>
Fur&otilde;es
</H2>
</A>
<P>&nbsp;</P>
</LI>
<LI>
<AonClick="lk(this.href,'destaques_dia');"href="http://mobile/">
<H2>
SAPOMobile
</H2>
</A>
<P>&nbsp;</P>
</LI>
</UL>
<DIVclass="footer">
&nbsp;<AonClick="lk(this.href,'destaques_dia_footer');"href="http://videos/osincorrigiveis">OsIncorrigíveis</A><SPAN>|</SPAN><AonClick="lk(this.href,'destaques_dia_footer');"href="http://passatempos/">Passatempos</A><SPAN>|</SPAN><AonClick="lk(this.href,'destaques_dia_footer');"href="http://www.premios/">PrémiosSAPO2007</A>
</DIV>
</DIV>
<DIVclass="tabset_content"id="con_idest_2"style="DISPLAY:none">
<ULclass="destitems">
<LI>

<H2>
JetStorm
</H2>
</A>
<P>
Voanosmaismodernosca&ccedil;as.
</P>
</LI>
</UL>
<ULclass="right_column">
<LIclass="header">
Novidades:
</LI>
<LI>

</LI>
<LI>

</LI>
<LI>

</LI>
<LI>

</LI>
<LI>

</LI>
<LI>
<AonClick="lk(this.href,'destaques_jogos');"href="http://jogos//GameDetails.aspx?articleID=749499&type=fun&">MicroMachines:minicorridas,máximadivers&atilde;o</A>
</LI>
<LI>

</LI>
<LI>

</LI>
</UL>
<DIVclass="footer">

</DIV>
</DIV>
<DIVclass="tabset_content"id="con_idest_3"style="DISPLAY:none">
<ULclass="destitems">
<LI>

<H2>
Cl&atilde;
</H2>
</A>
<P>
NovoregistodabandadeManuelaAzevedo.
</P>
</LI>
</UL>
<ULclass="right_column">
<LIclass="header">
Novidades:
</LI>
<LI>
<AonClick="lk(this.href,'destaques_musica');"href="http://www.musicaonline/track/9912601/Suburban_Knights_Album_Version_-_Hard-FI">Hard-Fi:SuburbanKnights</A>
</LI>
<LI>

</LI>
<LI>

</LI>
<LI>
<AonClick="lk(this.href,'destaques_musica');"href="http://www.musicaonline/track/11769539/Knockin_On_Heaven_s_Door_Album_Version_-_Bob_Dylan">BobDylan:Knockin'OnHeaven'sDoor</A>
</LI>
<LI>

</LI>
<LI>

</LI>
<LI>

</LI>
<LI>
<AonClick="lk(this.href,'destaques_musica');"href="http://cultura/detalhe_evento.aspx?id=42529">JanGarbarekGroupemGuimar&atilde;es</A>
</LI>
</UL>
<DIVclass="footer">

</DIV>
</DIV>
<DIVclass="tabset_content"id="con_idest_4"style="DISPLAY:none">
<ULclass="destitems">
<LI>

<H2>
Floribella
</H2>
</A>
<P>
AhistóriadeFlorcommuitasnovidades.
</P>
</LI>
</UL>
<ULclass="right_column">
<LIclass="form">
Programa&ccedil;&atilde;oTV:
<DIV>

</DIV>
</LI>
<LI>
<AonClick="lk(this.href,'destaques_tv');"href="http://www.tvcabo.pt/Televisao/CanaisLusomundo.aspx">Caos,naTVC1,às21horas</A>
</LI>
<LI>
<AonClick="lk(this.href,'destaques_tv');"href="http://sic/chiquititas">Chiquititas:oladodocedavida</A>
</LI>
<LI>
<AonClick="lk(this.href,'destaques_tv');"href="http://videos/canaistvcine/playview/11">CanaisTVCine:todosostrailers</A>
</LI>
<LI>
<AonClick="lk(this.href,'destaques_tv');"href="http://videos/m108CRAfGEnFfbCECCWZ">ViseuTV:atelevis&atilde;oregionaldeViseu</A>
</LI>
<LI>

</LI>
</UL>
<DIVclass="footer">

</DIV>
</DIV>
<DIVclass="tabset_content"id="con_idest_5"style="DISPLAY:none">
<DIVclass="header"id="hforacasa"style="DISPLAY:none">
<DIVid="dlname">
</DIV>
<AonClick="printConcelhos('foracasa');return(false);"href="http://cultura/">MudarConcelho</A>
</DIV>
<DIVid="fcbig">
</DIV>
<DIVid="pforacasa">
</DIV>
<!--chooser-->
<DIVid="cforacasa">
</DIV>
<!--content-->
<DIVclass="footer">
&nbsp;
</DIV>
</DIV>
</DIV>
</DIV></DIV></BODY></HTML>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics