*{margin:0;padding:0;} body{font-size:14px;font-family:"Microsoft YaHei";} ul,li{list-style:none;} #tab{position:relative;} #tab .tabList ul li{ float:left; background:#fefefe; background:-moz-linear-gradient(top, #fefefe, #ededed); background:-o-linear-gradient(left top,left bottom, from(#fefefe), to(#ededed)); background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed)); border:1px solid #ccc; padding:5px 0; width:100px; text-align:center; margin-left:-1px; position:relative; cursor:pointer; } #tab .tabCon{ position:absolute; left:-1px; top:32px; border:1px solid #ccc; border-top:none; width:403px; height:100px; } #tab .tabCon div{ padding:10px; position:absolute; opacity:0; filter:alpha(opacity=0); } #tab .tabList li.cur{ border-bottom:none; background:#fff; } #tab .tabCon div.cur{ opacity:1; filter:alpha(opacity=100); }
主要是运用在网页中常用的标题、内容的TAB选项卡,比较简洁,容易易懂!