求老师帮我看看哪里要完善的 还有主题和页脚之间有空的是怎么回事??

求老师帮我看看哪里要完善的 还有主题和页脚之间有空的是怎么回事??

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    *{margin:0;padding:0;font-size:10px;}

    .header{background:black;

        width:100%;

        height:80px;

        display:table;

        overflow:hidden;

        zoom:1;

        color:white;

    }

     img{float:left;

         display:table-cell;

         vertical-align:middle;

     }

    .header ul{

         text-align:right;

         line-height:80px;

     }

    .header li{display:inline-block;

         margin-right:15px;

     }

     .tbody{width:100%;height:600px;background:#38B0DE;margin:0 auto;}

     span{background:pink;

         margin-right:20px;

     }

     .left{

     width:60%;height:600px;

     float:left;

     }

     dd{margin-top:20px;}

    .right{width:40%;height:600px;

        float:right;

    }

    dl{position:relative;

        top:60px;

        left:120px;

    }

    .right1{position:relative;

        top:60px;

    }

    p{margin-top:20px;}

    .footer{width:100%;height:60px;background:black;color:white;

        text-align:center;

        line-height:60px;

    }

  </style>

</head>

<body>

  <div class="header">

      <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png">

      

      <ul>

          <li>课程</li>

          <li>职业路径</li>

          <li>实践</li>

          <li>猿问</li>

          <li>手记</li>

      </ul>

  </div>

  <div class="tbody">

      <div class="left">

         <dl>

<dt>课程推荐</dt>

<dd><span>职业路径</span>HTML5与CSS的动态</dd>

<dd><span>职业路径</span>HTML5与CSS的动态</dd>

<dd><span>职业路径</span>HTML5与CSS的动态</dd>

<dd><span>职业路径</span>HTML5与CSS的动态</dd>

<dd><span>职业路径</span>HTML5与CSS的动态</dd>

      </dl>

          </div>

     

      <div class="right">

          <div class="right1">

          <h3>相关课程</h3>

<p>HTML&nbsp;&nbsp;&nbsp;&nbsp;CSS3&nbsp;&nbsp;&nbsp;&nbsp;JAVScript</p>

<p>HTML5&nbsp;&nbsp;&nbsp;&nbsp;CSS3&nbsp;&nbsp;&nbsp;&nbsp;JQuery</p>

<p>移动基础&nbsp;&nbsp;&nbsp;&nbsp;移动APP开发</p>

</div>

      </div>

      </div>

  <div class="footer">

      <p>网站首页&nbsp;&nbsp;&nbsp;企业合作&nbsp;&nbsp;&nbsp;人才招聘&nbsp;&nbsp;&nbsp;联系我们&nbsp;&nbsp;&nbsp;常见问题&nbsp;&nbsp;&nbsp;友情链接</p>

  </div>

</body>

</html>


正在回答

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

2回答

同学你好,造成中间内容跟页脚之间有间距的原因是:在底部的p标签里面添加了margin-top:20px,把它删掉即可,参考下图:

http://img1.sycdn.imooc.com//climg/5c763d990001590002650093.jpg

效果基本都实现了,但是有一些细节性的问题,例如字体可以设置大一点,背景颜色可以跟效果图的颜色一致(background:skyblue),自己试一试哦。

如果帮助到了你,欢迎采纳。

祝学习愉快!

  • 诙暗_0 提问者 #1
    老师 那为什么dd加了margin-top没事? 还有如果把P标签的margin去掉 那右边那里的行之间的空隙怎么写好点?麻烦老师给点意见 谢谢!!
    2019-02-27 16:11:32
山河远阔ZZ 2019-02-27 16:22:54

同学你好。

1、在.right区域里面,“html5 CSS3”这些内容是由p标签包裹的。在底部里面,底部的信息也是由p标签包裹的。

在css样式里面,直接通过标签名选择器添加了margni-top:20px;造成了所有的p标签都有这个margin-top:20px的样式,所以底部距离中间内容有20px的位置。

实现内容与内容之间的间隙:可以给中间内容的p标签添加一个相同的类名,在通过类名选择器来添加css样式,例如:

http://img1.sycdn.imooc.com//climg/5c76483c000182c212520192.jpg

http://img1.sycdn.imooc.com//climg/5c76484300018fe204730109.jpg

2、dd标签包裹在内容里面,并且dd标签没有继承父元素的高度,所以它的高度是由内容撑起来,所以给dd标签添加margin-top:20px,只会更改dd标签的位置。

现在刚接触一个新得领域,熟悉的过程会有些艰辛,同学不要着急,一步一步慢慢来,练习多做几遍,会越来越好的,继续加油!

希望帮助到了你,祝学习愉快!

  • 提问者 诙暗_0 #1
    好的谢谢老师!!
    2019-02-27 17:23:18
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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