前端学习第九弹：简易的聊天界面

最新推荐文章于 2025-07-14 09:24:14 发布

原创最新推荐文章于 2025-07-14 09:24:14 发布 · 4.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #聊天界面 #float #box-sizing #布局

前端的快乐生活专栏收录该内容

18 篇文章

订阅专栏

本文分享了一个简单的聊天界面制作过程，包括HTML与CSS布局技巧。作者详细介绍了如何使用div元素实现不同样式的聊天气泡，并讨论了在实现过程中遇到的一些问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这次做的简易聊天界面虽然看似简单，但着实花了不少精力，各种调整、查资料，新手之路还很长啊，继续走下去吧~~~

<html>
   <head>
     <meta charset=utf-8/>
	 <style type=text/css>
	 body{
	   background:#eee;
	   color:#222;
	   font-size:20px;
	   font-family:"fangsong";
	 }
	 img{
	   display:block;
	   height:10%;
	   width:50%;
	 }
	 .chat{
	   width:500px;
	   height:500px;
	   margin:0 auto;
	   padding:20px 20px;
	   background:#cdb79e;
	  
	 }
	 .chat1{
	   border:2px solid #303030;
	   border-radius:20px;/*向div元素添加圆角边框，数值定义圆角的形状*/
	   box-sizing:border-box;/*允许以特定的方式定义匹配某个区域的特定元素*/
	   float:left;
	   clear:both; 
	   margin-bottom:20px;
	   padding:20px 30px;
	   background:#fff8dc;
	   position:relative;
	   width:auto;
	 }
	 .chat2{
	   background:#aeeeee;
	   float:right;
	 }
	 .chat3{
	   position:relative;
	   border:2px solid #303030;
	   border-radius:5px;
	   top:470px;
	   width:100%;
	   padding:5px 0px;
	   text-align:left;
	 }
	 </style>
   </head>
   <body>
     <div class="chat">
	   <div class="chat1">在吗？</div>
	   <div class="chat1 chat2">嗯嗯</div>
	   <div class="chat1">图片发过来</div>
	   <div class="chat1 chat2">
	     这张怎么样？
	     <img src="eg.gif" alt=""/>
	   </div>
	   <div class="chat3">让我们愉快地进行交流吧</div>
	 </div>
   </body>
</html>

效果图如下：