html/css实现聊天布局
效果图
项目结构
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;
}
html/css实现聊天布局的更多相关文章
- CSS HTML元素布局及Display属性
本篇文章主要介绍HTML的内联元素.块级元素的分类与布局,以及dispaly属性对布局的影响. 目录 1. HTML 元素分类:介绍内联元素.块级元素的分类. 2. HTML 元素布局:介绍内联元素. ...
- CSS多列布局
× 目录 [1]列宽 [2]列数 [3]列间距[4]列rule[5]跨列[6]列填充[7]多列 前面的话 CSS新增了多列布局特性,可以让浏览器确定何时结束一列和开始下一列,无需任何额外的标记.简单来 ...
- DIV+CSS常用网页布局技巧！
以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...
- DIV+CSS列表式布局（同意图片的应用）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- PHP.4-DIV+CSS标准网页布局准备工作（下）
DIV+CSS标准网页布局准备工作 区块属性(区块模型) 属 性 描 述 Margin(注) 是定义区块外边界与上级元素距离的属性,用1到4个值来设置元素的边界,每个值都是长度.百分比或者auto,百 ...
- PHP.3-DIV+CSS标准网页布局准备工作（上）
DIV+CSS标准网页布局准备工作(上) 概述 使用"DIV+CSS"对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.因为现在的网站设计标 ...
- html响应式布局，css响应式布局，响应式布局入门
html响应式布局,css响应式布局,响应式布局入门 >>>>>>>>>>>>>>>>>>& ...
- 演示：纯CSS实现自适应布局表格
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- css两列布局，一边固定宽度，另一边自适应
<!DOCTYPE HTML><HTML> <head> <meta charset="utf-8" ...
随机推荐
- TCP客户服务端
创建TCP服务端1.创建一个ServerSocket对象.2.调用accept()方法接收客户端请求.3.从Socket中获取I/O流.4.对I/O流进行读写操作,完成与客户端的交互.5.关闭I/O流 ...
- ruby 学习网站
Ruby on Rails官网: http://rubyonrails.org/ Rails Guides:http://guides.rubyonrails.org/ -中文版: http://gu ...
- UISegmentedControl方法与属性的总结
SegmentedControl又被称作分段控制器,是IOS开发中经常用到的一个UI控件. 初始化方法:传入的数组可以是字符串也可以是UIImage对象的图片数组 - (instancetype)in ...
- 使用sql compare生成的sql语句
创建表以及主键 判断表是否存在 OBJECT_ID 判断主键是否存在 SELECT 1 FROM sys.indexes WHERE name = N'PK_LISA_NoUseWebpartRepl ...
- YTU 2442: C++习题 矩阵求和--重载运算符
2442: C++习题 矩阵求和--重载运算符 时间限制: 1 Sec 内存限制: 128 MB 提交: 1457 解决: 565 题目描述 有两个矩阵a和b,均为2行3列.求两个矩阵之和.重载运 ...
- codeforces 440C. One-Based Arithmetic 解题报告
题目链接:http://codeforces.com/problemset/problem/440/C 题目意思:给出一个数你,问需要用到的1来组成这个数的最少数量是多少. 我一开始对每个数只从 “+ ...
- Objective-C Runtime（二）消息传递机制
在对象上调用方法是包括Objective-C的众多语言都具备的功能.但在Objective-C中,这个术语叫『传递消息』(pass a message).『消息』有「名称」(name)或「选择子」(s ...
- javascript之表格节点操作
<html> <div class='add'> 名字: <input type="" name=""&g ...
- hdoj5317【素数预处理】
//这个很好了...虽然是一般.. int isp[1000100]; int p[1000100]; void init() { int sum=0; int i,j; fill(isp,isp+1 ...
- vue的方法和计算属性的区别
首先看看 methods 方法 // html <div id="vue"> <button v-on:click = "a++">ad ...