<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.list{
width: 300px;
border: 1px silver solid;
margin-top: 20px;
margin-left: 5px;
padding-top: 10px;
text-align: center;
float: left;
}
.a{
width: 250px;
float: left;
}
.b{
width: 950px;
float: left;
}
.c{
background-color: red;
margin: 10px 0;
padding: 0 4px;
}
.d{
background-color: yellow;
margin: 10px 0;
padding: 0 4px;
}
.e{
background-color: green;
margin: 10px 0;
padding: 0 4px;
}
.f{
background-color: gray;
margin: 10px 0;
padding: 0 4px;
}
.m{
height: 35x;
line-height: 35px;
}
</style>
</head>
<body>
<div>
<div class="b">
<p>发现课程</p>
<hr style="width: 97%;float: left;"/>
<div class="list">
<img src="img1/4.jpg">
<p>三天打鱼两天晒网</p>
</div>
<div class="list">
<img src="img1/5.jpg">
<p>编写一个考试的小程序</p>
</div>
<div class="list">
<img src="img1/6.jpg">
<p>酒店管理系统</p>
</div>
</div>
<div class="a">
<p>最新动态</p>
<hr style="width: 100%;float: left;"/>
<ul style="list-style:none;" class="m">
<li><span class="c">1</span><span> 7.3 简单协议通信</span></li>
<li><span class="d">2</span><span> 7.2 套接字</span></li>
<li><span class="e">3</span><span> 7.1 TCP_IP协议</span></li>
<li><span class="f">4</span><span> 6.6 删除文件</span></li>
<li><span class="f">5</span><span> 6.5 文件和流的关联和分离</span></li>
<li><span class="f">6</span><span> 6.4 文件指针移动操作</span></li>
<li><span class="f">7</span><span> 6.3 文件的读写</span></li>
<li><span class="f">8</span><span> 6.2 文件打开</span></li>
</ul>
</div>
</div>
</body>
</html>