为什么我轮播图图片显示不出来？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>胖虎就是智虎</title>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>
<header class="header"><!--顶部-->
<div class="header__logo">LOGO</div>
<div class="header__item">
<input type="text" placeholder="胖虎就是智虎"/>
<div class="header__item__left"></div>
<div class="header__item__right">EN / <span> CN</span></div>
</div>
</header>
<nav class="nav"><!--导航-->
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">新闻资讯</a></li>
<li><a href="#">产品展示</a></li>
<li><a href="#">营销网络</a></li>
<li><a href="#">招贤纳士</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
<div class="banner" id="banner">
<a href="#">
<div class="banner-slide slide1 slide-active"></div>
</a>
<a href="#">
<div class="banner-slide slide2"></div>
</a>
<a href="#">
<div class="banner-slide slide3"></div>
</a>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
font-family: "微软雅黑";
text-decoration: none;
list-style: none;
}
.header{
height: 100px;
background: #FFFFFF;
text-align: center;
position: relative;
}
.header__logo{
width: 136px;
height: 36px;
color: #0082cd;
font-family: "微软雅黑";
font-weight: bolder;
font-size: 36px;
line-height: 100px;
padding-left:200px;
}
.header__item{
width: 308px;
height: 30px;
}
.header__item input{
width:200px;
height:30px;
position: absolute;
right: 300px;
top: 34px;
text-indent: 10px;
}
.header__item__left{
cursor: pointer;
width: 22px;
height: 22px;
background: url(../img/ss.png) no-repeat;
position: absolute;
right:270px;
top: 40px;
}
.header__item__right{
cursor: pointer;
position: absolute;
background-size:22px 22px ;
right: 190px;
line-height: 30px;
}
.header__item__right span{
color: #7db1de;
font-weight: bold;
}
.nav{
height: 50px;
background: #0082CD;
background-size:cover ;
position: relative;
padding-left: 170px;
}
.nav li{
list-style-type: none;
float: left;
line-height: 50px;
width: 150px;
text-align: center;
}
.nav li a{
color: #ffffff;
display: block;
font-size: 16px;
font-family: "微软雅黑";
}
.nav li a:hover{
background: #FFFFFF;
color: #0082CD;
transition: all .8s;
}
.banner{
width: 1150px;
height:430px;
overflow:hidden;
position:relative;
}
.banner-slide{
width: 1150px;
height:430px;
background-repeat:no-repeat;
float:left;
display:none;
}
.slide-active{
display:block;
}
.slide1{
background-image:url(../img/图层 15.jpg)no-repeat;
}
.slide2{
background-image:url(../img/图层 28.jpg)no-repeat;
}
.slide3{
background-image:url(../img/图层 298.jpg)no-repeat;
}
正在回答
同学你好，因为老师没有你完整的代码，所以不能确定什么原因导致的，老师在私信帮助解决。
祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星