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

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

<!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>


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

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

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的宽度。

http://img1.sycdn.imooc.com/climg//599f95b40001a9fe07280049.jpg

(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
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师