导航条对着窗口使用fixed定位，并使用margin-top怎么用呢。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>????</title>
<style type="text/css">
/*此处写代码*/
*{
margin:0;
padding:0;
}
.nav{
width:100%;
height:80px;
/*background-color:black;*/
position:relative;
}
.nav_fixed{
width:100%;
height:80px;
background-color:black;
position:fixed;
line-height:80px;
}
.nav_fixed img{
height:80px;
}
/**老师这里(去掉父级div)，对着窗口使用fixed定位，并使用margin-top怎么用呢。我用完margin-top=-80px;然后nav消失了**/
.nav_list{
float:right;
}
a{
margin-right:20px;
text-decoration:none;
color:white;
}
.container{
text-align:center;
height:2000px;
}
/**老师这里去掉高度能不能撑开？**/
.banner1{
height:480px;
width:100%;
background:url(http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg) no-repeat;
}
.banner2{
height:480px;
width:100%;
background:url(http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg) no-repeat;
}
.banner3{
height:480px;
width:100%;
background:url(http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg) no-repeat;
}
.footer{
width:100%;
height:60px;
line-height:60px;
background-color:black;
text-align:center;
position:fixed;
bottom:0;
}
.footer a{
font-size:0.8em;
}
</style>
</head>
<body>
<div class="nav">
<div class="nav_fixed">
<a href="#">
<img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/>
</a>
<p class="nav_list">
<a href="#">课程</a>
<a href="#">职业路径</a>
<a href="#">实战</a>
<a href="#">猿问</a>
<a href="#">手记</a>
</p>
</div>
</div>
<div class="container">
<p class="banner1"></p>
<p class="banner2"></p>
<p class="banner3"></p>
</div>
<div class="footer">
<a href="#">网站首页</a>
<a href="#">企业合作</a>
<a href="#">人才招聘</a>
<a href="#">联系我们</a>
<a href="#">常见问题</a>
<a href="#">友情链接</a>
</div>
</body>
</html>
正在回答
同学你好，代码中问题如下：
1、a标签没有撑起图片
这是因为图片为inline-block元素，a为inline元素，撑不起来。但是图片有文字特性，默认存在间隙。所以a撑起来的是间隙。可以给图片设置为块元素，但是会导致右侧导航项换行显示。因为块元素是独占一行的，所以还需要给图片设置浮动。参考
2、顶部和底部设置固定定位会脱离文档流，导致中间的元素会被遮盖住一部分。可以给中间内容设置上下间距，顶部和底部不需要设置，参考
3、中间图片在水平方向上没有铺满，底部存在间隙
需要考虑分辨率问题，可以设置背景图片的大小（这是css3属性，这里可以先了解一下，后面会有讲解）参考：
可以去掉高度，让内容撑起来
4、建议：中间区域图片可以使用img直接显示，宽度设置为100%可以水平铺满。
祝学习愉快！
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星