div+css制作的选项卡_html/css_WEB-ITnose

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 另一种 另一种 div+css选项卡代码 /**//* 选项卡关键属性 */ #tab {}{ width:900px; height:30px; position:relative; margin:0px auto;} /**//*设置容器高宽等*/ html > body #tab {}{ width:900px; }/**//*兼容IE6:IE6下宽度不够*/ #tab div {}{ position:absolute; top:26px; left:0; width:900px; height:300px;}/**//*设置被操作容器高宽等*/ #tab div {}{ display:none; }/**//*设置被操作容器默认隐藏:不用ID是因为下面将利用class来控制被操作容器显示,而class优先级低于id选择器*/ #tab .block {}{ display:block; padding-left:5px; padding-right:5px; padding-top:2px;}/**//*选中的被操作容器*/ #tab h3 {}{ float:left; width:75px; height:26px; line-height:26px; margin:0 -1px 0 0; font-size:12px; cursor:pointer; font-weight:normal; text-align:center; color:#00007F; background:#eee url(menu_bg.gif) no-repeat; font-weight:bold;}/**//*默认标题样式*/ #tab .up {}{ background:#fff url(x20061212105231.gif) no-repeat; }/**//*选中的标题样式*/ /**//*修饰列表内容*/ #tab ul {}{ margin:0px; list-style:none; padding:0;} #tab li {}{ float:left; width:50%; background: } #tab li a {}{ display:block; width:84%; height:25px; line-height:25px; margin-left:8%; font-size:12px; text-decoration:none; color:#333;text-indent:10px; } #tab li a:hover {}{ text-decoration:underline; color:#f00;} 铁板牛排 田心鱼儿 2 萧萧小雨 3 禾火木风 4 章之小依 5