html代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>哪吒的博客</title>
<link rel="stylesheet" href="blog.css">
<link rel="stylesheet" href="../../day46/blog.css">
</head>
<body>
<!--这是左边开始-->
<div id="left">
<div id="touxiang">
<img src="hlw.png" alt="">
</div>
<div id="name">哪吒</div>
<div id="introduction">这个人很懒，什么都没有留下</div>
<div id="info">
<ul>
<li><a href="">微信</a></li>
<li><a href="">QQ</a></li>
<li><a href="">手机号</a></li>
</ul>
</div>
<div id="tag">
<ul>
<li><a href="">#python</a></li>
<li><a href="">#java</a></li>
<li><a href="">#php</a></li>
</ul>
</div>
</div>
<!--这是左边结束-->
<!--这是右边开始-->
<div id="right">
<div class="artical">
<div class="articalf_head">
<div class="artical_title"><a href="">海燕</a></div>
<div class="artical_time">2018-10-11</div>
</div>
<div class="artical_content">
在那苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。
</div>
<div class="artical_tag">
<span>#HTML #CSS</span>
</div>
</div>
<div class="artical">
<div class="articalf_head">
<div class="artical_title"><a href="">海燕</a></div>
<div class="artical_time">2018-10-11</div>
</div>
<div class="artical_content">
在那苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。
</div>
<div class="artical_tag">
<span>#HTML #CSS</span>
</div>
</div>
<div class="artical">
<div class="articalf_head">
<div class="artical_title"><a href="">海燕</a></div>
<div class="artical_time">2018-10-11</div>
</div>
<div class="artical_content">
在那苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。
</div>
<div class="artical_tag">
<span>#HTML #CSS</span>
</div>
</div>
<div class="artical">
<div class="articalf_head">
<div class="artical_title"><a href="">海燕</a></div>
<div class="artical_time">2018-10-11</div>
</div>
<div class="artical_content">
在那苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。
</div>
<div class="artical_tag">
<span>#HTML #CSS</span>
</div>
</div>
<div class="artical">
<div class="articalf_head">
<div class="artical_title"><a href="">海燕</a></div>
<div class="artical_time">2018-10-11</div>
</div>
<div class="artical_content">
在那苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。
</div>
<div class="artical_tag">
<span>#HTML #CSS</span>
</div>
</div>
<div class="artical">
<div class="articalf_head">
<div class="artical_title"><a href="">海燕</a></div>
<div class="artical_time">2018-10-11</div>
</div>
<div class="artical_content">
在那苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。
</div>
<div class="artical_tag">
<span>#HTML #CSS</span>
</div>
</div>
<div class="artical">
<div class="articalf_head">
<div class="artical_title"><a href="">海燕</a></div>
<div class="artical_time">2018-10-11</div>
</div>
<div class="artical_content">
在那苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。
</div>
<div class="artical_tag">
<span>#HTML #CSS</span>
</div>
</div>
<div class="artical">
<div class="articalf_head">
<div class="artical_title"><a href="">海燕</a></div>
<div class="artical_time">2018-10-11</div>
</div>
<div class="artical_content">
在那苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。
</div>
<div class="artical_tag">
<span>#HTML #CSS</span>
</div>
</div>
</div>
<!--这是右边结束-->
</body>
</html>
css代码如下
*{
margin: 0;
padding: 0;
text-decoration: none;
}
#left{
float: left;
width: 20%;
color: #eee;
background-color: #3d3d3d;
position: fixed;
top: 0;
bottom: 0;
}
#touxiang{
width: 120px;
height: 120px;
border: 4px solid red;
border-radius: 50%;
overflow: hidden;
margin: 0 auto;
}
#touxiang>img{
width: 100%;
}
#name{
color: white;
font-size: 20px;
font-weight: bold;
height: 40px;
line-height: 40px;
text-align: center;
}
#left a{
color: grey;
font-size: 12px;
}
#left a:hover{
color: white;
}
#info,#tag{
text-align: center;
margin: 20px auto;
}
#right{
width: 80%;
float: right;
background: #eee;
}
.artical{
margin: 10px;
background: white;
}
.artical:hover{
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
transform: translate3d(0,-2px,0);
transition: all .2s linear;
}
.articalf_head{
border-left: 4px solid red;
}
.articalf_head:after{
content: '';
width: 100%;
display: block;
clear: both;
}
.artical_title{
float: left;
margin: 10px 20px;
}
.artical_title a{
font-size: 18px;
font-weight: bold;
color: black;
}
.artical_time{
margin: 10px 20px;
font-size: 14px;
float: right;
}
.artical_content{
padding: 20px;
border-bottom: 1px solid #eee;
}
.artical_tag{
margin: 20px;
font-size: 16px;
}
效果图
