老师为什么我拖动的时候，中间内容会盖住导航栏呀，怎样才能让他不盖住导航栏呐？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;"微软雅黑";}
.header{width:100%;height:100px;background:black;color:white;overflow:hidden;position:fixed;top:0;}
.header img{height:100px;}
.nav{height:100px;line-height:100px;float:right;}
.nav li{display:inline;padding-right:25px;}
.container{margin:100px 200px 0 210px;}
.pink{background:pink;}
.middle,.left,.right{position:relative;float:left; height:1000px;}
.left{background-color:orange;width:210px;margin-left:-100%;left:-210px;}
.middle{width:100%;padding-top:10%;background-color:pink;}
.right{background-color:lightblue;width:200px;margin-left:-200px;right:-200px;}
p,h3,input{margin:30px;}
.footer{width:100%;height:100px;background:black;color:white;line-height:100px;text-align:center;position:fixed;bottom:0;}
.footer li{display:inline;padding:0 25px;}
input.btn{border:none;color:white;background-color:red;width:100px;}
</style>
</head>
<body>
<div class="header">
<img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/>
<ul class="nav">
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
<li>项目4</li>
<li>项目5</li>
</ul>
</div>
<div class="container">
<div class="middle">
<h3>相关课程</h3>
<p class="one"><span>html</span> <span>CSS</span> <span>javascript</span></p><p class="one"><span>html5</span> <span>CSS3</span> <span>jqury</span></p><p class="one"><span>移动端基础</span> <span>移动端手机开发</span>
</div>
<div class="left">
<h3>课程推荐</h3>
<p class="one"><span class="pink">职业规划</span> <span>html5与css3实现动态网页</span></p>
<p class="one"><span class="pink">职业规划</span> <span>html5与css3实现动态网页</span></p>
<p class="one"><span class="pink">职业规划</span> <span>html5与css3实现动态网页</span></p>
<p class="one"><span class="pink">职业规划</span> <span>html5与css3实现动态网页</span></p>
<p class="one"><span class="pink">职业规划</span> <span>html5与css3实现动态网页</span></p>
</div>
<div class="right">
<h3>登录</h3>
<form>
<input type="text" name="username" placeholder="请输入用户名" size=10/>
<br/>
<input type="password" name="psw" placeholder="请输入密码" size=10/>
<br/>
<input type="submit" value="登录"class="btn"/>
</form>
</div>
</div>
<div class="footer">
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
<li>项目4</li>
<li>项目5</li>
<li>项目6</li>
</ul>
</div>
</body>
</html>
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星