请老师帮忙检查下，谢谢！

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>3-3圣杯布局编程题</title>
  <style type="text/css">
*{
margin:0;
padding:0;
}
.header{
margin:0 auto;
width:100%;
height:100px;
background:black;
text-align:center;
line-height:100px;
}
.logo{
width:300px;
height:100px;
float:left;
}
.nav{
width:100%;
height:100px;
}
.nav ul{
width:550px;
height:100px;
float:right;
}
.nav ul li{
float:left;
overflow:hidden;
font-size:24px;
margin:0 24px;
}
.nav ul li a{
text-decoration:none;
color:#fff;
}
.main{
height:1000px;
padding:0 400px 0 440px;
}
.middle{
width:100%;
background-color:pink;
}
.middle-pic{
margin:130px 0 0 25%;
}
.left,.middle,.right{
position:relative;
float:left;
min-height:1000px;
}
.left{
width:440px;
height:100%;
margin-left:-100%;
left:-440px;
background:#add8e6;
text-align:center;
}
.kechengtuijian{
margin:100px auto;
text-align:left;
border-spacing:30px;/*可用来设置单元格之间的间距*/
}
.kechengtuijian tr th{
font-size:32px;
}
.lujing{
width:65px;
background-color:pink;
}
.right{
width:400px;
height:100%;
margin-left:-400px;
right:-400px;
background:#add8e6;
}
.login{
margin:130px 0 0 5%;
}
.login p{
font-size:32px;
font-weight:bold;
}
.username,.password{
margin:30px 0 30px 10px;
width:340px;
height:50px;
display:block;
padding-left:10px;
}
.denglu{
margin:30px 0 30px 10px;
width:355px;
height:52px;
background-color:red;
display:block;
font-size:24px;
color:#fff;
border:none;
}
.footer{
width:100%;
height:100px;
background:black;
text-align:center;
}
.footer ul{
width:100%;
height:100px;
text-align:center;
line-height:100px;
}
.footer ul li{
font-size:24px;
margin:0 50px;
display:inline-block;
}
.footer ul li a{
text-decoration:none;
color:#fff;
}
  </style>
 </head>
 <body>
<div class="header">
<div class="logo">
<a href="#">
<img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/>
</a>
</div>
<div class="nav">
<ul type="none">
<li><a href="#">课程</a></li>
<li><a href="#">职业路径</a></li>
<li><a href="#">实战</a></li>
<li><a href="#">猿问</a></li>
<li><a href="#">手记</a></li>
</ul>
</div>
</div>
<div class="main">
<div class="middle">
<div class="middle-pic">
<img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg"/>
</div>
</div>
<div class="left">
<table class="kechengtuijian">
<thead>
<tr>
<th colspan="2">课程推荐</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="lujing">职业路径</td>
<td>HTLML5与CSS3实现动态页面</td>
</tr>
<tr>
<td class="lujing">职业路径</td>
<td>零基础入门Android语法与界面</td>
</tr>
<tr>
<td class="lujing">职业路径</td>
<td>IOS基础语法与常用控件</td>
</tr>
<tr>
<td class="lujing">职业路径</td>
<td>PHP入门开发</td>
</tr>
<tr>
<td class="lujing">职业路径</td>
<td>JAVA入门开发</td>
</tr>
</tbody>
</table>
</div>
<div class="right">
<div class="login">
<p>登录</p>
<form action="" method="post">
<input type="text" name="username" value="" placeholder="请输入登陆邮箱/手机号" class="username"/>
<input type="password" name="password" value="" placeholder="6~16位密码，区分大小写，不能用空格" class="password"/>
<input type="submit" name="登录" value="登录" class="denglu"/>
</form>
</div>
</div>
</div>
<div class="footer">
<ul type="none">
<li><a href="#">网站首页</a></li>
<li><a href="#">企业合作</a></li>
<li><a href="#">人才招聘</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">常见问题</a></li>
<li><a href="#">友情链接</a></li>
</ul>
</div>
 </body>
</html>

Ev4ngel 2018-12-16

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