2-6编程，为什么我footer这样设置样式后，最后一张图片和footer内的内容都没有了？

2-6编程，为什么我footer这样设置样式后，最后一张图片和footer内的内容都没有了？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        ul{
            list-style:none;
        }
        a{
            text-decoration:none;
        }
        img{
          width:100%;
 
        }
        .img1{
          padding-top: 100px;
        }
 
        .nav{
            width: 100%;
            height: 100px;
            background: black;
            position: fixed;
            /*top: 0;*/
            /*bottom: 0;*/
            left:0;
            right: 0;
            margin:0 auto;
        }
       .logo{
           float:left;
       }
       .nav-ul{
           float:right;
       }
       .nav-li{
           float:left;
           line-height:100px;
           padding:0 10px;
       }
       .footer{
            height: 100px
            width: 100%;
            background: black;
            position: fixed;
             
 
       }
       .footer-ul{
            left:0;
            right: 0;
            margin:0 auto;
       }
       .footer-li{
            float: left;
            line-height:100px;
            padding:0 10px;
       }
    </style>
</head>
<body>
    <div class="nav">
        <div class="logo">
            <a href="#"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"></a>
        </div>
        <ul class="nav-ul">
            <li class="nav-li"><a href="#">课程</a></li>
            <li class="nav-li"><a href="#">职业路径</a></li>
            <li class="nav-li"><a href="#">实战</a></li>
            <li class="nav-li"><a href="#">猿问</a></li>
            <li class="nav-li"><a href="#">手记</a></li>
  
        </ul>
    </div>
    <div class="banner">
      <img class="img1" src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg" >
      <img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg" >
      <img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg" >
    </div>
     
    <div class="footer">
      <ul class="footer-ul">
            <li class="footer-li"><a href="#">网站首页</a></li>
            <li class="footer-li"><a href="#">企业合作</a></li>
            <li class="footer-li"><a href="#">人才招聘</a></li>
            <li class="footer-li"><a href="#">联系我们</a></li>
            <li class="footer-li"><a href="#">常见问题</a></li>
            <li class="footer-li"><a href="#">友情链接</a></li>
       
        </ul>
    </div>
</body>
</html>

如题。谢谢老师
ghy3030 2017-09-10
源自：CSS网页布局基础   2-8 经典的两列布局
16
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

2回答
提问者 ghy3030 2017-09-11 10:43:03
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        ul{
            list-style:none;
        }
        a{
            text-decoration:none;
        }
        img{
          width:100%;
 
        }
        .img1{
          padding-top: 100px;
        }
 
        .nav{
            width: 100%;
            height: 100px;
            background: black;
            position: fixed;
            /*top: 0;*/
            /*bottom: 0;*/
            left:0;
            right: 0;
            margin:0 auto;
        }
       .logo{
           float:left;
       }
       .nav-ul{
           float:right;
       }
       .nav-li{
           float:left;
           line-height:100px;
           padding:0 10px;
       }
       .footer{
            height: 100px;
            width: 100%;
            background: black;
            position: fixed;
            bottom:0;
 
       }
       .footer-ul{
            left:0;
            right: 0;
            top:0;
            bottom: 0:;
            margin:auto auto;
            /*text-align: center;*/
       }
       .footer-li{
            float: left;
            line-height:100px;
            padding:0 10px;
       }
    </style>
</head>
<body>
    <div class="nav">
        <div class="logo">
            <a href="#"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"></a>
        </div>
        <ul class="nav-ul">
            <li class="nav-li"><a href="#">课程</a></li>
            <li class="nav-li"><a href="#">职业路径</a></li>
            <li class="nav-li"><a href="#">实战</a></li>
            <li class="nav-li"><a href="#">猿问</a></li>
            <li class="nav-li"><a href="#">手记</a></li>
  
        </ul>
    </div>
    <div class="banner">
      <img class="img1" src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg" >
      <img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg" >
      <img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg" >
    </div>
     
    <div class="footer">
      <ul class="footer-ul">
            <li class="footer-li"><a href="#">网站首页</a></li>
            <li class="footer-li"><a href="#">企业合作</a></li>
            <li class="footer-li"><a href="#">人才招聘</a></li>
            <li class="footer-li"><a href="#">联系我们</a></li>
            <li class="footer-li"><a href="#">常见问题</a></li>
            <li class="footer-li"><a href="#">友情链接</a></li>
       
        </ul>
    </div>
</body>
</html>

非常感谢老师的解答，问题基本解决。但又出现了一个小小的问题，footer里面的文字无法居中，请老师再麻烦解答下，谢谢！

0
收起回答
  • 卡布琦诺 #1
    设置footer-ul的宽度，然后设置margin:auto;即可，譬如：.footer-ul{ /*position:absolute; left:0; right: 0; top:0; bottom: 0:;*/ margin:auto auto; /*text-align: center;*/ width:600px; }祝学习愉快！
    2017-09-11 10:48:32
  • 提问者 ghy3030 回复 卡布琦诺 #2
    问题解决了，多谢老师
    2017-09-11 16:11:39
卡布琦诺 2017-09-11 10:30:48

亲测你的最后一张图是有的，但是页脚消失不见是以下几点原因：

一、高度和宽度之间没有使用分号分隔

1
2
3
4
5
.footer {
    height: 100px /*这里没有使用分号分隔开*/width: 100%;
    background: black;
    position: fixed;
}

二、设置了position: fixed;以后，没有设置bottom:0;导致页脚以默认的偏移量被haeder部分覆盖，祝学习愉快！

0
收起回答
  • 提问者 ghy3030 #1
    非常感谢老师的解答，问题基本解决。但又出现了一个小小的问题，footer里面的文字无法居中，请老师再麻烦解答下，谢谢！（代码发在上面了）
    2017-09-11 10:44:04
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

为什么刚开始header和footer设置float：left的时候footer不会跑到上面去？
4 0 3
footer宽度问题
0 0 8
教程中header和footer设置浮动的作用是什么？
61 0 5
为什么header和footer设置float属性后，footer没有紧贴header之后显示呢？
20 0 5
老师头部和内容中间有缝隙，尾部的内容不出来
0 0 5

登录后可查看更多问答，登录/注册

前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36712    个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

了解课程

本课精华内容

问答 作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师
插入代码