SOURCE

console 命令行工具 X clear

                    
>
console
<!DOCTYPE html>
<html lang="zh-CN">
<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">
  <link rel="stylesheet" href="http://cdn.bootcss.com/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="css/main.css">
  <title>胡浩棚</title>
</head>
<body>
  <div class="side-bar">
    <div class="header">
      <a href="index.html" class="logo">胡浩棚</a>
      <div class="intro">博客.</div>
    </div>
    <div class="nav">
      <a href="#" class="item">关于我</a>
      <a href="#" class="item">个人介绍</a>
      <a href="#" class="item">兴趣爱好</a>
    </div>
    <div class="tag-list">
      <a href="#" class="item">电影介绍</a>
      <a href="#" class="item">。。。</a>
      <a href="#" class="item">。。。</a>
    </div>
  </div>
  <div class="main">
    <div class="article-list">
      <div class="item">
        <a href="article.html" class="title">来自东华职业技术学院</a>
        <div class="status">大家好我叫胡浩棚</div>
        <div class="content">
         19岁来自广州的男孩子
        </div>
      </div>
      <div class="item">
        <a href="article.html" class="title">个人兴趣爱好</a>
        <div class="content">
      篮球和打游戏 
        </div>
      </div>
      <div class="item">
        <a href="article.html" class="title">电影介绍</a>
        <div class="status">这是我最近一直在看的一部电视剧叫僵尸国度</div>
        <div class="content">
         故事描述僵尸病毒已经侵袭美国三年时间,这个国家彻底成为僵尸的天下。一个由凡人英雄组成的团队必须护送僵尸危机中
         唯一一名感染病毒但是活下来的人墨菲从纽约前往加州
丧尸国度
丧尸国度
——那里保留着美国唯一能正常运转的病毒实验室,如果能得到这名幸存者的血样,有可能能研制出抗病毒疫苗。在抵达3000英里外的目的地之前,他们必须横跨遍布僵尸的美洲大陆。虽然这名幸存者携带的抗体是人类生存下去的最后希望,但他却隐藏了一个足以毁灭一切的黑暗秘密 [2]  。
在这个后末日时代,他们要面对的危险还远不止吃人的僵尸这么简单。

        </div>
        </div>
      </div>
        </div> 
      </div>
    </div>
  </div>
</body>
</html>
.side-bar
{
  float: left;
  width: 20%;
}
.main{
  float: right;
  width: 80%;

  color: #555;
}
a{
  text-decoration: none;
}
 a ,body{

  color: #eee;
}
body{
  background: #454545;
  line-height: 1.5;
}
.header .logo{
  padding: 10px 20px;
  font-size: 30px;
  display: inline-block;
  border: 5px solid #eee;
  margin-bottom: 10px;
  line-height: 1;
}
.side-bar > *{
  padding: 10px 15px;
}
.side-bar .nav a,
.side-bar .tag-list a{
  display: block;
  padding: 5px;
  color: #777;
}
.side-bar .nav a:hover,
.side-bar .tag-list a:hover{
  transition:

  color: #eee;
}
.side-bar .nav a,
.side-bar .tag-list a{
  font-weight: 700;
}
.article-list{
  margin-right: 30%;
  background: #fff;
  padding: 20px 30px;
}
.article-list .item .title{
  font-size:  22px;
  font-weight: 700;
  color: #454545;
}
.article-list .item .status
{
  font-size: 17px;
  color: #ccc;

}
.article-list .item>*
{
  margin:  10px 0px;
}
.article-list .item{
  margin-bottom: 20px;
}