<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css网页布局案例</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- 头部 -->
<div class="header">
<div class="logo">
<img src="image/logo.png" alt="logo">
</div>
<div class="nav">
<ul>
<li>首页</li>
<li>图片</li>
<li>视频</li>
<li>手记</li>
</ul>
</div>
</div>
<!-- 主体 -->
<div class="main">
<div class="top">
<img src="image/1.jpeg">
</div>
<!-- 遮罩层 -->
<div class="topLayer"></div>
<div class="topLayer-top">
<div class="word">MY BEAUTIFUL LIFE</div>
<button>LOOK MORE ></button>
</div>
<!-- 中间部分 -->
<div class="middle">
<div class="m-top">
<div class="commen weibo">
<img src="image/weibo.png">
<div>MICROBLOG</div>
</div>
<div class="commen weixin">
<img src="image/weixin.png">
<div>WECHAT</div>
</div>
<div class="commen qq">
<img src="image/qq.png">
<div>QQ</div>
</div>
</div>
<div class="clear"></div>
<div class="m-middle">
“I want to give good things to record down,<br>after the recall will be very beautiful.”
</div>
<div class="m-bottom">
<div class="m-com">
<img src="image/03-01.jpg">
<div class="des1">cool Image</div>
<div class="des2">Record The Picture</div>
</div>
<div class="m-com">
<img src="image/03-02.jpg">
<div class="des1">cool Image</div>
<div class="des2">Record The Picture</div>
</div>
<div class="m-com">
<img src="image/03-03.jpg">
<div class="des1">cool Image</div>
<div class="des2">Record The Picture</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="bottom">
<div class="content">
<div class="title">
FROM THE PHOTO ALBUM
</div>
<div class="pic-content">
<dl>
<dt><img src="image/04-01.jpg"></dt>
<dd class="word">Life is like a book,just read more and more refined,more write more carefully.Life is like a book,just read more and more refined,more write more carefully.Life is like a book,just read more and more refined,more write more carefully.</dd>
</dl>
<dl>
<dt><img src="image/04-02.jpg"></dt>
<dd class="word">Life is like a book,just read more and more refined,more write more carefully.Life is like a book,just read more and more refined,more write more carefully.Life is like a book,just read more and more refined,more write more carefully.</dd>
</dl>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<!-- 底部 -->
<div class="footer">
</div>
</body>
</html>