效果圖
image.png
項目結(jié)構(gòu)
image.png
html代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title></title>
</head>
<body>
<div class="box">
<div class="item left">
<img class="header-img" src="img/img.jpeg" />
<span class="message">愛你呦</span>
</div>
<div class="chart-timer">
2019-5-17
</div>
<div class="item right">
<img class="header-img" src="img/img.jpeg" />
<span class="message">哈哈哈哈哈</span>
</div>
<div class="item left">
<img class="header-img" src="img/img.jpeg" />
<span class="message">干嘛呢</span>
</div>
<div class="item right">
<img class="header-img" src="img/img.jpeg" />
<span class="message">吃飯飯</span>
</div>
</div>
<div class="input-box">
<input type="text" />
<button>確定</button>
</div>
</body>
</html>
css
/*
聊天item采用flex布局
*/
.item {
display: flex;
margin-bottom: 10px;
}
.left {
flex-direction: row;
}
.right {
flex-direction: row-reverse;
}
.right .message {
margin-right: 10px;
}
.left .message{
margin-left: 10px;
}
.header-img {
width: 42px;
height: 42px;
border-radius: 100px;
}
.message {
border-radius: 10px;
display: flex;
background: #efefef;
min-height: 25px;
padding: 9px 10px;
align-items: center;
color: #222121;
}
.input-box {
position: absolute;
bottom: 0px;
left: 0;
right: 0;
display: flex;
padding: 4px 6px;
box-sizing: border-box;
}
.input-box input {
flex: 1;
border-radius: 10px;
border: 1px #cecece solid;
padding: 3px 4px;
outline: none;
}
.input-box button {
width: 80px;
background: #2196F4;
border-radius: 21px;
border: 1px #fffa solid;
color: #ffffff;
margin: 0px 6px;
outline: none;
}
button:active{}
.chart-timer{
text-align: center;
color: #616161;
font-size: 13px;
}
