<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>博客园页面</title>
<link rel="stylesheet" href="blog.css">
</head>
<body>
<div class = "blog-left" >
<div class = "blog-avator">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2F50%2Fv2-5eb2cc0689065b097d1f57860c6f7e60_hd.jpg&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656140006&t=18e31a28254fc0dde0f36269873a8df5" alt="">
</div>
<div class = "blog-title">
<p>老司机的博客</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="">#Java</a></li>
<li><a href="">#Golang</a></li>
</ul>
</div>
</div>
<div class= "blog-right" >
<div class = "article">
<div class = "article-tittle">
<span class =titile>论开车的重要性</span>
<span class = data>2020/5/14</span>
</div>
<div class = article-body>
<p>Janson老师！</p>
</div>
<div class = article-bottom>
<span>#Python</span>  <span>#JavaScript</span>
</div>
</div>
<div class = "article">
<div class = "article-tittle">
<span class =titile>论开车的重要性</span>
<span class = data>2020/5/14</span>
</div>
<div class = article-body>
<p>Janson老师！</p>
</div>
<div class = article-bottom>
<span>#Python</span>  <span>#JavaScript</span>
</div>
</div>
<div class = "article">
<div class = "article-tittle">
<span class =titile>论开车的重要性</span>
<span class = data>2020/5/14</span>
</div>
<div class = article-body>
<p>Janson老师！</p>
</div>
<div class = article-bottom>
<span>#Python</span>  <span>#JavaScript</span>
</div>
</div>
<div class = "article">
<div class = "article-tittle">
<span class =titile>论开车的重要性</span>
<span class = data>2020/5/14</span>
</div>
<div class = article-body>
<p>Janson老师！</p>
</div>
<div class = article-bottom>
<span>#Python</span>  <span>#JavaScript</span>
</div>
</div>
<div class = "article">
<div class = "article-tittle">
<span class =titile>论开车的重要性</span>
<span class = data>2020/5/14</span>
</div>
<div class = article-body>
<p>Janson老师！</p>
</div>
<div class = article-bottom>
<span>#Python</span>  <span>#JavaScript</span>
</div>
</div>
</div>
</body>
</html>
css:
/*博客园首页样式文件*/
/*通用样式*/
body{
margin: 0;
background-color: #eeeeee;
}
a{
text-decoration: None;
}
ul{
list-style: none;
padding-left: 0;
}
/*左侧从样式*/
.blog-left{
float:left;
width: 20%;
height: 100%;
position: fixed;
background-color: #4e4e4e;
}
.blog-avator{
width: 200px;
height: 200px;
border-radius: 50%;
border: 5px solid white;
margin: 20px auto;
overflow: hidden;
}
.blog-avator img{
max-width: 100%;
}
.blog-title,.blog-info{
color: darkgrey;
font-size: 18px;
text-align: center;
}
.“blog-link”,.blog-tag{
font-size: 24px;
}
.“blog-link” a,.blog-tag a{
color: darkgrey;
}
.“blog-link” a:hover,.blog-tag a:hover{
color: white;
}
ul{
text-align: center;
margin-top:60px;
}
/*右侧样式*/
.blog-right{
float:right;
width: 80%;
height: 100%;
}
.article{
background-color: white;
margin: 20px 40px 10px 10px;
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5);
}
.titile{
font-size: 36px;
font-family: KaiTi;
}
.data{
float: right;
margin:20px ;
font-weight:bolder ;
}
.article-tittle{
border-left: 5px solid red;
text-indent: 1em;
}
.article-body{
font-size: 20px;
text-indent: 39px;
border-bottom: 1px solid black;
}
.article-bottom{
padding: 10px 39px;
font-size: 20px;
}
