blog.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="blog..css">
</head>
<body>
<div class="bolg-left left">
<div class="blog-head">
<img src="https://pic.cnblogs.com/avatar/1402974/20180517225438.png" alt="">
</div>
<div class="blog-title">
<p>洋洋的博客</p>
</div>
<div class="blog-info">
<p>等下我就锤爆你的头!</p>
<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-essay">
<ul>
<li><a href="">#Python</a></li>
<li><a href="">#Linux</a></li>
<li><a href="">#WEB</a></li>
</ul>
</div>
<div class="blog-hobbies">
<p>爱好: 学习 学习 还是学习</p>
</div>
<div class="blog-foot">
<p>Copyright◎2020 Yumi.All Rights Reserved.</p>
</div>
</div>
<div class="blog-right right">
<div class="day">
<div class="day-title clearfix">
<span class="left">上海一大叔开玩具卡丁车上班被罚</span>
<span class="right">发布日期: 2020/05/14</span>
</div>
<div class="day-content">
<p>上海一大叔本来在家带孙子，因为有急事要赶去公司，懒得打车于是就开着孙子的玩具车上路了。经警方确认，该车是由两轮平衡车和卡丁车套件组装，并无牌照，最终罚款1000元。</p>
</div>
<div class="day-bottom">
<p># 2019年度搞笑新闻最全合集：原来高手真的在民间！</p>
</div>
</div>
<div class="day">
<div class="day-title clearfix">
<span class="left">上海一大叔开玩具卡丁车上班被罚</span>
<span class="right">发布日期: 2020/05/14</span>
</div>
<div class="day-content">
<p>上海一大叔本来在家带孙子，因为有急事要赶去公司，懒得打车于是就开着孙子的玩具车上路了。经警方确认，该车是由两轮平衡车和卡丁车套件组装，并无牌照，最终罚款1000元。</p>
</div>
<div class="day-bottom">
<p># 2019年度搞笑新闻最全合集：原来高手真的在民间！</p>
</div>
</div>
<div class="day">
<div class="day-title clearfix">
<span class="left">上海一大叔开玩具卡丁车上班被罚</span>
<span class="right">发布日期: 2020/05/14</span>
</div>
<div class="day-content">
<p>上海一大叔本来在家带孙子，因为有急事要赶去公司，懒得打车于是就开着孙子的玩具车上路了。经警方确认，该车是由两轮平衡车和卡丁车套件组装，并无牌照，最终罚款1000元。</p>
</div>
<div class="day-bottom">
<p># 2019年度搞笑新闻最全合集：原来高手真的在民间！</p>
</div>
</div>
<div class="day">
<div class="day-title clearfix">
<span class="left">上海一大叔开玩具卡丁车上班被罚</span>
<span class="right">发布日期: 2020/05/14</span>
</div>
<div class="day-content">
<p>上海一大叔本来在家带孙子，因为有急事要赶去公司，懒得打车于是就开着孙子的玩具车上路了。经警方确认，该车是由两轮平衡车和卡丁车套件组装，并无牌照，最终罚款1000元。</p>
</div>
<div class="day-bottom">
<p># 2019年度搞笑新闻最全合集：原来高手真的在民间！</p>
</div>
</div>
<div class="day">
<div class="day-title clearfix">
<span class="left">上海一大叔开玩具卡丁车上班被罚</span>
<span class="right">发布日期: 2020/05/14</span>
</div>
<div class="day-content">
<p>上海一大叔本来在家带孙子，因为有急事要赶去公司，懒得打车于是就开着孙子的玩具车上路了。经警方确认，该车是由两轮平衡车和卡丁车套件组装，并无牌照，最终罚款1000元。</p>
</div>
<div class="day-bottom">
<p># 2019年度搞笑新闻最全合集：原来高手真的在民间！</p>
</div>
</div>
</div>
</body>
</html>
blog.css
/*清除默认样式*/
* {
margin: 0;
padding: 0;
list-style-type: none;
}
a {
text-decoration: none;
}
/*清除浮动*/
.clearfix:after {
content: '';
display: block;
clear: both;
}
/*全局设置*/
html,body {
width: 100%;
height: 100%;
font-family: 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace;
font-size: 18px;
font-weight: bolder;
}
a {
color: black;
}
a:hover {
color: #ff6700;
}
.left {
float: left;
}
.right {
float: right;
}
/*左侧设置*/
.bolg-left {
width: 20%;
height: 100%;
background-color: #e0e0e0;
text-align: center;
}
.bolg-left .blog-head {
width: 200px;
height: 200px;
border-radius: 50%;
border: 3px solid whitesmoke;
margin: 50px auto;
overflow: hidden;
}
.bolg-left .blog-head>img {
/*width: 100%;*/
max-width: 100%;
}
.blog-title, .blog-info, .blog-link, .blog-essay, .blog-hobbies{
margin-bottom: 60px;
}
.bolg-left .blog-title {
font-size: 32px;
}
.blog-left .blog-info p{
padding: 5px 0;
}
.blog-link li, .blog-essay li {
padding: 4px 0;
}
.bolg-left .blog-foot {
font-size: 16px;
}
/*右侧设置*/
.blog-right {
width: 80%;
height: 100%;
background-color: #e8e7e4;
}
.blog-right .day {
width: 95%;
height: 200px;
background-color: #cccccc;
border-radius: 5px 5px;
margin: 20px auto;
/*box-shadow: 5px 5px 5px 5px #acacac;*/
}
.blog-right .day:hover {
box-shadow: 5px 5px 5px 5px #acacac;
/*top: -3px;*/
bottom: 3px;
}
.blog-right .day .day-title {
background-color: #b0b0b0;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.blog-right .day .day-title .left,.blog-right .day .day-title .right {
height: 40px;
line-height: 50px;
margin-bottom: 20px;
}
.blog-right .day .day-title .left {
text-indent: 1em;
border-left: 10px solid red;
border-radius: 5px 5px;
}
.blog-right .day .day-title .right {
margin-right: 10px;
}
.blog-right .day .day-content, .blog-right .day .day-bottom {
background-color: #fff;
opacity: 0.8;
}
.blog-right .day .day-content {
height: 100px;
border-bottom: 2px solid silver;
}
.blog-right .day .day-content p {
text-indent: 1em;
/*padding-top: 10px;*/
padding: 40px 20px 20px;
}
.blog-right .day .day-bottom {
height: 40px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
line-height: 40px;
}
.blog-right .day .day-bottom p {
text-indent: 1em;
font-size: 16px
}
