麻烦老师看一下作业代码，谢谢。
来源：2-6 选择题
DemiMurphy
2019-07-17 19:56:40
下面是题目以及我写的代码，麻烦老师进行修改建议。另外有两个问题：
为什么我写出的效果图里面有两个进度条？
2. 为什么footer与主题部分会有个间隔，怎么去掉？另外怎么实现footer中的文字居中？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>pratice</title>
<style type="text/css">
body{
margin: 0;
padding:0;
color:#fff;
width:100%;
}
.header{
width: 100%;
height:110px;
line-height: 110px;
background: #333;
margin:0 auto;
position: fixed;
}
.header .logo img{
width:250px;
height:110px;
line-height: 110px;
margin:0 40px;
float: left;
}
.header .nav{
list-style: none;
float: right;
padding-right:60px;
overflow: hidden;
height:110px;
line-height: 110px;
margin:0 auto;
}
.header .nav li{
display:inline;
padding:0 20px;
}
.container{
padding-top:100px;
height:700px;
overflow: scroll;
}
.container img{
width:100%;
float: left;
overflow: hidden;
}
.footer{
list-style: none;
width: 100%;
height:110px;
line-height: 110px;
background: #333;
margin:0 auto;
float: left;
}
.footer li{
display:inline;
padding:0 40px;
}
</style>
</head>
<body>
<div class="header">
<div class="logo">
<img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"/>
</div>
<ul class="nav">
<li>课程</li>
<li>职业</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
<div class="container">
<img class="st" src="http://climg.mukewang.com/58c0eda50001e12416000480.jpg"/>
<img class="rd" src="http://climg.mukewang.com/58c0edb80001c9f216000480.jpg"/>
<img class="tr" src="http://climg.mukewang.com/58c0edc9000100d516000480.jpg"/>
</div>
<div class="footer">
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</body>
</html>
3回答
-
你好同学，问题解答如下：
1.中间区域出现滚动条是因为设置了如下属性：
把它去掉即可哦。
2.老师这边测试，footer与上面内容没有间隔，是与下面有间隔，这是因为ul有默认的间距影响，如下
很多元素都会有默认的间距的，所以做页面的时候，一般会使用通配符给所有元素间距初始化一下：
3.尾部内容居中可以设置如下
4.尾部整体不用浮动，而是设置定位固定在页面底部，如下调整：
5.因为头部和尾部都设置定位，脱离文档流会悬浮在中间内容上面，像同学设置填充100px还不够，因为头部高度为110px，所以间距也应该设置110px才可以哦
如下调整：
祝学习愉快，望采纳。
1h019-07-18 -
慕瓜1333744
2019-07-17
<style type="text/css">
*{
margin: 0;
padding:0;
}
ul{
list-style-type: none;
color: #fff;
}
.header,.footer{
width: 100%;
line-height: 110px;
background: #333;
}
.header{ position: fixed;}
.header .logo img{
width:250px;
margin:10px 40px;
float: left;
}
.header .nav{
float: right;
padding-right:60px;
overflow: hidden;
line-height: 110px;
}
.header .nav li, .footer ul li{
float: left;
width: 100px;
text-align: center;
}
.container{ padding-top:110px; }
.container img{
width:100%;
float: left;
}
.footer::after{
content: " ";
display: block;
clear: both;
}
.footer ul{
width: 600px;
margin: 0 auto;
}
</style>
这是根据您的html结构修改后的css样式，我觉得一些样式重复定义了
0h019-07-18 -
慕瓜1333744
2019-07-17
这两个css属性注释了应该可以解决多出一个滚动条的问题0
相似问题