"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
另一种
另一种
<% @ Page Language="C#" AutoEventWireup="true" CodeFile="Tab2.aspx.cs" Inherits="Tab2" %>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title > div+css选项卡代码 title >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< meta name ="Author" content ="PR" />
< script type ="text/javascript" > script >
< style type ="text/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;}
style >
head >
< body >
< div id ="tab" >
< h3 class ="up" onmouseover ="go_to(1);" > 铁板牛排 h3 >
< div class ="block" >
< script language ='JavaScript1.2' type ='text/JavaScript' src ='http://show.jianjie8.com/JS/ShowClass_Menu.js' > script >
div >
< h3 onmouseover ="go_to(2);" > 田心鱼儿 h3 >
< div >
2
div >
< h3 onmouseover ="go_to(3);" > 萧萧小雨 h3 >
< div >
3
div >
< h3 onmouseover ="go_to(4);" > 禾火木风 h3 >
< div >
4
div >
< h3 onmouseover ="go_to(5);" > 章之小依 h3 >
< div >
5
div >
< script type ="text/javascript" >
script >
div >
body >
html >
Copyright 2014-2023 //m.sbmmt.com/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1
| 本站CDN由 数掘科技 提供