<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
border: 3px solid white;
150px;
height: 150px;
border-radius: 50%;
overflow: hidden;
z-index: 20;
position: fixed;
top: 50px;
left: 50px;
}
.c2{
20%;
height: 800px;
background: gray;
top: 25px;
position: fixed;
}
.c3{
position: absolute;
margin: 230px 20px 20px;
}
p{
text-align: center;
}
.c7{
font-size: 30px;
font-weight: bold;
}
#d1{
background: rgba(128,128,128,0.5);
border: white 3px solid;
79%;
height: 1000px;
border-radius: 15px;
float: right;
overflow: auto;
}
.c9{
border: 3px white solid;
border-radius: 5px;
/* ;*/
height: 130px;
/*background-color: red;*/
position: relative;
margin: 10px;
}
.c10{
3px;
height: 50px;
background-color: red;
display: inline-block;
position: absolute;
top: 2px;
left: 4px;
}
.c11{
position: absolute;
left: 6px;
/*top: 2px;*/
font-size: 40px;
}
.c12{
position: absolute;
right: 6px;
top: 10px;
font-size: 25px;
}
.c13{
position: absolute;
left: 6px;
top: 60px;
98%;
}
</style>
</head>
<body>
<div class="c1">
<img src="111.png" alt="">
</div>
<div class="c2">
<div class="c3">
<p class="c4">用户名：二娃</p>
<p class="c4">年龄：保密</p>
<p class="c4">特长：从小与水结下不解之缘，水量特别大</p>
<p class="c7">#Python</p>
<p class="c7">#Java</p>
<p class="c7">#Golang</p>
</div>
</div>
<div id="d1">
<div class="c9">
<div>
<span class="c10"></span>
<span class="c11">帮葫芦兄弟寻找爷爷的真实名字</span>
<span class="c12">公元1234年</span>
<div class="c13">事成之后有必有重谢
<hr>
#python #java #golang
</div>
</div>
</div>
<div class="c9">
<div>
<span class="c10"></span>
<span class="c11">帮葫芦兄弟寻找爷爷的真实名字</span>
<span class="c12">公元1234年</span>
<div class="c13">事成之后有必有重谢
<hr>
#python #java #golang
</div>
</div>
</div>
<div class="c9">
<div>
<span class="c10"></span>
<span class="c11">帮葫芦兄弟寻找爷爷的真实名字</span>
<span class="c12">公元1234年</span>
<div class="c13">事成之后有必有重谢
<hr>
#python #java #golang
</div>
</div>
</div>
<div class="c9">
<div>
<span class="c10"></span>
<span class="c11">帮葫芦兄弟寻找爷爷的真实名字</span>
<span class="c12">公元1234年</span>
<div class="c13">事成之后有必有重谢
<hr>
#python #java #golang
</div>
</div>
</div>
<div class="c9">
<div>
<span class="c10"></span>
<span class="c11">帮葫芦兄弟寻找爷爷的真实名字</span>
<span class="c12">公元1234年</span>
<div class="c13">事成之后有必有重谢
<hr>
#python #java #golang
</div>
</div>
</div>
<div class="c9">
<div>
<span class="c10"></span>
<span class="c11">帮葫芦兄弟寻找爷爷的真实名字</span>
<span class="c12">公元1234年</span>
<div class="c13">事成之后有必有重谢
<hr>
#python #java #golang
</div>
</div>
</div>
<div class="c9">
<div>
<span class="c10"></span>
<span class="c11">帮葫芦兄弟寻找爷爷的真实名字</span>
<span class="c12">公元1234年</span>
<div class="c13">事成之后有必有重谢
<hr>
#python #java #golang
</div>
</div>
</div>
<div class="c9">
<div>
<span class="c10"></span>
<span class="c11">帮葫芦兄弟寻找爷爷的真实名字</span>
<span class="c12">公元1234年</span>
<div class="c13">事成之后有必有重谢
<hr>
#python #java #golang
</div>
</div>
</div>
<div class="c9">
<div>
<span class="c10"></span>
<span class="c11">帮葫芦兄弟寻找爷爷的真实名字</span>
<span class="c12">公元1234年</span>
<div class="c13">事成之后有必有重谢
<hr>
#python #java #golang
</div>
</div>
</div>
<div class="c9">
<div>
<span class="c10"></span>
<span class="c11">帮葫芦兄弟寻找爷爷的真实名字</span>
<span class="c12">公元1234年</span>
<div class="c13">事成之后有必有重谢
<hr>
#python #java #golang
</div>
</div>
</div>
</div>
</body>
</html>