实现基本布局：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>王小窝</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="main-wrapper">
<header><!--页头开始-->
<nav>
<div class="logo"><a href="#">王小窝</a></div>
<ul>
<li><a href="#" class="active">首页</a></li>
<li><a href="#">图片</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
<div id="banner">
<div class="inner">
<h1>王小窝</h1>
<p class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod incididunt ut
proident</p>
<button id="main-btn">了解我</button>
<div class="more">
更多
</div>
</div>
</div>
</header><!--页头结束-->
<div class="content"><!--内容开始-->
<section class="green-section">
<div class="wrapper">
<div>
<h2>王小窝</h2>
<div class="hr"></div>
<p class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod incididunt ut
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="icon-group">
<span class="icon">item1</span>
<span class="icon">item2</span>
<span class="icon">item3</span>
</div>
</div>
</section>
<section class="gray-section">
<div class="article-preview">
<div class="img-section">
<img src="img/pic01.jpg">
</div>
<div class="text-section">
<h2>STEP One</h2>
<div class="sub-heading">
好吃鬼
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod incididunt ut
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="article-preview">
<div class="text-section">
<h2>STEP Two</h2>
<div class="sub-heading">
爱吃零食的孩子都是好孩子
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod incididunt ut
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="img-section">
<img src="img/pic02.jpg">
</div>
</div>
<div class="article-preview">
<div class="img-section">
<img src="img/pic03.jpg">
</div>
<div class="text-section">
<h2>STEP Three</h2>
<div class="sub-heading">
爱吃零食的小可爱
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod incididunt ut
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</section>
<section class="purple-section">
<div class="wrapper">
<div class="heading-wrapper">
<h2>爱吃零食的小可爱</h2>
<div class="hr"></div>
<div class="sub-heading">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="card-group clearfix">
<div class="card">
<h3>One</h3>
<p>Loreeu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="card">
<h3>Two</h3>
<p>Loreeu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="card">
<h3>Three</h3>
<p>Loreeu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="card">
<h3>Four</h3>
<p>Loreeu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="card">
<h3>Five</h3>
<p>Loreeu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="card">
<h3>Six</h3>
<p>Loreeu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</section>
</div><!--内容结束-->
<footer><!--页脚开始-->
<ul class="share-group">
<li>ONE</li>
<li>小可爱</li>
<li>TWO</li>
<li>可比克</li>
<li>THREE</li>
</ul>
<div class="copy">
© 王小窝 - 2018 -
</div>
</footer><!--页脚结束-->
</div>
</body>
</html>