哪位高手替我看一下啊，为什么我的底部滑动是这个效果！-慕课网

哪位高手替我看一下啊，为什么我的底部滑动是这个效果！

来源：3-8 企业网站制作之焦点图制作

Lesty

2015-03-12 22:35

底部的黑色没有完全填满灰色，太丑了，可是我就是按步骤来弄的啊！

这是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;
}

哪位好心人给个回答啊，效果真的很奇怪。

写回答关注

1回答

Lesty: 2015-03-13 10:07:19

额。。我在前面加上

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

就可以了是为什么？？？

0 0

企业网站综合布局实战

本课程重点介绍HTML/CSS实现常见企业网站布局的方法

157042 学习 · 1984 问题

相似问题

回答 13

回答 1

回答 3

为什么我的浮动不正常?请各位前辈帮我看看。

回答 4

有哪位知道这个是什么原因，请告诉我一声谢谢

回答 1

打开慕课网App查看更多内容