效果图
项目结构
html代码
<!doctype html><html> <head>医药视频招商; <meta chart="utf-8" /> <link rel="stylesheet" ty汉乐府名词解释pe="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.j妈的厨房peg" /> <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-rever;}.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;}
本文发布于:2023-04-03 14:31:39，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/975793643805a47ed65e75bfe4ccbfcf.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：html/css实现聊天布局.doc
本文 PDF 下载地址：html/css实现聊天布局.pdf
| 留言与评论（共有 0 条评论） |
