终于写完了！请老师检查一下！并且指出一些问题！另外网页下部的列表怎么垂直居中？

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>慕课网</title>
<style type="text/css">
html,body{
margin:0px;
}
/*以下为头部元素的CSS样式*/
.header{
height: 100px;
background-color: black;
font-size: 20px;
}
.header-right{
float: right;
height: 100px;
}
.header-right a{
padding-right: 50px;
text-decoration: none;
color: white;
}
td a:hover{
color: red;
}
a:hover{
color: red;
}
/*以下为主体元素的CSS样式*/
.body-box{
height: 800px;
width: 100%;
}
.box-left{
height: 100%;
width: 38%;
background-color: lightblue;
float: left;
}
#title1{
position: relative;
left: 25%;
top: 160px;
}
.list{
line-height: 40px;
position: relative;
top: 150px;
left: 200px;
}
.list td{
padding-right: 20px;
}
.list a{
text-decoration: none;
color: black;
}
span{
background-color: pink;
}
.box-middle{
height: 100%;
width: 32.5%;
background-color: lightblue;
float: left;
}
#title2{
position: relative;
top:160px;
left: 20%;
}
ul{
margin: 0px;
padding: 0px;
position: relative;
top: 150px;
left: 25%;
}
ul li{
list-style: none;
display: inline-block;
margin-right: 4%;
}
ul li a{
text-decoration: none;
color: black;
line-height: 42px;
}
.xian{
height: 100%;
width: 0.5%;
background-color: orange;
float: left;
}
.box-right{
height: 100%;
width: 29%;
background-color: lightblue;
float: right;
}
.title3{
position: relative;
top: 160px;
left: 20%;
}
.denglu{
width: 45%;
height: 50px;
position: relative;
top: 160px;
left: 20%;
}
#anniu{
background-color: red;
color: white;
}
.footer{
background-color: black;
height: 100px;
font-size:18px;
}
.footer-list {
margin:auto;
line-height:100px;

}
.footer-list td{
padding-left:80px;
}
.footer-list a{
color:white;
text-decoration:none;
}
#first{
padding-left:0px;
}
</style>
</head>

<body>
<!--以下为头部内容-->
<div class="header">
<img src="1.png">
<table class="header-right">
<tr>
<td><a href="#">课程</a></td>
<td><a href="#">职业路径</a></td>
<td><a href="#">实战</a></td>
<td><a href="#">猿问</a></td>
<td><a href="#">手记</a></td>
</tr>
</table>
</div>
<!--以下为主体内容-->
<div class="body-box">
<div class="box-left">
<h2 id="title1">课程推荐</h2>
<table class="list">
<tr>
<td><span>职业路径</span></td>
<td><a href="#">HTML5与CSS3实现动态网页</a></td>
</tr>
<tr>
<td><span>职业路径</span></td>
<td><a href="#">零基础入门Android语法与界面</a></td>
</tr>
<tr>
<td><span>职业路径</span></td>
<td><a href="#">iOS基础语法与常用控件</a></td>
</tr>
<tr>
<td><span>职业路径</span></td>
<td><a href="#">PHP入门开发</a></td>
</tr>
<tr>
<td><span>职业路径</span></td>
<td><a href="#">JAVA入门开发</a></td>
</tr>
</table>
</div>
<div class="box-middle">
<h2 id="title2">相关课程</h2>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
<ul>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">Jquery</a></li>
</ul>
<ul>
<li><a href="#">移动端基础</a></li>
<li><a href="#">移动端APP开发</a></li>
</ul>
</div>
<div class="xian"></div>
<div class="box-right">
<h2 class="title3">登录</h2>
<form action="">
<input class="denglu" type="text" name="user" placeholder="请输入登录邮箱/手机号">
<br><br>
<input class="denglu" type="password" name="mima" placeholder="6-16位密码，区分大小写，不能用空格" maxlength="16">
<br><br>
<input class="denglu" id="anniu" type="submit" value="登录">登录</button>
</form>
</div>
</div>
<!--以下为底部内容-->
<div class="footer">
<table class="footer-list">
<tr>
<td id="first"><a href="#">网站首页</a></td>
<td><a href="#">企业合作</a></td>
<td><a href="#">人才招聘</a></td>
<td><a href="#">联系我们</a></td>
<td><a href="#">常见问题</a></td>
<td><a href="#">友情链接</a></td>
</tr>
</table>
</div>
</body>
</html>

雨之赞歌 2018-12-27

源自：CSS入门 5-2 编程练习