老师我这个图一为什么显示不出来a
<!DOCTYPE html>
<html>
<head>
<title>phone</title>
<link rel="stylesheet" type="text/css" href="css/phone.css">
<script type="text/javascript" src="js/phone.js"></script>
</head>
<body>
<div class="main">
<!--图片轮转-->
<div class="allcards">
<a href="#">
<div class="card card1 active"></div>
</a>
<a href="#">
<div class="card card2"></div>
</a>
<a href="#">
<div class="card card3"></div>
</a>
</div>
</div>
</body>
</html>
*{
margin:0px;
padding:0px;
}
body{
font-family:"微软雅黑";
color:#14191e;
}
.main{
width:1200px;
height:460px;
margin:30px auto;
position:relative;
overflow:hidden;
}
.main .allcards{
width:1200px;
height:460px;
overflow:hidden;
position:relative;
}
.main .allcards .card{
width:1200px;
height:460px;
background-repeat:no-repeat;
float:left;
display:none;
}
.main .allcards .card1{
background-image:url("../img/bg1.jpg");
}
.main .allcards .card2{
background-image:url("../img/bg2.jpg");
}
.main .allcards .card3{
background-image:url("../img/bg3.jpg");
}
.active{
display:block;
}
正在回答
同学你好，这里非常抱歉，老师没有注意到同学最后的 .active{display:block;}，这里真正图一没有展示出来的原因是：
在设置display:none;是获取class元素使用的是.main .allcards .card 而设置display:block; 获取active时，只写了一个active，导致获取这个元素时的优先级不同，所以图片没有展示。
这里我们统一获取class的写法：比如：
或者
如上所示的两种形式，都可以让图片一展示出来。
如果我的回答解决了你的疑惑，请采纳，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 676 份
- 解答问题 9666 个
本阶段将从前端网页搭建入手，到Java Web基础，前后端结合助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星