HTML
```
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="blog.css" />
<meta charset="utf-8">
<meta name="怪默啊">
<title>blog home</title>
</head>
<body>
<div class="banner">
<h1>北方的国</h1>
<h2>身体和灵魂总要有一个在路上</h2>
</div>
<div class="allBox">
<div class="navi" >
<table>
<tr>
<td class="td1"><a href="#">首页</a></td>
<td class="td1"><a href="#">标签</a></td>
<td class="td1"><a href="#">分类</a></td>
<td class="td1"><a href="#">关于我</a></td>
</tr>
</table>
</div>
<div class="mainly">
<div class="content">
<div class="text">
<h3 class="center textTitle"><b>壹</b></h3>
<div class="poem">
<p class="center">不要问</p><br>
<p class="center">你我的时日</p><br>
<p class="center">大帛斑蝶</p><br>
<p class="center">这是个秘密，我们无法理解</p><br>
<p class="center">不要尝试深奥的计算</p><br>
</div>
<h3 class="center textTitle"><b>贰</b></h3>
<div class="poem">
<p class="center">雪的白色</p><br>
<p class="center">消失了</p><br>
<p class="center">绿色归来</p><br>
<p class="center">在旷野的绿草中</p><br>
<p class="center">在森林的绿荫下</p><br>
<p class="center">春天空气的芳芳</p><br>
<p class="center">又与我们在一起</p><br>
<p class="center">季节如此循环</p><br>
<p class="center">流逝的光阴盗走光芒</p><br>
<p class="center">传来讯息</p><br>
<p class="center">不朽，于我们，觉悟可能</p><br>
<p class="center">暖风之后</p><br>
<p class="center">必是严寒</p><br>
</div>
</div>
<div class="sideBox">
<div class="readingList">
<h4><b>阅读排行榜</b></h4>
<ol>
<li class="listText"><a href="#">容器折叠与清除浮动</a></li>
<li class="listText"><a href="#">出乎意料的"浮动陷阱"</a></li>
<li class="listText"><a href="#">媒体对象和BFC</a></li>
<li class="listText"><a href="#">网格系统</a></li>
<li class="listText"><a href="#">流式布局</a></li>
<li class="listText"><a href="#">响应式图片</a></li>
<li class="listText"><a href="#">CSS方法论</a></li>
<li class="listText"><a href="#">非动画属性</a></li>
</ol>
</div>
<div class="recommendList">
<h4><b>推荐排行榜</b></h4>
<ul>
<li class="listText"><a href="#">容器折叠与清除浮动</a></li>
<li class="listText"><a href="#">显示与隐式网格</a></li>
<li class="listText"><a href="#">出乎意料的"浮动陷阱"</a></li>
<li class="listText"><a href="#">CSS方法论</a></li>
</ul>
</div>
<div class="data">
<h4><b>日期索引</b></h4>
<ul>
<li class="listText"><a href="#">2010.08.04</a></li>
<li class="listText"><a href="#">2010.08.15</a></li>
<li class="listText"><a href="#">2010.08.24</a></li>
<li class="listText"><a href="#">2020.09.01</a></li>
<li class="listText"><a href="#">2020.09.08</a></li>
<li class="listText"><a href="#">2020.09.11</a></li>
<p class="datamore"><a href="#"><sub>更多</sub></a></p>
</ul>
</div>
</div>
<div class="footer">
<p class="center" style="">Copyright © 2020 <a href="#">怪默</a> 版权所有</p>
</div>
</div>
</div>
</div>
<div id="bg-pho"></div>
</body>
</html>
```CSS
```
@charset "utf-8";
/* CSS Document */
*{
padding: 0;
margin: 0;
}
#bg-pho{
background-image: url("home-bg-2-dark.jpg");
position:fixed;
top: 0;left: 0;
width:100%;height:100%;
z-index:-10;
background-size: cover;
}
h1{
padding-top: 25px;
padding-left: 104px;
font-size: 30px;
color: aliceblue;
}
h2{
padding-top: 10px;
padding-left: 180px;
font-size: 15px;
color:aliceblue;
}
.allBox{
background:white;
margin-left: auto;
margin-right: auto;
margin-top: 60px;
padding: 0px;
width: 1110px;
}
.navi{
margin-left: auto;
margin-right: auto;
margin-top: 27px;
font-size: 13px;
background: #101F26;
height: 60px;
}
.td1{
display: block;
padding-right: 50px;
margin-top: 20px;
margin-left: 30px;
float: left;
}
a{
text-decoration: none;
color: white;
}
ul a{
color:black;
}
Ol a{
color:black;
}
a:hover{
color:red;
}
.sideBox{
float: left;
width:30%;
height: 975px;
background-color: azure;
}
.text{
float: left;
width:70%;
height: 975px;
background: white;
}
.textTitle{
margin-top: 20px;
padding-top: 20px;
}
.poem{
margin-top: 50px;
width: 100%;
color:hsla(359,25%,47%,1.00);
}
.center{
text-align: center;
padding-left: auto;
padding-right: auto;
}
.readingList{
margin: 40px;
padding: 40px;
width: 100%;
padding-right: 50px;
}
.recommendList{
margin: 40px;
padding: 40px;
width: 100%;
padding-right: 50px;
}
.data{
margin: 40px;
padding: 40px;
width: 100%;
padding-right: 50px;
}
.listText{
margin-top: 5px;
margin-left: 40px;
}
.datamore{
margin-right: 160px;
float:right;
}
.footer{
margin-left: auto;
margin-right: auto;
height: 100px;
color: aliceblue;
font-size:13px;
background: #101F26;
}
```
```
