2-9编程练习问题
来源：2-8 经典的两列布局
莨菽菽
2017-05-31 16:48:34
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
}
.head{
width: 100%;
height: 100px;
background-color: black;
position: fixed;
top: 0;
}
.logo{
float: left;
cursor: pointer;
}
.nav-bar{
float: right;
min-width: 750px;
height: 100px;
left: 0;
text-align: center;
line-height: 100px;
}
.navlist{
color: white;
float: left;
width: 150px;
height: 100px;
cursor: pointer;
}
.container{
width: 100%;
height: auto;
margin-top: 100px;
margin-bottom: 100px;
text-align: center;
line-height: 1000px;
}
.left{
width: 50%;
height: 1000px;
background: #1a5acd;
float: left;
}
.right{
width: 50%;
height:1000px;
background: #5880f9;
float: right;
}
.foot{
float: left;
width: 100%;
height: 100px;
background-color: black;
position: fixed;
bottom: 0;
}
.foot-bar{
float: left;
width: 800px;
height: 100px;
position: absolute;
left: 50%;
margin-left: -400px;
}
.footlist{
float: left;
width: 160px;
height: 100px;
text-align: center;
line-height: 100px;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<div class="head">
<div class="logo"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"></div>
<div class="nav-bar">
<div class="navlist">课程</div>
<div class="navlist">职业路径</div>
<div class="navlist">实战</div>
<div class="navlist">猿问</div>
<div class="navlist">手记</div>
</div>
</div>
<div class="container">
<div class="left">页面左侧</div>
<div class="right">页面右侧</div>
</div>
<div class="foot">
<div class="foot-bar">
<div class="footlist">网站首页</div>
<div class="footlist">企业合作</div>
<div class="footlist">人才招聘</div>
<div class="footlist">联系我们</div>
<div class="footlist">常见问题</div>
<div class="footlist">友情链接</div>
</div>
</div>
</body>
</html>麻烦检查一下代码错误和可以改进的地方
自己发现的问题：1.中间的内容部分container怎么才能让其只显示在中间，不被head 和foot覆盖？left 和right也是
2.窗口缩小的时候nav-bar缩小到一定程度就会换行到container中了，这个怎么处理，其他的几个部分缩小符合要求么？不太会看
写回答
1回答
-
你好，问题解决如下：
1. 你好，因为你的高度超出整平，所以滚动时，内容会向上和下滚动，可以动手将其高度设置成中间预留高度，这样定义居中后，就不会有所描述的问题。
2. nav-bar缩小到一定程度就会换行到container中了 ，给 .head 设置最小宽度：min-width: 1100px;
希望对你有帮助，祝学习愉快。
0
