哪位高手替我看一下啊，为什么我的底部滑动是这个效果！
底部的黑色没有完全填满灰色，太丑了，可是我就是按步骤来弄的啊！
这是index.html文件
<!DOCTYPE HTML>
<html>
<head>
<title>企业实战</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript">
function setHome(){
confirm("是否将该网站设为首页？");
}
function addFavorite(){
alert("收藏该网页成功！");
}
function contactUs(){
prompt("请输入您的联系方式，我们将尽快与您取得联系！",
"在这里输入您的联系方式···");
}
</script>
<script type="text/javascript" src="js/myfocus-2.0.1.min.js" charset="utf-8"></script>
<script type="text/javascript" src="js/mf-pattern/mF_fancy.js"></script>
<link rel="stylesheet" type="text/css" href="js/mf-pattern/mF_fancy.css" />
<script type="text/javascript">
myFocus.set({id:'focusID'})
</script>
</head>
<body>
<div class="top">
<div class="topContent">
<ul>
<li><a href="#" onclick="contactUs()">联系我们</a></li>
<li><a href="#" onclick="addFavorite()">加入收藏</a></li>
<li><a href="#" onclick="setHome()">设为首页</a></li>
</ul>
</div>
</div>
<!-- 页面顶端top结束 -->
<div class="main">
<div class="logo">
<div class="logoLeft">
<img src="images/logo.jpg" alt="慕课网" title="慕课网" />
</div>
<div class="logoRight">
<img src="images/tel.jpg" alt="服务热线" title="服务热线" />24小时服务热线：<span class="tel">123-456-7890</span>
</div>
</div>
<!-- 慕课网logo结束 -->
<div class="navigate">
<div class="navLeft"></div>
<div class="navMiddle">
<div class="midLeft">
<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>
</ul>
</div>
<!-- midLeft结束 -->
<div class="midRight">
<form action="" method="post" name="searchText">
<input type="text" class="searchText" />
</form>
</div>
<!-- midRight结束 -->
</div>
<div class="navRight"></div>
</div>
<!-- navigate导航结束 -->
<div class="focus" id="focusID">
<div class="loading"><img src="images/loading.gif" alt="图片加载中···" title="图片加载中···"></div>
<div class="pic">
<ul>
<li><img src="images/ad2.jpg" alt="互联网编程" title="互联网编程" /></li>
<li><img src="images/ad3.jpg" alt="互联网编程" title="互联网编程" /></li>
<li><img src="images/ad4.jpg" alt="互联网编程" title="互联网编程" /></li>
</ul>
</div>
</div>
<!-- focus结束 -->
</div>
</body>
</html>这是css文件
@charset "utf-8";
*{
margin:0;
padding:0;
font-size:12px;
}
body{
background-color:#F5F5F5;
}
.top{
width:100%;
height:27px;
background:url(../images/top_bg.jpg) repeat-x;
}
.topContent{
width:1000px;
margin:0 auto;
line-height:27px;
}
.topContent li{
width:70px;
float:right;
}
.topContent a:link, .topContent a:visited{
color:#8E8E8E;
text-decoration:none;
}
.topContent a:hover, .topContent a:active{
color:#C00;
text-decoration:none;
}
.main{
width:1000px;
margin:0 auto;
}
.logo{
height:80px;
background-color:#FFF;
}
.logoLeft{
width:600px;
height:80px;
float:left;
}
.logoRight{
width:300px;
height:28px;
margin-top:28px;
color:#8E8E8E;
float:right;
}
.logoRight img{
vertical-align:middle;
margin-right:10px;
}
.tel{
font-family:"微软雅黑";
font-size:22px;
color:#C00;
}
.navigate{
height:40px;
}
.navLeft{
width:10px;
background:url(../images/nav_left.jpg) no-repeat;
}
.navMiddle{
width:980px;
background:url(../images/nav_bg.jpg) repeat-x;
line-height:40px;
}
.navRight{
width:10px;
background:url(../images/nav_right.jpg) no-repeat;
}
.navLeft, .navMiddle, .navRight{
float:left;
height:40px;
display:inline;
}
.midLeft{
width:680px;
float:left;
}
.midRight{
width:300px;
float:left;
}
.midLeft li{
width:100px;
float:left;
height:40px;
list-style-type:none;
font-family:"微软雅黑";
text-align:center;
}
.midLeft a{
display:block;
width:100px;
height:40px;
}
.midLeft a:link, .midLeft a:visited{
font-size:16px;
color:#FFF;
text-decoration:none;
}
.midLeft a:hover, .midLeft a:active{
font-size:16px;
color:#C00;
}
.searchText{
width:190px;
height:25px;
margin-top:7px;
border:1px solid #FFF;
background:url(../images/search.jpg) no-repeat right center;
background-color:#FFF;
padding-right:25px;
}
.focus{
height:320px;
margin:5px;
overflow:hidden;
}哪位好心人给个回答啊，效果真的很奇怪。
