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;
}