HTML新手求解。关于CSS对于li标签的active状态的背景颜色

c罗战伊布 2015-11-28 02:43:58
譬如对于

<div class="test">
<ul id="ul">
<li class="active"><a href="#">AAA</a></li>
<li><a href="#">BBB</a></li>
<li><a href="#">CCC</a></li>
<li><a href="#">DDD</a></li>
<li><a href="#">EEE</a></li>
<li><a href="#">FFF</a></li>
</ul>
</div>

我在自己创建的样式表
.test li {
color:#000000;
float: none;
width: 200px;
background: #f9f2f4;
margin-bottom: 3px;
line-height: 80px;
}
问题:怎么样设定li标签在<li class="active">这种情况下背景颜色变成另外的。

譬如用bootstrap的样式表的时候,在给定的
<nav class="navbar navbar-inverse navbar-fixed-top" role="presentation">
之类的里面的li标签显示<li class="active">就会直接运行HTML以后在一个标签处显示出背景颜色的变化
怎么修改样式表能让我在自己静态设计中,自己声明了<li class="active">后能得到不同的背景颜色
不好意思了大神,我感觉代码不多,所以直接贴了。。
...全文
7053 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
粗学小师傅 2017-09-17
  • 打赏
  • 举报
回复
打开你的网页,按f12,查找属性,然后找到你要修改的颜色的类,全部复制,然后在style里面修改
香蕉猪 2015-12-01
  • 打赏
  • 举报
回复
background:#fff;才是白色背景。。。
hookee 2015-11-28
  • 打赏
  • 举报
回复
.test #ul li.active{ background:#.... }

.test #ul li a{ disaplay:inline-block; background:#....}
.test #ul li a:active{ background:#.... }
c罗战伊布 2015-11-28
  • 打赏
  • 举报
回复
还是说想要在网页一开始就显示不同的active需要js? 具体要怎么写?求大神告知。 bootstrap的bootstrap.min.css检索script太多了。不太好找啊
c罗战伊布 2015-11-28
  • 打赏
  • 举报
回复
引用 1 楼 hookee 的回复:
.test #ul li.active{ background:#.... }

.test #ul li a{ disaplay:inline-block; background:#....}
.test #ul li a:active{ background:#.... }
大神。我套用你的代码。但是好像没有用啊。首先我link css了。然后在body里是这样的 <div class="test"> <ul> <li><a href="#">AAA</a></li> <li class="active"><a href="#">BBB</a></li> <li><a href="#">CCC</a></li> <li><a href="#">DDD</a></li> <li><a href="#">EEE</a></li> <li><a href="#">FFF</a></li> </ul> </div> 在我引用的样式表里是这样的

.test li {
    color: #f5f5f5;
    float: none;
    width: 200px;
    background: #101010;
    margin-bottom: 3px;
    line-height: 60px;
    list-style-type: none;
}

.test a {
    color: #f5f5f5;
    padding-left: 60px;
}


.test li:hover {
    display: inline-block;
    color: #000000;
    float: none;
    width: 200px;
    background: #06b2e3;
    margin-bottom: 3px;
    line-height: 60px;
}

.test #ul li.active {
    display: inline-block;
    color: #000000;
    float: none;
    width: 200px;
    background: #f5f5f5;
    margin-bottom: 3px;
    line-height: 60px;
}

.test #ul li a {
    display: inline-block;
    color:#000000;
    float: none;
    width: 200px;
    background:  #f5f5f5;
    margin-bottom: 3px;
    line-height: 60px;
}

.test #ul li a:active {
    background: #f5f5f5;
    float : none;
    width: 200px;
    margin-bottom: 3px;
    line-height: 60px;
}


目前而言进去网站就是黑背景白字的li标签,鼠标移到上面背景会变成蓝色。但是我设置为class="active"的BBB背景不是我设定的白色的。

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧