2-11练习题，请老师指点

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    <!--
    *{margin:0;padding:0;}
    .con{
        width:100%;
        text-align:center;
        font-size:16px;
        margin:0 auto;
        color:#fff;
    }
    .header{
        width:100%;
        background:#333;
        position:fixed;
        top:0;
    }
    .logo{
        width:auto;
        float:left;
    }
    .nav{
        width:30%;
        height:100px;
        line-height:100px;
        text-align:center;
        float:right;
    }
    .content{
        width:100%;
        background:#5880f9;
        padding-top:100px;
        display:table;
    }
    .lcon{
        width:30%;
        height:1000px;
	    line-height:32px;
	    text-align:left;
        padding-top:150px;
        padding-left:5%;
        float:left;
    }
    .rcon{
        width:30%;
        height:1000px;
        line-height:32px;
        text-align:left;
        padding-top:150px;
        float:left;
    }
    .sub{
        width:25%;
        height:1000px;
        padding-top:150px;
        line-height:32px;
        text-align:left;
        padding-left:5%;
        border-left:3px solid pink;
        float:right;
    }
    .foot{
        width:100%;
        height:60px;
        text-align:center;
        background:#333;
        position:fixed;
        bottom:0;
    }
    .course{background:pink;}
    .button{background-color:red;}
    input{
        height:40px;
        width:200px;
    }
    span{cursor:pointer;}
    .foot span{line-height:60px;}
    
    
    -->
  </style>
</head>
<body>
  <div class="con">
      <div class="header">
          <div class="logo"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/></div>
          <div class="nav">
              <span>课程</span>
              <span>职业路径</span>
              <span>实战</span>
              <span>猿问</span>
              <span>手记</span>
          </div>
      </div>
      <div class="content">
          <div class="lcon">
              <h2>课程推荐</h2>
              <span class="course">职业路径</span>
              <span>HTML5于CSS3实现动态网页</span>
              <br/>
              <span class="course">职业路径</span>
              <span>零基础入门Androind语法与界面</span>
              <br/>
              <span class="course">职业路径</span>
              <span>IOS基础语法与相关控件</span>
              <br/>
              <span class="course">职业路径</span>
              <span>PHP入门开发</span>
              <br/>
              <span class="course">职业路径</span>
              <span>JAVA入门开发</span>
          </div>
          <div class="rcon">
              <h2>相关课程</h2>
              <span>HTML</span>
              <span>CSS</span>
              <span>JavaScript</span>
              <br/>
              <span>HTML5</span>
              <span>CSS3</span>
              <span>Jquery</span>
              <br/>
              <span>移动端基础</span>
              <span>移动端APP开发</span>
          </div>
          <div class="sub">
              <h2>登录</h2>
              <br/>
              <form>
                  <input type="text" name="count" placeholder="请输入登录邮箱/手机号"/>
                  <br/>
                  <br/>
                  <input type="text" name="code" placeholder="6-16位密码，区分大小写，不能用空格"/>
                  <br/>
                  <br/>
                  <input class="button" type="submit" value="登录" name="submit"/>
              </form>
          </div>
      </div>
      <div class="foot">
          <span>网站首页</span>
          <span>企业合作</span>
          <span>人才招聘</span>
          <span>联系我们</span>
          <span>常见问题</span>
          <span>友情链接</span>
      </div>
  </div>
</body>
</html>

明日阳光 2017-12-24

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