麻烦老师帮我看下作业效果

来源：2-10 编程练习

Rockets总冠军

2019-05-23 14:46:18

没有用相同的颜色效果，代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
    /*此处写代码*/
    *{
       margin:0;
       padding:0;
    }
    .nav{
       height:100px;
       width:100%;
       background-color:#000;
       color:white;
       position:fixed;
       top:0;
       left:0;
    }
    .logo{
       width:300px;
       height:100px;
       background:url(http://img1.sycdn.imooc.com\/climg/58c0d2d900016ce303000100.png);
       float:left;
       cursor:pointer;
    }
    .nav-line{
       height:100px;
       width:auto;
       position:absolute;
       right:0;
    }
    .nav-line ul li{
       list-style:none;
       float:left;
      line-height:100px;
      font-size:25px;
      margin:0 25px;
    }
    .main{
      width:100%;
      height:2000px;
      background: #1a5acd;
      padding-top:100px;
    }
    .contain{
      width:70%;
      height:auto;
      margin: 0 auto;
    }
    .left{
      width:50%;
      float:left;
      font-size:20px;
      margin-top:20px;
    }
    .right{
      width:50%;
      float:right;
      font-size:20px;
      margin-top:20px;
    }
    .left p,.right p{
      margin-top:15px;
    }
    span{
      background-color:yellow;
    }
    .footer{
       height:90px;
       width:100%;
       position:fixed;
       bottom:0;
       left:0;
       background-color:#000;
       color:white;
    }
    .footer-line{
       overflow:hidden;
       zoom:1;
       position:absolute;
       left:50%;
       margin-left:-594px;
    }
    .footer-line ul li{
       list-style:none;
       float:left;
        line-height:90px;
        font-size:20px;
        margin:0 35px;
    }

</style>
</head>
<body>

<div class="container">
   <div class="nav">
   <div class="logo"></div>
    <div class="nav-line">
       <ul>
           <li>课程</li>
           <li>职业路径</li>
           <li>实战</li>
           <li>猿问</li>
           <li>手记</li>
       </ul>
    </div>
   </div>
   <div class="main">
      <div class="contain">
       <div class="left">
        <h2>课程推荐</h2>
        <p><span>职业路径</span>  HTML5与CSS3实现动态网页</p>
        <p><span>职业路径</span>  零基础入门Android语法与界面</p>
        <p><span>职业路径</span>  iOS基础语法与常用控件</p>
        <p><span>职业路径</span>  PHP入门开发</p>
        <p><span>职业路径</span>  JAVA入门开发</p>
      </div>
      <div class="right">
        <h3>相关课程</h3>
        <p>HTML  CSS  JavaScript</p>
        <p>HTML5  CSS3  Jquery</p>
        <p>移动端基础  移动端APP开发</p>
      </div>
    </div>
   </div>
   <div class="footer">
    <div class="footer-line">
        <ul>
                <li>网站首页</li>
                <li>企业合作</li>
                <li>人才招聘</li>
                <li>联系我们</li>
                <li>常见问题</li>
                <li>友情链接</li>
        </ul>
    </div>
   </div>
</div>
</body>
</html>