关联了css，关联路径css/lunbo.css也是对的，但是图片没有显示出来，为什么？

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<link rel="stylesheet" href="css/lunbo.css">
</head>
<body>
<div class="main">
<div class="title">
<ul class="menu">
<a href="javascript:;"><li>首页</li></a>
<a href="javascript:;"><li>点击看看</li></a>
<a href="javascript:;"><li>会自动的</li></a>
<a href="javascript:;"><li>我的网站</li></a>
</ul>
</div>
<div class="pics">
<a href="">
<div class="banner slide1 slide-active"></div>
</a>
<a href="">
<div class="banner slide2"></div>
</a>
<a href="">
<div class="banner slide3"></div>
</a>
<a href="">
<div class="banner slide4"></div>
</a>
</div>
</div>
<!-- <script src="js/script.js"></script> -->
</body>
</html>

*{
    margin: 0;
    padding: 0;
}
 
body{
    font-family: "微软雅黑";
}
 
.main{
    width: 100%;
    height: 520px;
    margin: 0 auto;
    margin-top: 100px;
    overflow: hidden;
    zoom: 1;
}
 
.title{
    width: 100%;
    height: 60px;
}
 
.menu a{
    display: inline-block;
    float: left;
    width: 25%;
    height: 60px;
    line-height: 60px;
    margin: 0 auto;
    text-decoration: none;
    text-align: center;
    color: #666;
    font-size: 20px;
    background: #fff;
}
 
.menu a li{
    list-style: none;
}
 
.pics{
    width: 100%;
    height: 460px;
}
 
.banner{
    float: left;
    width: 100%;
    height: 460px;
    /*display: none;*/
}
 
.slide-active{
    display: block;
}
 
.slide1{
    background-image:url(img/1.jpg);
}
 
.slide2{
    background-image:url(img/3.jpg);
}
 
.slide3{
    background-image:url(img/4.jpg);
}
 
.slide4{
    background-image:url(img/5.jpg);
}