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" ...
随机推荐
- pyenv 安装本地版本
最近在用pyenv安装python的时候发现官网特别慢,经常出现拒绝访问的情况.看了一些解决方法,发现可以使用本地的python源码进行安装,让pyenv从本地下载就可以了~步骤如下: 首先从官网下载 ...
- ossfs常见配置错误
以下问题出现在非root用户下 执行echo ××××> /etc/passwd-ossfs bash: /etc/passwd-ossfs: Permission denied 使用sudo ...
- 【前端】CentOS 7 系列教程之二： 安装 git 最新版
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/linux_2.html 这一篇我们来安装git高版本. 卸载yum安装的旧版本 yum remove git 安装 ...
- 【旧文章搬运】获取并修改PEB中的映像路径，命令行和当前目录
原文发表于百度空间,2008-7-24 当时对UNICODE_STRING的使用还有点问题,导致最终效果图中字符串被截断了======================================= ...
- pair运用
#include <iostream> #include <string> #include <map> #include <algorithm> us ...
- 怎么在notepad里面，将字符串替换成换行
用Notepad++可以,利用查找和替换功能,选择正则表达式,查找目标框里输入你想要替换的字符串,替换为框里输入\r,点击替换即可.这是个 很强大的功能,利用还它可以批量替换任何字符串,比如你链接是& ...
- Logback中%X的使用
1. 参考资料 https://gist.github.com/logogin/ff44c254f655340b653c http://www.cnblogs.com/zhudongchang/p/6 ...
- 洛谷 - P1403 - 约数研究 - 数论
https://www.luogu.org/problemnew/show/P1403 可以直接用线性筛约数个数求出来,但实际上n以内i的倍数的个数为n/i的下整,要求的其实是 $$\sum\limi ...
- zoj2412 dfs连通图
zoj2412 #include<stdio.h> #include<iostream> #include<cstdio> #include<queue> ...
- （2）javascript的基本语法、数据结构、变量
本篇学习资料主要讲解javascript的基本语法.数据结构.变量 无论是传统的编程语言,还是脚本语言,都具有数据类型.常量和变量.运算符.表达式.注释语句.流程控制语句等基本元素构成,这些 ...