<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>彩虹小马驹</title>
<style>
body{
margin: 0;
background-color: #eeeeee;
}
#auth{
height: 100%;
width: 20%;
background-color: #4e4d4d;
position: fixed;
color: #a9a9a9;
float: left;
}
#photo {
border: #ffffee 5px solid;
width: 150px;
height: 150px;
border-radius: 50%;
overflow: hidden;
margin-left: 20%;
margin-top: 20px;
}
#photo img{
width: 100%;
}
#auth_motto{
text-align: center;
}
#msg{
text-align: center;
padding-top: 50px;
font-size: 24px;
}
#main{
float: right;
height: 100%;
width: 80%;
background-image: url("background.png");
}
.bar{
background-color: white;
box-shadow: 5px 10px 5px rgba(0,0,0,0.7);
width: 97%;
height: 160px;
margin-top: 25px;
margin-left: 15px;
}
.clearfix:after{
content: ‘‘;
clear: both;
display: block;
}
.head{
font-weight: bolder;
font-size: 24px;
padding-top: 20px;
padding-left: 20px;
border-left: red 10px solid;
/*width: 50%;*/
float: left;
}
.data{
font-weight: bolder;
float: right;
padding-right: 20px;
padding-top: 20px;
}
.content{
font-weight: lighter;
padding-left: 20px;
padding-top: 25px;
}
.bar_tag{
padding-left: 20px;
}
a:link{color: #a9a9a9}
a:hover{color: #ffffff;font-weight: bolder}
a:visited{color: #a9a9a9}
a{text-decoration: none}
</style>
</head>
<body>
<div id="auth">
<div id="photo">
<img src="http://img3.imgtn.bdimg.com/it/u=1366955104,3398769111&fm=26&gp=0.jpg" >
</div>
<div id="auth_motto">
<p style="font-size: 30px"><a href="http://img3.imgtn.bdimg.com/it/u=1366955104,3398769111&fm=26&gp=0.jpg">彩虹小马驹</a></p>
<p><a>无忧无虑</a></p>
</div>
<div id="msg">
<p><a href="" target="_blank">关于人设</a></p>
<p><a href="">相关作品</a></p>
<p><a href="">影视链接</a></p>
</div>
</div>
<div id="main">
<div class="bar">
<div class="title clearfix">
<div class="head">标题1</div>
<div class="data">2020年5月14日</div>
</div>
<div class="content">内容1</div>
<hr style="">
<div class="bar_tag">内容1</div>
</div>
<div class="bar">
<div class="title clearfix">
<div class="head">标题2</div>
<div class="data">2020年5月14日</div>
</div>
<div class="content">内容2</div>
<hr style="">
<div class="bar_tag">内容2</div>
</div>
<div class="bar">
<div class="title clearfix">
<div class="head">标题3</div>
<div class="data">2020年5月14日</div>
</div>
<div class="content">内容3</div>
<hr style="">
<div class="bar_tag">内容3</div>
</div>
<div class="bar">
<div class="title clearfix">
<div class="head">标题4</div>
<div class="data">2020年5月14日</div>
</div>
<hr style="">
<div class="bar_tag">内容4</div>
</div>
<div class="bar">
<div class="title clearfix">
<div class="head">标题5</div>
<div class="data">2020年5月14日</div>
</div>
<hr style="">
<div class="bar_tag">内容5</div>
</div>
<div class="bar">
<div class="title clearfix">
<div class="head">标题6</div>
<div class="data">2020年5月14日</div>
</div>
<hr style="">
<div class="bar_tag">内容6</div>
</div>
</div>
</body>
</html>
原文：https://www.cnblogs.com/Tornadoes-Destroy-Parking-Lots/p/12891677.html