请老师帮看看我的图片向下滚动无效，并且nav和banner间有白色缝隙，如何解决
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{padding:0;
margin:0;
}
.page{width:100%;
height:1640px;
}
.head{width:100%;
height:100px;
background-color:black;
position:fixed;
top: 0;
}
.footer{width:100%;
height:100px;
background-color:black;
position:fixed;
bottom:0;
line-height:100px;
text-align:center;
}
.nav{float:right;
line-height:100px;
margin-right:5%;
}
li{display:inline;
padding-left:22px;
font:bold 16px 微软雅黑;
}
a{text-decoration:none;
color:#fff;
}
.main{width:100%;
height:auto;
}
.p1{width:1600px;
height:480px;
background:url(http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg) center top no-repeat;
}
.p2{width:1600px;
height:480px;
background:url(http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg) center top no-repeat;
}
.p3{width:1600px;
height:480px;
background:url(http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg) center top no-repeat;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="page">
<div class="head">
<a href="#"><img class="logo" src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/></a>
<div class="nav">
<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>
</ul>
</div>
<div class="main">
<div class="p1"></div>
<div class="p2"></div>
<div class="p3"></div>
</div>
<div class="footer">
<ul>
<li><a href="#">底部导航1</a></li>
<li><a href="#">底部导航2</a></li>
<li><a href="#">底部导航3</a></li>
<li><a href="#">底部导航4</a></li>
<li><a href="#">底部导航5</a></li>
<li><a href="#">底部导航6</a></li>
</ul>
</div>
</div>
</body>
</html>17
收起
正在回答
2回答
图片不能滚动是因为在.head处设置了position: fixed;,而.head是包含图片部分的,所以建议将顶部导航处使用单独的div包裹,并设置固定定位
div{font-size:0;}把父元素的文字大小设置为0,可以解决图片缝隙问题.
相似问题
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星