.nav_mid图片不显示以及图片乱序和列表乱序问题
按照老师写的
结果是这样：
然后在.logo加了overflow：hidden;
结果就这样了：
请问大神门怎么才能把.nav_mid的图片显示出来，还有就是图片乱序和列表乱序问题
个回答
-
- 慕粉3858188
- 2016-08-25 18:47:08
这个是我写的导航栏，已测试没有问题，你对照一下
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>导航菜单</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body {font-family: 'Microsoft Yahei';}
.nav {
width: 1000px;
height: 40px;
margin: 10px auto;
}
.nav_left {
width: 10px;
height: 40px;
background: url(file:///E:/html/images/nav_left.jpg) no-repeat;
float: left;
}
.nav_mid {
width: 980px;
height: 40px;
background: url(file:///E:/html/images/nav_bg.jpg) repeat-x;
float: left;
}
.nav_right {
width: 10px;
height: 40px;
background: url(file:///E:/html/images/nav_right.jpg) no-repeat;
float: left;
}
/* 下面是左侧菜单和右侧搜索框样式*/
.nav_mid_left,.nav_mid_right {
float: left;
}
.nav_mid_left {
width: 680px;
}
.nav_mid_right {
width: 300px;
}
.nav_mid_left li {
list-style-type: none;
float: left;
line-height: 40px;
text-align: center;
width: 100px;
}
.nav_mid_left a {
text-decoration: none;
font-size: 16px;
}
.nav_mid_left a:link,.nav_mid_left a:visited {color: #fff;}
.nav_mid_left a:hover,.nav_mid_left a:active {color: #ff0;}
.search_text {
width: 190px;
height: 25px;
margin-top: 8px;
background: url(file:///E:/html/images/search.jpg) no-repeat right center #fff;
padding-right: 27px;
border: 1px solid #fff;
}
</style>
</head>
<body>
<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="#">关于慕课</a></li>
<li><a href="#">新闻动态</a></li>
<li><a href="#">课程中心</a></li>
<li><a href="#">在线课程</a></li>
<li><a href="#">人才招聘</a></li>
</ul>
</div>
<div class="nav_mid_right">
<form action="" method="post">
<input type="text" name="" class="search_text" />
</form>
</div>
</div>
<div class="nav_right"></div>
</div>
</body>
</html>
-
- 诸葛平云
- 2016-08-25 16:36:35
注意这个后面你的双引号，少了一个 -
- 慕标5888941
- 2016-08-25 16:25:59
好像没有添加无序列表左浮动