先整体布局，然后一块一块来做
如何灵活和合理的使用div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>小案例</title>
</head>
<body>
<!-- 头部内容 -->
<div>
<!-- logo -->
<div>
<img src="img\logo.gif" alt="logo">
</div>
<!-- 导航 -->
<div>
<ul>
<li><a href="">html5</a></li>
<li><a href="">JavaScript</a></li>
<li><a href="">CSS</a></li>
<li><a href="">PHP</a></li>
<li><a href="">IOS</a></li>
<li><a href="">Android</a></li>
<li><a href="">Photoshop</a></li>
<li><a href="">jQuery</a></li>
</ul>
</div>
<!-- banner图 -->
<div>
<img src="img\banner.jpg" alt="banner">
</div>
</div>
<!-- 主体内容 -->
<div>
<!-- 文章 -->
<div>
<h1>how to become a fantasty web engineer</h1>
<h6>2 days ago 380 saw 1 comment</h6>
<p>fjsd;fadasdfsadfasdsadcc</p>
</div>
<!-- 链接 -->
<div>
<dl>
<dt>html</dt>
<dd><img src="html1.jpg" alt="1"></dd>
</dl>
<dl>
<dt>html</dt>
<dd><img src="html1.jpg" alt="1"></dd>
</dl>
<dl>
<dt>html</dt>
<dd><img src="html1.jpg" alt="1"></dd>
</dl>
</div>
</div>
<!-- 页脚内容 -->
<div>
just do IT!
</div>
</body>
</html>
一个简单的布局，但没有css+js显得很不美观，一步步来，慢慢的就变好看了的，下次一定！
明天见，等下上传一些小资料！