<!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_avatar"><img src="https://img1.baidu.com/it/u=1498119499,319941244&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1670173200&t=88c458b211903e3516758095fbaa6e4f" alt=""></div>
<div class="blog_info">
<span>小福的博客</span>
</div>
<div class="blog_desc">
<span>我非常的爱学习 学习使我快乐</span>
</div>
<div class="blog_link">
<ul>
<li><a href="https://www.cnblogs.com/xiao-fu-zi/p/16942786.html" target="_blank">联系我</a></li>
<li><a href="https://www.cnblogs.com/xiao-fu-zi/p/16942786.html" target="_blank">点击我</a></li>
<li><a href="https://www.cnblogs.com/xiao-fu-zi/p/16942786.html" target="_blank">戳动我</a></li>
</ul>
</div>
<div class="blog_read">
<ul>
<li><a href="https://www.cnblogs.com/xiao-fu-zi/p/16939287.html">#前端知识</a></li>
<li><a href="https://www.cnblogs.com/xiao-fu-zi/p/16939287.html">#后端知识</a></li>
<li><a href="https://www.cnblogs.com/xiao-fu-zi/p/16939287.html">#java编程</a></li>
</ul>
</div>
</div>
<div class="blog_right">
<div class="blog_list">
<div class="article_title">
<span class="c1">学习使我快乐</span>
<span class="date">2022/12/02</span>
</div>
<div class="article_desc">
<span>论如何才能变得有钱</span>
</div>
<div class="article_end">
<span>好好学</span>
<span>学得好</span>
</div>
</div>
<div class="blog_list">
<div class="article_title">
<span class="c1">怎么高效学习</span>
<span class="date">2022/12/02</span>
</div>
<div class="article_desc">
<span>如何高效学习学习学学学习瑞幸</span>
</div>
<div class="article_end">
<span>好好学</span>
<span>学得好</span>
</div>
</div>
<div class="blog_list">
<div class="article_title">
<span class="c1">怎么高效学习</span>
<span class="date">2022/12/02</span>
</div>
<div class="article_desc">
<span>如何高效学习学习学学学习瑞幸</span>
</div>
<div class="article_end">
<span>好好学</span>
<span>学得好</span>
</div>
</div>
<div class="blog_list">
<div class="article_title">
<span class="c1">怎么高效学习</span>
<span class="date">2022/12/02</span>
</div>
<div class="article_desc">
<span>如何高效学习学习学学学习瑞幸</span>
</div>
<div class="article_end">
<span>好好学</span>
<span>学得好</span>
</div>
</div>
<div class="blog_list">
<div class="article_title">
<span class="c1">怎么高效学习</span>
<span class="date">2022/12/02</span>
</div>
<div class="article_desc">
<span>如何高效学习学习学学学习瑞幸</span>
</div>
<div class="article_end">
<span>好好学</span>
<span>学得好</span>
</div>
</div>
<div class="blog_list">
<div class="article_title">
<span class="c1">怎么高效学习</span>
<span class="date">2022/12/02</span>
</div>
<div class="article_desc">
<span>如何高效学习学习学学学习瑞幸</span>
</div>
<div class="article_end">
<span>好好学</span>
<span>学得好</span>
</div>
</div>
<div class="blog_list">
<div class="article_title">
<span class="c1">怎么高效学习</span>
<span class="date">2022/12/02</span>
</div>
<div class="article_desc">
<span>如何高效学习学习学学学习瑞幸</span>
</div>
<div class="article_end">
<span>好好学</span>
<span>学得好</span>
</div>
</div>
</div>
</body>
</html>
body {
margin: 0;
background-color: #eeeeee;
}
a {
text-decoration: none;
}
ul {
list-style-type: none;
}
.blog_left {
background-color: #4e4e4e;
width: 20%;
height: 100%;
float: left;
position: fixed;
left: 0;
top: 0;
}
.blog_avatar {
border: solid white 2px;
width: 150px;
height: 150px;
border-radius: 50%;
margin: 0 auto;
margin-top: 20px;
overflow: hidden;
}
.blog_avatar img {
max-height: 100%;
}
.blog_info,.blog_desc {
color: darkgray;
text-align: center;
margin: 10px auto;
}
.blog_link {
position: relative;
left: 40px;
top: 40px;
}
.blog_read {
position: relative;
left: 20px;
bottom: -80px;
}
.blog_link a,.blog_read a {
color: darkgray;
font-size: 24px;
text-align: center;
}
.blog_link a:hover,.blog_read a:hover {
color: white;
}
/* 右边样式 */
.blog_right {
float: right;
width: 80%;
height: 100%;
}
.blog_list {
background-color: white;
margin: 15px 5px 10px 5px;
box-shadow: 10px 10px 10px 10px #888888;
}
.blog_right .blog_list .article_title .c1 {
font-size: 48px;
border-left: solid 6px red;
padding-left: 10px;
}
.blog_right .blog_list .article_title .date {
font-size: 18px;
font-weight: bolder;
float: right;
margin: 20px;
}
.article_desc {
font-weight: lighter;
text-indent: 20px;
font-size: 20px;
border-bottom: 2px solid black;
}
.article_end {
padding: 10px 20px 10px 20px
