3-3页尾怎么显示不出来，还有就是为什么图片和内容的居中显示怎么做

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
  *{padding:0;margin:0;}
  body{min-width:900px;}
  .header{width:100%;height:60px;background:black;}
  img{width:100px;height:50px;padding-top:5px;float:left;}
 .song{list-style:none;display:inline-block;color:white;float:right;padding-right:20px;cursor:pointer;}
  .song:hover{color:orange;}
  .xiao{line-height:60px;}
  .container{padding:0 220px 0 200px;}
  .left,.middle,.right{position:relative;float:left;}
  .middle{width:100%;background:#1a5acd;height:500px;}
  .left{width:200px;background:#30a457;margin-left:-100%;
  left:-200px;height:500px;}
  .right{width:220px;background:#f00;height:500px;margin-left:-220px;right:-220px; }
  .footer{width:100%;height:60px;background:black;}
  .yang{ padding-top:100px;}
  .middle img{width:200px;height:250px;}
    .jun{padding-top:150px;padding-left:20px;}
  .wei{ padding-left:100px;padding-top:100px;}
         
    /*此处写代码*/
  </style>
</head>
<body>
    <div class="header">
      <img src="http://img1.sycdn.imooc.com/climg//590037f600016ce303000100.png"> 
       
      <div>
          <ul class="xiao">
              <li class="song">课程</li>
               <li  class="song">课程</li>
                <li class="song">课程</li>
                 <li  class="song">课程</li>
                  <li  class="song">课程</li>
          </ul>
           
      </div>
    </div>
    <div class="container" >
       <div class="middle">
        <div class="wei"><img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg"></div>  
      </div> 
      <div  class="left">
         <ul class="yang">
              <h4>课程推荐</h4>
              <li>职业路线�htlm5和css3实现动态网页</li>
              <li>职业路线�htlm5和css3实现动态网页</li>
              <li>职业路线�htlm5和css3实现动态网页</li>
              <li>职业路线�htlm5和css3实现动态网页</li>
         </ul>
      </div>
       
       
       
        <div class="right">
                   <div class="jun"><h3>登录</h3>
                 <form>
                  <div><input type="text" name="name" size="25" maxlength="6" placehoder="请出入邮箱"></div>   
                    <div><input type="password" name="name" size="25" maxlength="6" placehoder="请出入邮箱"></div> 
                      
                   <div class="small1"><input type="submit" name="submit" value="登录" /></div>
                     
                    
                 </form>
                 </div> 
                 </div>  
      </div>
        
     
    <div class="footer">
     <ul>
         <li>课程安排</li>
     <li>课程安排</li>
      <li>课程安排</li>
       <li>课程安排</li>
        <li>课程安排</li>
     </ul>   
    </div>
  <!-- 此处写代码 -->
</body>
</html>

晓松aa 2017-08-24

源自：CSS网页布局基础 3-3 编程练习

12

收起

4回答

好帮手慕糖 2017-08-28 09:37:03

你好，实现居中的方法有很多，这里使用不使用ul设置定宽，也是可以的，但是这样就没有办法使用margin：0 auto;属性。你可以根据自己的理解的方法来实现。祝学习愉快~

小丸子爱吃菜 2017-08-25 21:09:23

给页脚ul设置定宽，然后再设置margin：0 auto；就可以实现居中效果。

提问者晓松aa #1

为什么设置宽度才会显示居中呢，以前做题的时候没有设置宽度怎么也显示居中啊

2017-08-25 21:25:33

好帮手慕糖 2017-08-25 11:14:08

你好，（1）这里是由于上面的浮动导致脱离文档流，页脚添加浮动，也可以达到与中间部分统一文档流。这里也可以清除中间部分的浮动。

（2）页面水平方向出现滚动条，原因如下，.jun元素中没有设置宽度，会继承父级的100%，又设置padding-left值，导致超出，建议：这里可设置下.jun的宽度。

（3）居中，可给图片设置定位，然后设置left:50%，然后就设置margin-left：-自身宽度的一半，即可实现水平居中。垂直同理。

祝学习愉快~

提问者晓松aa #1

页脚的文字怎么不居中啊应该怎么设置

2017-08-25 20:08:49

慕婉清7059351 2017-08-25 00:48:32

加个浮动

.footer{

width:100%;

height:60px;

background:black;

float: left;

color: white;

}

提问者晓松aa #1

为什么要浮动呢

2017-08-25 06:08:39

相似问题

请问老实为什么我电脑的图片总是显示不出来？

图片显示不出来

4-3中马图显示不出来

为什么显示我设置的东西？

为什么把图片设为背景会显示不出来？

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

前端小白入门系列课程

参与学习人
提交作业 11218 份
解答问题 36712 个

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

本课精华内容

问答作业

为什么我的没有框

5 45

表格的问题

377 41

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

378 40

到底是cellspacing还是cellpacing?

0 35

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

60 30

查看更多本课问答

请稍等 ...

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

帮助反馈 APP下载

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

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