盒子模型-微信聊天界面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边框三（聊天界面）</title>
<title>太极图</title>
.box{
width: 1000px;
height: 650px;
border: 1px black solid;
padding-bottom: 10px;
background-image: url(img/注册-bg.jpg);
background-position: -50px;
overflow: auto;
margin: 0px auto;
}
.namebox{
width: 1000px;
height: 40px;
border: 1px black solid;
background: black;
padding-top: 10px;
text-align: center;
margin: 0px auto;
}
.name{
color: white;
font-size: 25px;
font-family: "宋体";
}
img{
border-radius: 11px;
}
.img1{
margin-top: 9px;
margin-left: 15px;
}
.img2{
margin-top: 15px;
margin-left: 855px;
}
.img3{
margin-left: 20px;
}
.s1{
width: 235px;
padding: 20px;
background: #008000;
border-radius: 10px;
margin-left: 165px;
margin-top: -60px;
}
.s2{
margin-top:-60px;
margin-left:560px;
}
.l1{
line-height: 25px;
}
<style type="text/css">
</head>
<body>
<div class="namebox">
<span class="name">小明</span>
</div>
<div class="box">
<img src="img/1547258356(1).jpg" class="img1"/>
<div class="s1">
<span class="l1">我是box1我是box1我是box1我是box1我是box1我是box1
我是box1我是box1我是box1我是box1我是box1我是box1我是box1
</span>
</div>
<img src="img/1547258356(1).jpg" class="img2"/>
<div class="s2 s1">
<span class="l1">我是box1我是box1我是box1我是box1我是box1我是box1
我是box1我是box1我是box1我是box1我是box1我是box1我是box1
</span>
</div>
<img src="img/1547258356(1).jpg" class="img3 img2"/>
<div class="s3 s1">
<span class="l1">我是box1我是box1我是box1我是box1我是box1我是box1
我是box1我是box1我是box1我是box1我是box1我是box1我是box1
</span>
</div>
<img src="img/1547258356(1).jpg" class="img4 img2"/>
<div class="s4 s1 s2">
<span class="l1">我是box1我是box1我是box1我是box1我是box1我是box1
我是box1我是box1我是box1我是box1我是box1我是box1
</span>
</div>
</div>
</body>
</html>
成品还行，可能没有大佬写的简洁。。