问题描述：帮我看看这段代码怎么就实现不了Tab效果呢！
</head>
<style type="text/css">
body{ margin:10px;}
#content{ border-left:1px solid #11a3ff; border-right:1px solid #11a3ff; border-bottom:1px solid #11a3ff; padding:15px; font-size:12px;}
ul#tabnav{ list-style-type:none; margin:0px; padding-left:0px; padding-bottom:23px; border-bottom:1px solid #11a3ff; font:bold 12px Verdana, Arial, Helvetica, sans-serif;}
ul#tabnav li{ float:left; height:22px; background:#a3dbff; margin:0 3px 0 0; border:1px solid #11a3ff;}
ul#tabnav a:link,ul#tabnav a:visited{ display:block; color:#006eb3;text-decoration:none;padding:5px 10px 3px 10px;}
ul#tabnav ahover{ background:#006eb3; color:#fff;}
body#home li.home,body#news li.news,body#sports li.spots,body#music li.music,body#nextstation li.nextstation,body#blog li.blog{ border-bottom:1px solid #fff; color:#000; background:#fff;}
body#home li.home a:link,body#home li.home a:visited,
body#news li.news a:link,body#news li.news a:visited,
body#sports li.spots a:link,body#sports li.spots a:visited,
body#music li.music a:link,body#music li.music a:visited,
body#nextstation li.nextstation a:link,body#nextstation li.nextstation a:visited,
body#blog li.blog a:link,body#blog li.blog a:link{ color:#000; background:#fff;}
body#home li.home a:hover,body#news li.news a:hover,body#sports li.spots a:hover,body#music li.music a:hover,body#nextstation li.nextstation a:hover,body#blog li.blog a:hover{ color:#006eb3; text-decoration:underline;}
</style>
<body id="home">
<ul id="tabnav">
<li class="home"><a href="#">首页</a></li>
<li class="news"><a href="#">新闻</a></li>
<li class="sports"><a href="#">党校</a></li>
<li class="music"><a href="#">音乐</a></li>
<li class="nextstation"><a href="#">咨询</a></li>
<li class="blog"><a href="#">博客</a></li>
</ul>
<div id="content">页面内容</div>
</body>
回答1: 应该是这样：
body{
margin:10px;
}
#content{ /* 具体内容 */
border-left:1px solid #11a3ff; /* 左边框 */
border-right:1px solid #11a3ff; /* 右边框 */
border-bottom:1px solid #11a3ff; /* 下边框 */
padding:15px;
font-size:12px;
}
ul#tabnav{
list-style-type:none;
margin:0px;
padding-left:0px; /* 左侧无空隙 */
padding-bottom:23px;
border-bottom:1px solid #11a3ff; /* 菜单的下边框 */
font:bold 12px verdana, arial;
}
ul#tabnav li{
float:left;
height:22px;
background-color:#a3dbff;
margin:0px 3px 0px 0px;
border:1px solid #11a3ff;
}
ul#tabnav a:link, ul#tabnav a:visited{
display:block; /* 块元素 */
color:#006eb3;
text-decoration:none;
padding:5px 10px 3px 10px;
}
ul#tabnav a:hover{
background-color:#006eb3;
color:#FFF;
}
body#home li.home, body#news li.news, /* 当前页面的菜单项 */
body#sports li.sports, body#music li.music,
body#nextstation li.nextstation,
body#blog li.blog{
border-bottom:1px solid #FFF; /* 白色下边框，覆盖<ul>中的蓝色下边框 */
color:#000;
background-color:#FFF;
}
body#home li.home a:link, body#home li.home a:visited, /* 当前页面的菜单项的超链接 */
body#news li.news a:link, body#news li.news a:visited,
body#sports li.sports a:link, body#sports li.sports a:visited,
body#music li.music a:link, body#music li.music a:visited,
body#nextstation li.nextstation a:link, body#nextstation li.nextstation a:visited,
body#blog li.blog a:link, body#blog li.blog a:visited{
color:#000;
background-color:#FFF;
}
body#home li.home a:hover, body#news li.news a:hover,
body#sports li.sports a:hover, body#music li.music a:hover,
body#nextstation li.nextstation a:hover,
body#blog li.blog a:hover{
color:#006eb3;
text-decoration:underline;
}
回答2: 你先应该把这段代码放到Table或div中(<ul id="tabnav">
<li class="home"><a href="#">首页</a></li>
<li class="news"><a href="#">新闻</a></li>
<li class="sports"><a href="#">党校</a></li>
<li class="music"><a href="#">音乐</a></li>
<li class="nextstation"><a href="#">咨询</a></li>
<li class="blog"><a href="#">博客</a></li>
</ul>
)
我建议你看看这个例子http://demo.rexsong.com/200709/tabs/
然后点右键查看源文件，看是不是你要的结果。
[帮我看看这段代码怎么就实现不了Tab效果呢！]
引用地址:https://www.cha65.net/201610/2058.html
tags: