nav背景错乱了，不知道是怎么回事，求帮忙看下

源自：-

nav背景错乱了，不知道是怎么回事，求帮忙看下

<!DOCTYPE html>
<html>
<head>
	<title>CSS</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="./css/main.css">
    <script type="text/javascript" src="./js/setHomeSetFav.js" charset="gb2312"></script>
</head>
<body>
  <div class="top">
    <div class="top_content">
      <ul>
        <li><a href="#">联系我们</a></li>
        <li><a href="#" onclick="AddFavorite(window.location, document.title)">加入收藏</a></li>
        <li><a href="#" onclick="SetHome(window.location)">设为首页</a></li>
      </ul>
    </div>
  </div>
  <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小时服务热线: <span class='tel'>123-1234-1234</span>
      </div>
    </div><!--logo结束-->
    <div class="nav">
      <div class="nav_left"></div>
      <div class="nav_mid"></div>
      <div class="nav_right"></div>
    </div><!--nav结束-->
  </div><!--wrap结束-->
</body>
</html>

* {
  margin: 0;
  padding: 0;
  font-size: 12px;
}

body {
  background-color: #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;
}

.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: white;
}

.logo_left {
	width: 200px;
	float: left;
}

.logo_right {
	width: 300px;
	height: 28px;
	float: right;
	margin-top: 27px;
	color: #8E8E8E;
}

/*垂直对齐方式*/
.logo_right img{
	vertical-align: middle;
	margin-right: 10px;
}

.tel {
	font-stretch: "微软雅黑";
	font-size: 16px;
	color: red;
}

.nav {
	height: 40px;
}

.nav_left{
	width: 10px;
	height: 40px;
	background: url("../images/nav_left.jpg") no-repeat;
	float: left;
}

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

.nav_right{
	width: 10px;
	height: 40px;
	background: url("../images/nav_right.jpg") no-repeat;
	float: left;
}

提问者：DavidXu1985 2017-09-12 11:46

个回答

补帅帅

2017-09-21 17:16:23

??赞！
我也是同样的问题。

0
DavidXu1985

2017-09-13 00:22:54

查了很久终于知道为什么了：
在使用sublime时，输入html加tab键会自动生成：
```
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>

</body>
</html>
```
如上代码，然后问题就出在第一行的<!DOCTYPE html>上，需要删除html才会恢复正常。。。

0