html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="blog.css">
</head>
<body>
<div>
<!--左侧 开始 -->
<div class="left">
<div class="avatar">
<img src="hlw.png" alt="">
</div>
<div class="blog-title">哪吒的Blog</div>
<div class="blog-info">这个人很懒，什么都没有留下。</div>
<div class="blog-link">
<ul>
<li><a href="">关于我</a></li>
<li><a href="">微博</a></li>
<li><a href="">公众号</a></li>
</ul>
</div>
<div class="blog-tag">
<ul>
<li><a href=""># JavaScript</a></li>
<li><a href=""># Python</a></li>
<li><a href=""># Golang</a></li>
</ul>
</div>
</div>
<!--左侧 结束 -->
<!--右侧 开始 -->
<div class="right">
<div class="article-list">
<div class="article">
<div class="article-top">
<div class="article-title">海燕<span class="article-date">2019-7-18</span></div>
</div>
<div class="article-middle">
<p>在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔。</p>
</div>
<div class="article-bottom">
<span># HTML</span>
<span># CSS</span>
</div>
</div>
<div class="article">
<div class="article-top">
<div class="article-title">海燕<span class="article-date">2019-7-18</span></div>
</div>
<div class="article-middle">
<p>在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔。</p>
</div>
<div class="article-bottom">
<span># HTML</span>
<span># CSS</span>
</div>
</div>
<div class="article">
<div class="article-top">
<div class="article-title">海燕<span class="article-date">2019-7-18</span></div>
</div>
<div class="article-middle">
<p>在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔。</p>
</div>
<div class="article-bottom">
<span># HTML</span>
<span># CSS</span>
</div>
</div>
<div class="article">
<div class="article-top">
<div class="article-title">海燕<span class="article-date">2019-7-18</span></div>
</div>
<div class="article-middle">
<p>在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔。</p>
</div>
<div class="article-bottom">
<span># HTML</span>
<span># CSS</span>
</div>
</div>
</div>
<!--右侧 结束 -->
</div>
</body>
</html>
CSS文件
/*这是blog页面的css文件*/
body {
margin: 0;
}
a {
text-decoration: none;
}
/*去掉 ul标签的默认样式*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
/*blog 左侧样式区*/
.left {
position:fixed;
left: 0;
top: 0;
background-color: #4d4d4d;
height: 100%;
width: 20%;
}
/* 头像 */
.avatar{
height: 100px;
width: 100px;
border: 3px solid white;
border-radius: 50%;
overflow: hidden;
margin: 20px auto;
}
.avatar>img {
width: 100%;
}
/* blog标题 */
.blog-title {
text-align: center;
color: rgb(238,238,238);
font-weight: bold;
}
/*blog简介*/
.blog-info{
text-align: center;
margin: 25px 0;
font-size: 12px;
color: rgb(238,238,238);
}
.blog-tag li,
.blog-link li{
text-align: center;
}
.blog-link a,
.blog-tag a{
color: rgb(136,136,136);
font-size: 14px;
}
.blog-tag {
margin-top: 15px;
}
.blog-link a:hover,
.blog-tag a:hover{
color:white;
}
/*blog 右侧样式区*/
.right {
width: 80%;
float: right;
background-color: #eeeeee;
}
/*文章列表*/
.article-list{
margin:20px 10% 20px 20px;
}
/*文章*/
.article{
background-color: white;
margin-bottom: 20px;
}
.article:hover{
box-shadow: 0 3px 6px;
transform: translate3d(0,-3px,0);
transition: all 300ms linear;
}
/*文章顶部*/
.article-date{
float: right;
font-size:16px;
font-weight: normal;
}
.article-title{
border-left: 5px solid red;
font-size: 24px;
font-weight: bold;
padding: 15px 20px;
}
/*文章中间部分*/
.article-middle{
padding: 10px 20px;
}
/*文章底部*/
.article-bottom{
border-top: 1px solid #eee;
margin: 0 20px;
padding: 15px 0;
}
.article-bottom span{
font-size: 14px;
}
运行结果
