1. 欧力给首页
  2. 日常随笔

HTML +CSS3简易通讯，聊天内容设计

• 日常随笔 • 阅读 2446
HTML +CSS3简易通讯，聊天内容设计

内容展示效果如上

内容设计看似简单，里面却是用到了一些不常见的元素属性

先看左边，比较简单，一个div元素 里面加 span或者p标签就可以实现 ‘昵称 ： 聊天内容’ 设计，全部向左对齐，这里不做过多解释

主要讲的还是右边，即自己的通讯内容展示：“聊天内容 ：昵称”

展示有几个规则

1，内容紧挨着昵称

2，内容过短，靠右显示，内容过长，左对齐显示

3，自适应布局

为了设计美观，引入了bootstrap框架

右边设计布局当然是


“<div>
<div>聊天内容</div>
<div>昵称</div>
</div>”
父标签必须向右浮动，此时，‘昵称’会被排挤

HTML +CSS3简易通讯，聊天内容设计

如果 “昵称”和“内容”div元素 使用 bootstrap 的 col-sm-x，昵称过长会被遮挡，无法实现自适应

HTML +CSS3简易通讯，聊天内容设计

为解决这个问题，使用的是css的display 属性

display 有个 table-cell ，table-cell指让标签元素以表格单元格的形式呈现

昵称和内容 div元素就会被整齐的排在一行，而且不用过多的css修饰，并且能昵称能自适应长短
在加上一些padding，margin，background等属性就可以实现了

chat下载

原创文章，作者：ourygey，如若转载，请注明出处：https://ourygey.com/2022/03/31/html-css3%e7%ae%80%e6%98%93%e9%80%9a%e8%ae%af%ef%bc%8c%e8%81%8a%e5%a4%a9%e5%86%85%e5%ae%b9%e8%ae%be%e8%ae%a1/

赞 (0)
0
上一篇 2021-12-27 18:22
下一篇 2022-04-18 15:52

相关推荐

发表评论

您的电子邮箱地址不会被公开。

记住昵称、邮箱和网址，下次评论免输入