老师检查一下作业 3-3 估计这样的写法只能用于完成这个作业

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        body{
            min-width: 1200px;
        }
        li{
            list-style: none;
        }
        .clear {
            clear: both;
            zoom:1
        }
        .header,.footer {
            width: 100%;
            height: 50px;
            background: #000;
            color: #fff;
            line-height: 50px;
        }
        .logo {
            float: left;
        }
        .logo img {
            width: 150px;
            height: 50px;
        }
        .nav {
            float: right;
        }
        .nav ul li{
            display: inline-block;
            margin: 0 30px;
        }
        .container {
            padding: 0 300px 0 400px;
        }
        .middle,.left,.right {
            float: left;
            position: relative;
            min-height: 1000px;
        }
        .middle {
            width: 100%;
            background: #ffc0cb;
            text-align: center;
            padding-top: 150px;
        }
        .left {
            width: 350px;
            background: #ffefdb;
            margin-left: -100%;
            left: -400px;
            padding: 150px 0 0 50px;
        }
        .left ul li {
            line-height: 40px;
        }
        .left ul li span {
            background: pink;
            margin-right: 20px;
        }
        .right {
            width: 250px;
            background: #add8e6;
            margin-right: -300px;
            padding: 150px 0 0 50px;
        }
        .in1,.in2,.in3 {
            margin: 20px 0;
        }
        .right input {
            width: 200px;
            height: 40px;
            padding: 10px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .in3 input {
            background: red;
            color: #fff;
            border: 0;
        }
        .footer {
            position: fixed;
            bottom: 0;
        }
        .footer ul {
            font-size: 0;
            width: 744px;
            margin: 0 auto;
        }
        .footer ul li {
            font-size: 16px;
            display: inline-block;
            margin: 0 30px;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="logo">
            <img src="http://img1.sycdn.imooc.com/climg//590037f600016ce303000100.png">
        </div>
        <div class="nav">
            <ul>
                <li>课程</li>
                <li>职业路径</li>
                <li>实战</li>
                <li>猿问</li>
                <li>手记</li>
            </ul>
        </div> 
        <div class="clear"></div>
    </div>
    <div class="container">
        <div class="middle">
            <img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg">
        </div>
        <div class="left">
           <h2>课程推荐</h2>
            <ul>
                <li>
                    <span>职业路径</span>HTML5与CSS3实现动态网页
                </li>
                <li>
                    <span>职业路径</span>零基础入门Android语法与界面
                </li>
                <li>
                    <span>职业路径</span>IOS基础语法与常用控件
                </li>
                <li>
                    <span>职业路径</span>PHP入门开发
                </li>
                <li>
                    <span>职业路径</span>JAVA入门开发
                </li>
            </ul>
        </div>
        <div class="right">
            <h2>登录</h2>
            <div class="in1 lm">
                <input type="text" placeholder="用户名">
            </div>
            <div class="in2">
                <input type="password" placeholder="密码">
            </div>
            <div class="in3">
                <input type="submit" value="登录">
            </div>
        </div>
        <div class="clear"></div>
    </div>
    <div class="footer">
        <ul>
            <li>网站首页</li>
            <li>企业合作</li>
            <li>人才招聘</li>
            <li>联系我们</li>
            <li>常见问题</li>
            <li>友情链接</li>
        </ul>
    </div>
</body>
</html>