html网页聊天布局显示,html/css实现聊天布局

效果图

cdc8ea3cb737cbf29923e619f8971fe8.png

项目结构

9740f88a0915bae52b8b9560eedd3e3f.png

html代码

img.jpeg

爱你呦

2019-5-17

img.jpeg

哈哈哈哈哈

img.jpeg

干嘛呢

img.jpeg

吃饭饭

确定

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 {

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 {

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;

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值