哪位高手替我看一下啊，為什么我的底部滑動是這個效果！
底部的黑色沒有完全填滿灰色，太丑了，可是我就是按步驟來弄的啊！
這是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;
}哪位好心人給個回答啊，效果真的很奇怪。
2015-03-13
額。。我在前面加上
就可以了是為什么？？？