导航栏背景颜色的设置------鼠标点击后颜色不变，点其他的链接标签恢复原有颜色...

最新推荐文章于 2022-04-06 17:51:35 发布

banji8068

最新推荐文章于 2022-04-06 17:51:35 发布

阅读量1.3k

点赞数

原文链接：http://www.cnblogs.com/qianqiangengen-3344/p/5984277.html

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

<div class="rongqi">
<div id="top">
<a class="active" href="#content6">首页</a>
<a href="#content1">导航1</a>
<a href="#content2">导航2</a>
<a href="#content3">导航3</a>
<a href="#content4">导航4</a>
<a href="#content5">导航5</a>
</div>
</div>
<div id="content1">列表1的内容在这里</div>
<div id="content2">列表2的内容在这里</div>
<div id="content3">这里是列表3的所在地方</div>
<div id="content4">这里是列表4的所在地方</div>
<div id="content5">欢迎你来到了列表5的地方，这里就是导航5的内容呢</div>
<div id="content6">这里是首页内容</div>

</body>

<style>

.rongqi{
/*background:lightblue;*/
height:55px;
width:100%;
margin:80px 0px;
}
/*导航条里面各个a标签的总宽度，当前是六个a的宽度，每个a宽度默认是200px*/
#top{

margin:0px auto;
width:1200px;
height:55px;
background: blueviolet;
}
/*hanghang是a标签的class*/
#top a{
font-size:20px;
color:white;
text-align:center;
line-height:50px;
float:left;
width:200px;
height:55px;
margin-left:0px;
list-style-type:none;

text-decoration:none;
}

#top a:hover,
#top a.active{
list-style-type:none;
color:#ffffff;
font-weight:800;
background:#0C8ED9;
}

#content1,#content2,#content3,#content4,#content5,#content6{
position: relative;

overflow: hidden;
top: 36;
width: 400px;

height:100px;
border: 1px solid #999;
padding: 10px;

display: none;
}

#content1:target,
#content2:target,
#content3:target,
#content4:target,
#content5:target,
#content6:target{
display: block;
}

</style>

}

</script>
</html>

转载于:https://www.cnblogs.com/qianqiangengen-3344/p/5984277.html

banji8068

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
导航栏背景颜色的设置------鼠标点击后颜色不变，点其他的链接标签恢复原有颜色...

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--这是导航条*************************************************...
复制链接

扫一扫