精通 CSS+DIV 网页样式与布局 85

最新推荐文章于 2025-08-07 11:18:45 发布

相濡以沫si

最新推荐文章于 2025-08-07 11:18:45 发布

阅读量202

点赞数

CC 4.0 BY-SA版权

分类专栏： css+div 文章标签： css color

本文链接：https://blog.youkuaiyun.com/myjnt/article/details/53523718

css+div 专栏收录该内容

168 篇文章

订阅专栏

本文介绍了一种流行的Tab菜单样式实现方法，通过CSS对不同状态下的Tab进行样式设置，包括鼠标悬停效果及当前选中项的突出显示等，适用于网站导航栏的设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

}
ul#tabnav a:hover{
background-color:#006eb3;
color:#FFFFFF;
}
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 #FFFFFF; /* 白色下边框，覆盖<ul>中的蓝色下边
框 */
color:#000000;
background-color:#FFFFFF;
}
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:#000000;
background-color:#FFFFFF;
}
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;
}
8-9_home.html
<html>
<head>
<title> 流行的 Tab 菜单 </title>
<link href=”8-9.css” type=”text/css” rel=”stylesheet”>
<style type=”text/css”>
<!–