<!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; }
是不是因为你没有给左侧圆角图片添加float:left