console
<meta name="referrer" content="no-referrer">
<body>
<header>
<div class="left">
<img src="https://qlogo2.store.qq.com/qzone/20794489/20794489/100?1609725007?rd=0.9188343740951705"
class="me" >
<div class="introduce">
<div class="myname">呆萌滴*它</div>
<div class="Online">手机在线-WiFi ></div>
</div>
</div>
<div class="right">
<img src="https://qlogo3.store.qq.com/qzone/907103790/907103790/50?1619679144">
<img src="https://qlogo3.store.qq.com/qzone/2420155042/2420155042/50?1617149677" class="ui">
</div>
</header>
<section>
<div class="personal">
<img src="http://qlogo1.store.qq.com/qzone/1017866168/1017866168/50" class="Photo">
<div>
<div class="name">吕宗远</div>
<div class="chat">123</div>
</div>
<div class="time">2020/7/5</div>
</div>
<div class="line"></div>
<div class="personal">
<img src="http://qlogo1.store.qq.com/qzone/27310264/27310264/50" class="Photo">
<div>
<div class="name">萧鸿达</div>
<div class="chat">123</div>
</div>
<div class="time">2020/7/5</div>
</div>
<div class="line"></div>
<div class="personal">
<img src="http://qlogo1.store.qq.com/qzone/285371832/285371832/50" class="Photo">
<div>
<div class="name">姐姐</div>
<div class="chat">吃了吗</div>
</div>
<div class="time">2020/7/5</div>
</div>
<div class="line"></div>
<div class="personal">
<img src="http://qlogo4.store.qq.com/qzone/873466051/873466051/50" class="Photo">
<div> <div class="name">小橘子</div>
<div class="chat">是的</div>
</div>
<div class="time">2020/7/5</div>
</div>
</section>
</body>
body{
width: 750px;
background: #000000 ;
}
header{
width: 100%;
height: 100px;
background-image: linear-gradient(#e66465, #9198e5);
display: flex;
}
.me{
margin: 15px 15px;
border-radius: 50%;
}
.left{
float: left;
display: flex;
}
.right{
margin-left: 380px;
display: flex;
}
.introduce{
height: 50px;
margin-top: 40px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.right img{
width: 40px;
height: 40px;
margin-top: 50px;
}
.ui{
margin-left: 10px;
}
.Online{
font-size: 5px;
}
.Interface{
width: 750px;
}
.line{
height: 1px;
background: #888888 ;
margin-top: 2px;
}
.Photo{
margin-top: 15px;
border-radius: 50%;
}
.name{
width: 100px;
color: white;
margin-top: 15px;
margin-left: 10px;
}
.personal{
display: flex;
}
.chat{
color: white;
margin-top: 10px;
margin-left: 10px;
font-size: 10px;
}
.time{
color: white;
margin-left: 450px;
display: flex;
margin-top: 20px;
}