<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>个人博客</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!--页头-->
<header>
<nav>
<ul>
<li class="logo"><a href="">首页</a></li>
<li><a href="">链接1</a></li>
<li><a href="">链接2</a></li>
<li><a href="">链接3</a></li>
<li><a href="">链接4</a></li>
</ul>
</nav>
<div id="banner">
<div class="inner">
<h1>张小窝</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam nihil animi similique cumque ut fuga mollitia voluptates, reiciendis quibusdam distinctio accusantium non doloribus asperiores omnis. Nisi eum, consectetur quae sed.</p>
<button>了解我</button>
<div class="more">
更多
</div>
</div>
</div>
</header>
<!--内容-->
<div class="content">
<!--一部分内容-->
<div>
<section class="green-section">
<div class="wrapper">
<div >
<h2>一 个标题</h2>
<div class="hr"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid molestiae dignissimos porro ab, nisi illum ducimus, voluptatibus provident sit minus officia perspiciatis deserunt, unde voluptatum? Iste fugit modi, voluptatibus culpa.
</p>
</div>
<div class="icon-group">
<span class="icon">item1</span>
<span class="icon">item1</span>
<span class="icon">item1</span>
</div>
</div>
</section>
<section class="gray-section">
<div class="article-preview">
<div class="img-section">
<img src="images/pic01.jpg" alt="">
</div>
<div class="text-section">
<h2>又一个标题</h2>
<div class="sub-heading">
我是副标题
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde ea consequuntur sit, aliquid ducimus temporibus ullam neque officia reprehenderit, qui consectetur molestias eligendi adipisci nam sequi porro. Accusantium, ea obcaecati.
</p>
</div>
</div>
<div class="article-preview">
<div class="text-section">
<h2>又一个标题</h2>
<div class="sub-heading">
我是副标题
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde ea consequuntur sit, aliquid ducimus temporibus ullam neque officia reprehenderit, qui consectetur molestias eligendi adipisci nam sequi porro. Accusantium, ea obcaecati.
</p>
</div>
<div class="img-section">
<img src="images/pic02.jpg" alt="">
</div>
</div>
<div class="article-preview">
<div class="img-section">
<img src="images/pic03.jpg" alt="">
</div>
<div class="text-section">
<h2>又一个标题</h2>
<div class="sub-heading">
我是副标题
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde ea consequuntur sit, aliquid ducimus temporibus ullam neque officia reprehenderit, qui consectetur molestias eligendi adipisci nam sequi porro. Accusantium, ea obcaecati.
</p>
</div>
</div>
</section>
<section class="purple-section">
<div class="heading-wrapper">
<h2>又一个标题</h2>
<div class="hr">
</div>
<div class="sub-heading">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit rerum modi, sint asperiores non minima distinctio rem doloremque, harum facere, quae facilis dolore. Eum saepe dignissimos officiis sapiente ex, ut.
</div>
<div class="card-group clearfix">
<div class="card">
<h3>
标题三
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, vitae. Adipisci at neque odit molestiae, necessitatibus vel debitis provident blanditiis laboriosam ut, soluta minima, nulla illo explicabo tenetur id perspiciatis!
</p>
</div>
<div class="card">
<h3>
标题三
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, vitae. Adipisci at neque odit molestiae, necessitatibus vel debitis provident blanditiis laboriosam ut, soluta minima, nulla illo explicabo tenetur id perspiciatis!
</p>
</div>
</div>
</div>
</section>
</div>
</div>
<!--页脚-->
<footer>
<div>
<ul>
<li>链接1</li>
<li>链接2</li>
<li>链接3</li>
<li>链接4</li>
</ul>
</div>
<div>
</div>
</footer>
</body>
</html>
静态博客的样式。
