/*html文件*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="blog.css">
</head>
<body>
<div class="blog-left">
<div class="blog-avatar">
<img src="葫芦2.jpg" alt="">
</div>
<div class="blog-title">
<p>Annie的博客</p>
</div>
<div class="blog-info">
<p>
孔雀东南飞，
五里一徘徊，
十里落下来。
</p>
</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="">#Python</a></li>
<li><a href="">#PHP</a></li>
<li><a href="">#Golang</a></li>
</ul>
</div>
</div>
<div class="blog-right">
<div class="article-list">
<div class="article-title">
<span class="title">婚庆主持</span>
<span class="date">2019/11/17</span>
</div>
<div class="article-content">
<p>烈日炎炎，麻雀满天飞，在这老母猪发情，大狼狗走草的季节，正是结婚的好时候。</p>
<!--<hr>-->
</div>
<div class="article-bottom">
<!--调节两个之间的间隔-->
<span>#python </span>
<span># JavaScript</span>
</div>
</div>
<div class="article-list">
<div class="article-title">
<span class="title">婚庆主持</span>
<span class="date">2019/11/17</span>
</div>
<div class="article-content">
<p>烈日炎炎，麻雀满天飞，在这老母猪发情，大狼狗走草的季节，正是结婚的好时候。</p>
<!--<hr>-->
</div>
<div class="article-bottom">
<!--调节两个之间的间隔-->
<span>#python </span>
<span># JavaScript</span>
</div>
</div>
<div class="article-list">
<div class="article-title">
<span class="title">婚庆主持</span>
<span class="date">2019/11/17</span>
</div>
<div class="article-content">
<p>烈日炎炎，麻雀满天飞，在这老母猪发情，大狼狗走草的季节，正是结婚的好时候。</p>
<!--<hr>-->
</div>
<div class="article-bottom">
<!--调节两个之间的间隔-->
<span>#python </span>
<span># JavaScript</span>
</div>
</div>
<div class="article-list">
<div class="article-title">
<span class="title">婚庆主持</span>
<span class="date">2019/11/17</span>
</div>
<div class="article-content">
<p>烈日炎炎，麻雀满天飞，在这老母猪发情，大狼狗走草的季节，正是结婚的好时候。</p>
<!--<hr>-->
</div>
<div class="article-bottom">
<!--调节两个之间的间隔-->
<span>#python </span>
<span># JavaScript</span>
</div>
</div>
<div class="article-list">
<div class="article-title">
<span class="title">婚庆主持</span>
<span class="date">2019/11/17</span>
</div>
<div class="article-content">
<p>烈日炎炎，麻雀满天飞，在这老母猪发情，大狼狗走草的季节，正是结婚的好时候。</p>
<!--<hr>-->
</div>
<div class="article-bottom">
<!--调节两个之间的间隔-->
<span>#python </span>
<span># JavaScript</span>
</div>
</div>
<div class="article-list">
<div class="article-title">
<span class="title">婚庆主持</span>
<span class="date">2019/11/17</span>
</div>
<div class="article-content">
<p>烈日炎炎，麻雀满天飞，在这老母猪发情，大狼狗走草的季节，正是结婚的好时候。</p>
<!--<hr>-->
</div>
<div class="article-bottom">
<!--调节两个之间的间隔-->
<span>#python </span>
<span># JavaScript</span>
</div>
</div>
<div class="article-list">
<div class="article-title">
<span class="title">婚庆主持</span>
<span class="date">2019/11/17</span>
</div>
<div class="article-content">
<p>烈日炎炎，麻雀满天飞，在这老母猪发情，大狼狗走草的季节，正是结婚的好时候。</p>
<!--<hr>-->
</div>
<div class="article-bottom">
<!--调节两个之间的间隔-->
<span>#python </span>
<span># JavaScript</span>
</div>
</div>
<div class="article-list">
<div class="article-title">
<span class="title">婚庆主持</span>
<span class="date">2019/11/17</span>
</div>
<div class="article-content">
<p>烈日炎炎，麻雀满天飞，在这老母猪发情，大狼狗走草的季节，正是结婚的好时候。</p>
<!--<hr>-->
</div>
<div class="article-bottom">
<!--调节两个之间的间隔-->
<span>#python </span>
<span># JavaScript</span>
</div>
</div>
</div>
</body>
</html>
/* css样式文件*/
/* 文件名：blog.css */
/* 这是博客园首页样式文件*/
/* 通用样式*/
body {
margin: 0;
background-color: #eeeeee;
}
a {
/*去掉文字的下划线*/
text-decoration: none;
}
ul {
/*去掉文字前面的小黑点*/
list-style-type: none;
/*去掉文字前面的空格*/
padding: 0;
}
/* 这是博客园左侧样式*/
.blog-left {
background-color: #4e4e4e;
height: 100%;
width: 20%;
float: left;
position:fixed;
}
.blog-avatar {
height: 150px;
width: 150px;
border: 3px white solid;
border-radius: 50%;
/*上下20px，左右自动适应*/
margin: 20px auto;
overflow: hidden;
}
.blog-avatar img {
max-width: 100%;
}
.blog-title {
font-size: 18px;
font-weight: bold;
color:darkgray;
text-align: center;
}
.blog-info {
font-size: 14px;
color:darkgray;
text-align: center;
}
.blog-link a,.blog-tag a{
color:darkgray;
}
.blog-link a:hover,.blog-tag a:hover {
color:white;
}
.blog-link ul,.blog-tag ul {
text-align: center;
/*设置标签blog-info、blog-link及blog-tag之间的外边距（margin）*/
margin: 60px auto;
}
/* 这是博客园右侧样式*/
.blog-right {
height: 100%;
width: 80%;
float: right;
}
.article-list {
background-color: white;
margin: 20px 40px 20px 10px;
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5);
}
.article-title {
border-left: 3px solid red;
}
/*两个点之间要空一格，不然没有效果*/
.article-title .title {
font-size: 36px;
font-weight: bold;
margin-left: 36px ;
}
.article-title .date {
float: right;
margin: 20px ;
}
.article-content p {
text-indent: 36px;
/*在内容下加一条水平线，也可以在article-content 的div标签内对应内容下面加<hr>*/
border-bottom: 2px solid lightgray;
padding-bottom: 15px;
}
.article-bottom {
padding:5px 20px 5px 20px;
}
