如何在网页中实现“Tab”选项卡的效果

示例代码如下：
关键在CSS中的两句代码：“ position:relative; top:1px;”

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head >
     < title > Table Style Demo </ title >
< style  type ="text/css" >
        .tab
        {}{
            float:left;
            position:relative;
            top:1px;
            background-color:#eeeeee;
            border:solid 1px black;
            padding:0px 15px;
            margin-left:5px;
        }
        .selectedTab
        {}{
            background-color:white;
            border-bottom:solid 1px white;
        }
        .tabContents
        {}{
            border:solid 1px black;
            background-color:white;
            padding:10px;
            height:200px;
        }
     </ style >
</ head >

< body >
< div  class ="tab selectedTab" > tab1 </ div >
< div  class ="tab" > tab2 </ div >
< div  class ="tab" > tab3 </ div >
< br  style ="clear:both;"   />
< div  class ="tabContents" > Content </ div >
</ body >
</ html >

转载于:https://www.cnblogs.com/easyjacky/archive/2008/02/15/1069701.html