2-9编程练习问题

<!doctype html>
<html lang="en">
<head>
<title>Document</title>
<meta charset="UTF-8">
<style>
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: auto;
background: #add8e6;
font: 16px '微软雅黑',small-caps;
}
.header{
width: 100%;
height: 100px;
background: black;
}
.logo{
float: left;
}
.nav{
float: right;
position: absolute;
top: 0;
right: 0;
}
span{
padding: 0 20px;
}
a{
text-decoration: none;
color: white;
line-height: 100px;
}
.main{
width: 80%;
height: 600px;
margin: 0 auto;
}
.content-l{
width: 35%;
height: 500px;
margin: 100px 50px 0px 0px;
float: left;
}
.content-r{
width: 35%;
height: 500px;
margin: 100px 50px 0px 0px;
float: left;
}
h1,p{
padding: 20px;
cursor: pointer;
}
.content-r span:hover{
color: white;
}
span{
margin: 30px 30px 30px 0;
padding: 0;
}
.content-l span{
background: #dfa1a5;
}
.footer{
width: 100%;
height: 100px;
background: black;
position: absolute;
bottom: 0;
}
.footer p{
line-height: 60px;
font-size: 20px;
color: white;
box-sizing: border-box;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<div class="logo">
<img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png" alt="慕课网logo">
</div>
<div class="nav">
<span><a href="#">课程</a></span><span><a href="#">职业路径</a></span><span><a href="#">实战</a></span><span><a href="#">猿问</a></span><span><a href="#">手记</a></span>
</div>
</div>
<div class="main">
<div class="content-l">
<h1>课程教学</h1>
<p><span>职业路径</span>HTML5与CSS3实现动态网页</p>
<p><span>职业路径</span>零基础入门Android语法与界面</p>
<p><span>职业路径</span>iOS基础语法与常用控件</p>
<p><span>职业路径</span>PHP入门开发</p>
<p><span>职业路径</span>JAVA入门开发</p>
</div>
<div class="content-r">
<h1>相关课程</h1>
<p><span>HTML</span><span>CSS</span><span>javaScript</span></p>
<p><span>HTML5</span><span>CSS3</span><span>jquery</span></p>
<p><span>移动端基础</span><span>移动端APP开发</span></p>
</div>
</div>
<div class="footer">
<p><span>网站首页</span><span>企业合作</span><span>人才招聘</span><span>联系我们</span><span>常见问题</span><span>友情链接</span></p>
</div>
</body>
</html>