下面是一个简单的页面布局。注意发现页面的布局特点，注意使用居中，浮动等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.header {
width: 500px;
height: 100px;
background-color: greenyellow;
margin: 0 auto; /* 居中*/
}
.content {
width: 500px;
height: 300px;
background-color: pink;
margin: 0 auto;
}
.left {
width: 100px;
height: 300px;
background-color: orange;
float: left;
}
.center {
width: 300px;
height: 300px;
background-color: #bfa;
float: left;
}
.right {
width: 100px;
height: 300px;
background-color: yellow;
float: left;
}
.footer {
width: 500px;
height: 100px;
background-color: red;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="content">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</body>
</html>结果：
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。