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

来源：互联网发布：马里亚纳网络为何恐怖编辑：程序博客网时间：2024/05/16 09:06

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

<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>

效果图如下：

关于其中涉及的几个属性将在下篇博客细聊，有些bug着实不知所措，比如下方的输入框，我都在在类chat3中设置左看齐了，但人家还是不靠左。。但设置右看齐是可以的，有点懵。。。还有浮动清理clear:both，这个下篇讲吧，看网上说的挺复杂~~

阅读全文

0 0