总感觉代码不够好，能实现但是不简洁

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    *{padding: 0;margin: 0;font-family: "微软雅黑";}
    .banner{
    	width: 100%;
    	height: 60px;
    	background: black;
    	margin: 0 auto;
		position: fixed;
		top: 0;
    }
    img{height: 60px;}
    .ul1{    	
    	line-height: 60px;
    	font-size: 16px;
    	float: right;
    	list-style-type: none;
    }
    .ul1 li{
    	display: inline;
    	line-height: 60px;
    	text-align: center;
    	margin-right: 60px;
    }
    a{text-decoration:none;color: #fff;}
    
    .foot{
    	width: 100%;
    	height: 60px;
    	background: black;
    	text-align: center;
		position: fixed;
		bottom: 0;
    }
    .ul2{
    	line-height: center;
    	font-size: 12px;
    	word-spacing: 4em;
    	float: none;
    	list-style-type: none;
    }
    .ul2 li{
    	display: inline;
    	line-height: 60px;
    	text-align: center;
    }
    .contaner{
    	width: 100%;
    	height: 1000px;
    	background-color:  #98f;
    	position: absolute;
    	top: 60px;
    }
	.nav-left{
		width: 320px;
		height: 320px;
		position: absolute;
		top: 40px;
		left: 220px;
		line-height: 2.5em;
		font-size: 14px;
	}
	.nav-right{
		width: 320px;
		height: 320px;
		position: absolute;
		top: 40px;
		right:320px;
		line-height: 2.5em;
		font-size: 14px;
	}
	span{background-color:#faa;}
	.lesson{
		font-size: 18px;
		font-weight: bold;
		margin: 5px 0;
	}
	</style>
</head>
<body>
  <!-- 此处写代码 -->
<div class="no1">
  <div class="banner">
  	<a href="#"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png" alt="慕课网"></a>
  	<ul class="ul1">
		<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 class="contaner">
	<div class="nav-left">
		<p class="lesson">课程推荐</p>
		<p><span>职业路径</span>&nbsp;&nbsp;&nbsp;HTML5与CSS3实现动态网页</p>
		<p><span>职业路径</span>&nbsp;&nbsp;&nbsp;零基础入门Android语法与界面</p>
		<p><span>职业路径</span>&nbsp;&nbsp;&nbsp;iOS基础语法于常用组件</p>
		<p><span>职业路径</span>&nbsp;&nbsp;&nbsp;PHP入门开发</p>
		<p><span>职业路径</span>&nbsp;&nbsp;&nbsp;JAVA入门开发</p>
	</div>
	<div class="nav-right">
		<p class="lesson">相关课程</p>
		<p>HTML&nbsp;&nbsp;&nbsp;CSS&nbsp;&nbsp;&nbsp;JavaScript</p>
		<p>HTML5&nbsp;&nbsp;CSS3&nbsp;&nbsp;&nbsp;&nbsp;Jquery</p>
		<p>移动端基础&nbsp;&nbsp;&nbsp;移动端APP开发</p>
	</div>
</div>
  	<div class="foot">
		<ul class="ul2">
			<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>
</div>
</body>
</html>

鸭梨啊 2018-03-01

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