代码实现在网页之后浮动问题解决不了-慕课网

代码实现在网页之后浮动问题解决不了

来源：3-4 企业网站制作之导航部分制作（一）

慕前端7539174

2017-09-12 16:00

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 
charset=utf-8">
<title>企业网站</title>
<link href="企业网站.css" rel="stylesheet" type="text/css"/>
<script src="js/setHomeSetFav.js" type="text/javascript">
</script>
</head>
<body>
<div class="top">
	<div class="top_content">
		<ul>
		<li><a href="#">联系我们</a></li>
		<li><a href="#" onClik="AddFavorite(window.
		location,
		document.title)">加入收藏</a></li>
		<li><a href="#" onClik="SetHome(window.location)">
		设为首页</a></li>
	</div>
</div><!-- top结束 -->
<div class="wrap">
	<div class="logo">
		<div class="logo_left"><img src="images/logo.jpg"
		alt="慕课网"/></div>
		<div class="logo_right"><img src="images/tel.jpg"
		alt="服务热线"/>24小时热线服务:<a class="tel">
		123-456-7890</a></div>
	</div><!-- </div>logo结束 -->
	<div class="nav">
		<div class="nav_left"></div>
		<div class="nav_mid">
			<div class="nav_mid_left">
			<ul>
				
				<li><a href="#">首页</a></li>
				<li><a href="list.html">关于慕课网</a></li>
				<li><a href="list.html">新闻动态</a></li>
				<li><a href="list.html">课程中心</a></li>
				<li><a href="list.html">在线课程</a></li>
				<li><a href="list.html">人才招聘</a></li>
			</div>
			<div class="nav_mid_right"></div>
			</div>
		<div class="nav_right">
			<form action="" method="post">
			<input type="text"/>
			</form>
		</div>
	
	</div> <!-- nav结束 -->
</div><!-- </div>  wrap结束 -->
</body>
</html>


*{
margin:0;
padding:0;
font-size:12px;
}
body{
background:#F5F5F5;
}
.top{
	width:100%;
	height:27px;
	background:url(images/top_bg.jpg) repeat-x;
}
.top_content{
	width:1000px;
	margin:0 auto;/*盒子居中*/
}
.top_content li{
	list-style-image:url(images/li_bg.gif) ;
	float:right;
	width:70px;
	line-height:27px;/*在27p高垂直方向的页面居中*/
}
.top_content a:link,.top_content a:visited/*超链接的初始
状态*/
{
	color:#8e8e8e;
	text-decoration:none;/*设置为没有下划线*/
}
.top_content a:hover,.top_content a:active/*鼠标放在
字体上之后的设置*/
{
color:#900;
text-decoration:none;
}
.wrap{
	width:1000px;
	margin:0 auto;
}
.logo{
	height:80px;
	background-color:#fff;
	
}
.logo_left{
	width:200px;
	float:left;
}
.logo_right{
	width:300px;
	float:right;
	height:28px;
	margin-top:30px;
	color:#8e8e8e;
}
.logo_right img/*控制图片的位置，让图片居中*/
{
	vertical-align:middle;
	margin-right:10px;
}
.tel
{
	font-family:;
	color:red;
	font-size:16px;
}
.nav{
	height:40px;
}
.nav_left{
	width:10px;
	background:url(images/nav_left.jpg);
	float:left;

}
.nav_mid{
	width:980px;
	background:url(images/nav_bg.jpg) repeat-x;
	float:left;
}
.nav_right{
	width:10px;
	background:url(images/nav_right.jpg);
	float:left;
	}

写回答关注