关联了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);
}

但是我把lunbo.css和index.html放到一个目录下就可以了，这是为什么呢？

希望各位同学和老师帮帮看看

慕设计3487605 2019-01-09

源自：项目：JS实现轮播特效 6-2 作业题