请问老师，2-9的练习，我的代码能怎样优化呢？

来源：2-11 经典的三列布局

Snikt

2017-07-18 00:52:28

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
    /*此处写代码*/
   *{padding:0;margin:0;}
   body{background:#add8e6;}
    .header{
        width:100%;
        height:100px;
        background:#000;
    }
    .nav-ul{
        list-style:none;
        height:100px;
        float:right;
        line-height:100px;
        margin-right:50px;
    }
    .nav-li{
        float:left;
        color:#fff;
        padding-left:30px;
        font-size:18px;
        font-weight:bold;
    }
    .content{
        width:80%;
        height:500px;
        margin:0 auto;
    }
    .left{
       float:left;
       width:40%;
       font-size:14px;
    }
    .right{
        float:right;
        width:40%;
        font-size:14px;
    }
    p,h2{
        padding-top:30px;
    }
    span{
        background:#ff9999;
    }
    .footer{
        width:100%;
        height:100px;
        background:#000;
    }
    .foot-ul{
        list-style:none;
        width:600px;
        color:#fff;
        margin:0 auto;
    }
    .foot-li{
        float:left;
        line-height:100px;
        padding-left:30px;
    }
</style>
</head>
<body>

<div class="header">
      <img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" />
      <ul class="nav-ul">
          <li class="nav-li">课程</li>
          <li class="nav-li">职业路径</li>
          <li class="nav-li">实战</li>
          <li class="nav-li">猿问</li>
          <li class="nav-li">手记</li>
      </ul>
</div>
<div class="content">
      <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">
          <h2>相关课程</h2>
          <p>HTML    CSS    Javascript</p>
          <p>HTML5    CSS3    Jquery</p>
          <p>移动端基础开发    移动端APP开发</p>
      </div>
</div>
<div class="footer">
      <ul class="foot-ul">
          <li class="foot-li">网站首页</li>
          <li class="foot-li">企业合作</li>
          <li class="foot-li">人才招聘</li>
          <li class="foot-li">联系我们</li>
          <li class="foot-li">常见问题</li>
          <li class="foot-li">友情链接</li>
      </ul>
</div>
</body>
</html>