老师你好，跟着视频里面做，图标本身有颜色，而且a标签点击之后会变色，但是视频里面并没有变色
来源：2-2 footer响应式效果
李知恩
2020-03-19 14:15:46
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>footer响应式效果</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="fontawesome-free-5.11.2-web/css/all.min.css">
</head>
<body>
<div id="app">
<div class="box"></div>
<div class="footer">
<div class="footericon icon_active">
<a href="#" class="icon_a">
<i class="fas fa-camera "></i>
</a>
我的
</div>
<div class="footericon">
<a href="#" class="icon_a">
<i class="fas fa-camera"></i>
</a>
相机
</div>
<div class="footericon">
<a href="#" class="icon_a">
<i class="fas fa-calendar-alt"></i>
</a>
日历
</div>
<div class="footericon">
<a href="#" class="icon_a">
<i class="fas fa-address-card"></i>
</a>
我的
</div>
</div>
</div>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
.footer{
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
border-top: 1px red solid;
display: flex;
font-size: 12px;
text-align: center;
}
.footericon{
flex: 1;
}
.icon_a{
display: block;
margin: 8px 0;
text-decoration: none;
}
.icon_active{
color: red;
}
1回答
-
同学你好，如下，视频中这个图片也是红色的哦。
因为这个是字体图标，所以color是对这个图标生效的。所以.icon_active这个设置的颜色是对图标生效的，所以也会随着变红。
因为没有同学的全部代码，且类名有点区别，所以参考源码修改了下，图标都是有变颜色的。但是由于没有js，所以无法改变，所以给同学解释了下图标会变颜色的原因。若同学描述的不是这个意思的话，可以详细的描述下，再次提问哦。
祝学习愉快！
0
相似问题