求解啊，左边插入的圆角图片为什么跑到上面了啊，我看了距离对的啊-慕课网

求解啊，左边插入的圆角图片为什么跑到上面了啊，我看了距离对的啊

来源：-

Yuki_0720

2015-04-12 14:26

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>企业网站实例</title>
	<link rel="stylesheet" type="text/css" href="main1.css">
</head>
<body>
<div class="top">
	<div class="top_content">
		<ul>
			<li><a href="#">加入收藏</a></li>
			<li><a href="#">联系我们</a></li>
			<li><a href="#">设为首页</a></li>
		</ul>	
	</div>	
</div>
<!--页面顶端top结束-->

<div class="wrap">
	<div class="logo">
		<div class="logo_left">
			<img src="images/logo.jpg" />
		</div>
		<div class="logo_right">
			<img src="images/tel.jpg" />24小时服务热线：<span class="tel">123-456-7890</span>
		</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>
				</ul>
			</div>
			<!--nav_mid_left结束-->
			<div class="nav_mid_right">
				<form action="" method="post">
					<input type="text" class="search_text" />
				</form>
			</div>
			<!--nav_mid_right结束-->
		</div>
		<!--导航主体nav_mid结束-->
		<div class="nav_right"></div>		
	</div>
	 <!--nav结束-->
</div>
</body>
</html>

*{
	padding: 0px;
	margin: 0px;
	font-size: 12px;
}
body{
	background-color: #F5F5F5;
}
.top{
	width: 100%;
	height:27px;
	background: url(images/top_bg.jpg) repeat-x;
}
.top_content{
	width: 1000px;
	line-height: 27px;
	margin: 0 auto;	
}
.top_content li{
	float: right;
	width: 70px;
	list-style-image: url(images/arrow.jpg);
}
.top_content a:link,.top_content a:visited{
	color: #8E8E8E;
	text-decoration:none;
}
.top_content a:hover,.top_content a:active{
	color: #C00;
	text-decoration:none;
}
.wrap{
	margin: 0 auto;
	width: 1000px;
}
.logo{
	height: 80px;
	background-color: #FFF; 
}
.logo_left{
	width:375px;
	display:inline;
	float: left;
}
.logo_right{
	display:inline;
	height: 28px;
	width: 300px;
	float: right;
	color: #8E8E8E;
	margin-top: 30px;
}
.logo_right img{
	margin-right:10px;
	vertical-align: middle; 
}
.tel{
	font-size: 22px;
	color: #C00;
	font-family: "微软雅黑";
}
.nav{
	height: 40px;
}
.nav_left{
	width: 10px;
	background: url(nav_left.jpg) no-repeat;
}
.nav_mid{
	width: 980px;
	background: url(images/nav_bg.jpg) repeat-x;
	line-height: 40px;
}
.nav_right{
	width: 10px;
	background: url(images/nav_right.jpg) no-repeat;
}
 .nav_left, .nav_mid, .nav_right{
	height: 40px;
	display: inline;
	float: left;
}
.nav_mid li{
	float: left;
	list-style-type: none;
	width: 100px;
	text-align: center;
	font-family: "微软雅黑";
}
.nav_mid a:link, .nav_mid a:visited{
	font-size: 16px;
	color: #FFF;
	text-decoration: none;
}
.nav_mid a:hover, .nav_mid a:active{
	font-size: 16px;
	color: #FF0;
	text-decoration: none;
}
.nav_mid_left{
	width: 680px;
	float:left;
}
.nav_mid_right{
	width: 300px;
}
.nav_mid_left, .nav_mid_right{
	display: inline;
}
.search_text
{
	width: 190px;
	float: left;
	height: 25px;
	margin-top: 5px;
	background:url(images/search.jpg) no-repeat right center;
}

写回答关注