当前位置：Gxlcms > html代码 > 高手教你如何制作一个简单漂亮的前端聊天界面

高手教你如何制作一个简单漂亮的前端聊天界面

时间：2021-07-01 10:21:17 帮助过：139人阅读

本篇文章给大家带来的内容是关于高手教你如何制作一个简单漂亮的前端聊天界面，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

一个简单的前端静态聊天界面，实现了聊天的基本功能，目前后台还没做，接下来还会继续更新后台和完善前台样式并更新。

一.Html代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>chat</title>
  6.     <link rel="stylesheet" href="../css/chat.css" type="text/css">
  7.     <script type="text/javascript" src="../js/chat.js"></script>
  8. </head>
  9. <body>
  10. <p class="all">
  11.     <p class="chat_index">
  12.         <!--banner-->
  13.         <p class="chat_banner">
  14.         </p>
  15.         <p class="chat_body">
  16.             <!--在线列表-->
  17.             <p class="chat_online">
  18.                 <!--搜索-->
  19.                 <p class="search_online">
  20.                     <form>
  21.                         <input type="text" placeholder="搜索联系人">
  22.                     </form>
  23.                 </p>
  24.                 <p class="online_friend">
  25.                     <ul>
  26.                         <li>
  27.                             <p class="a_friend">
  28.                                 <p class="head_portrait">
  29.                                     <p class="head_text">
  30.                                         黄
  31.                                     </p>
  32.                                 </p>
  33.                                 <p class="friend">
  34.                                     <p class="name">天狼星</p>
  35.                                     <p class="this_time">4-12-15:10</p>
  36.                                 </p>
  37.                             </p>
  38.                         </li>
  39.                         <li>
  40.                             <p class="a_friend">
  41.                                 <p class="head_portrait">
  42.                                     <p class="head_text">
  43.                                         黄
  44.                                     </p>
  45.                                 </p>
  46.                                 <p class="friend">
  47.                                     <p class="name">天狼星</p>
  48.                                     <p class="this_time">4-12-15:10</p>
  49.                                 </p>
  50.                             </p>
  51.                         </li>
  52.                         <li>
  53.                             <p class="a_friend">
  54.                                 <p class="head_portrait">
  55.                                     <p class="head_text">
  56.                                         黄
  57.                                     </p>
  58.                                 </p>
  59.                                 <p class="friend">
  60.                                     <p class="name">天狼星</p>
  61.                                     <p class="this_time">4-12-15:10</p>
  62.                                 </p>
  63.                             </p>
  64.                         </li>
  65.                         <li>
  66.                             <p class="a_friend">
  67.                                 <p class="head_portrait">
  68.                                     <p class="head_text">
  69.                                         黄
  70.                                     </p>
  71.                                 </p>
  72.                                 <p class="friend">
  73.                                     <p class="name">天狼星</p>
  74.                                     <p class="this_time">4-12-15:10</p>
  75.                                 </p>
  76.                             </p>
  77.                         </li>
  78.                     </ul>
  79.                 </p>
  80.             </p>
  81.             <!--聊天界面-->
  82.             <p class="chat_main">
  83.                 <p class="chat_p">
  84.                     <ul id="chat_ul" class="chat_content">
  85.                     </ul>
  86.                 </p>
  87.                 <p class="send_message">
  88.                     <form>
  89.                         <input type="text" placeholder="请输入消息" id="send_txt">
  90.                         <input type="button" value="发送" id="send_btn">
  91.                     </form>
  92.                 </p>
  93.             </p>
  94.             <!--名片-->
  95.             <p class="chat_namecard">
  96.             </p>
  97.         </p>
  98.     </p>
  99. </p>
  100. </body>
  101. </html>
二.CSS代码

有些需要注意的地方已经标上注释了

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     font-size: 12px;
  5.     font-family: "微软雅黑";
  6. }
  7. .all {
  8.     width: 100%;
  9.     height: 790px;
  10.     /*background-color: #7fa4f2;*/
  11.     background: linear-gradient(to right, #879eee, #ba78dc); /* 标准的语法 */
  12. }
  13. .chat_index {
  14.     width: 1000px;
  15.     height: 600px;
  16.     border: 1px solid black;
  17.     position: relative;
  18.     top: 100px;
  19.     margin: 0 auto;
  20. }
  21. .chat_banner {
  22.     background: linear-gradient(to right, #a41adc, #ee1351, #a41adc); /* 标准的语法 */
  23.     width: 999px;
  24.     height: 50px;
  25.     border: 1px solid blue;
  26. }
  27. .chat_body {
  28.     width: 999px;
  29.     height: 546px;
  30.     border: 1px solid red;
  31. }
  32. .chat_online {
  33.     overflow: hidden;
  34.     float: left;
  35.     height: 546px;
  36.     width: 200px;
  37.     border: 1px solid yellow;
  38.     background-color: white;
  39. }
  40. .search_online {
  41.     text-indent: 2em;
  42.     height: 40px;
  43.     border: 1px solid black;
  44. }
  45. .search_online input[type="text"] {
  46.     outline: none;
  47.     margin: 2px auto;
  48.     height: 30px;
  49.     width: 60%;
  50.     border-radius: 8px;
  51.     text-indent: 2em;
  52. }
  53. .online_friend ul li {
  54.     list-style-type: none;
  55. }
  56. .online_friend ul li {
  57.     height: 60px;
  58.     border-bottom: 1px solid #1c1f21;
  59.     margin-top: 10px;
  60. }
  61. .a_friend {
  62.     /*border: 1px solid #2328ff;*/
  63.     height: 55px;
  64.     background-color: #39fffe;
  65. }
  66. .head_portrait {
  67.     background-color: #b532ff;
  68.     margin: 6px 6px;
  69.     float: left;
  70.     height: 40px;
  71.     width: 40px;
  72.     border: 1px solid orangered;
  73.     border-radius: 50%;
  74. }
  75. .head_text {
  76.     padding: 3px;
  77.     font-size: 22px;
  78.     text-align: center;
  79.     vertical-align: center;
  80.     margin-top: 3px;
  81. }
  82. .friend {
  83.     float: right;
  84.     height: 54px;
  85.     width: 140px;
  86.     /*border: 1px solid rebeccapurple;*/
  87. }
  88. .friend .name {
  89.     margin: 4px 6px;
  90.     float: left;
  91. }
  92. .friend .this_time {
  93.     margin-top: 4px;
  94.     float: right;
  95. }
  96. .chat_main {
  97.     float: left;
  98.     width: 548px;
  99.     height: 546px;
  100.     border: 1px solid seagreen;
  101.     /*background-color: white;*/
  102.     background: url("../img/圣诞.jpg") no-repeat;
  103.     background-size: cover;
  104. }
  105. .send_message {
  106.     width: 548px;
  107.     height: 65px;
  108.     position: absolute;
  109.     bottom: 0px;
  110.     background: linear-gradient(to top, rgba(9, 216, 237, 0.99), #72cad4);
  111. }
  112. .send_message input[type="text"] {
  113.     width: 470px;
  114.     height: 30px;
  115.     margin-top: 16px;
  116.     margin-left: 10px;
  117.     border-radius: 10px 0 0 10px;
  118.     text-indent: 2em;
  119.     outline: none;
  120.     background-color: white;
  121.     border: none;
  122. }
  123. .send_message input[type="button"] {
  124.     border-radius: 0 10px 10px 0;
  125.     width: 35px;
  126.     height: 30px;
  127.     background-color: white;
  128.     border: none;
  129.     margin-left: 0;
  130.     background-color: white;
  131.     border: none;
  132.     outline: none;
  133. }
  134. .send_message input[type="button"]:hover {
  135.     background-color: orangered;
  136. }
  137. .send_message input[type="button"]:active {
  138.     background-color: #879eee;
  139. }
  140. .chat_namecard {
  141.     float: left;
  142.     width: 245px;
  143.     height: 546px;
  144.     border: 1px solid saddlebrown;
  145.     background-color: #f1fea9;
  146. }
  147. .chat_content ul{
  148. list-style-type: none;
  149. }
  150. .chat_content{
  151.     overflow: auto;
  152.     width: 540px;
  153.     /*设置高度滚动条才有效*/
  154.     height: 470px;
  155. }
  156. .chat_content li{
  157.     margin-top: 10px;
  158.     width: 540px;
  159.     clear: both;
  160.     display: block;
  161. }
  162. .chat_content li img{
  163.     margin: 6px 0 0 0;
  164. }
  165. .chat_content li span {
  166.     background: #ffd351;
  167.     padding: 10px;
  168.     border-radius: 10px;
  169.     /*最大宽度不能太长，不然布局会混乱*/
  170.     max-width: 400px;
  171.     border: 1px solid white;
  172.     box-shadow: 0 0 3px #879eee;
  173.     margin: 6px 10px 0 10px;
  174.     overflow: hidden;
  175. }
  176. .chat_content li img {
  177.     width: 40px;
  178.     height: 40px;
  179.     border-radius: 50%;
  180. }
  181. .chat_content li img.imgleft {
  182.  margin-left: 10px;
  183.     float: left;
  184. }
  185. .chat_content li img.imgright {
  186.  margin-right: 10px;
  187.     float: right;
  188. }
  189. .chat_content li span.spanleft {
  190.     float: left;
  191. }
  192. .chat_content li span.spanright {
  193.     float: right;
  194. }
三.JS代码
  1. window.onload = function () {
  2.     var user = ["../img/img_17.jpg"];
  3.     var num = 1;//判断左右
  4.     var portrait_position = 0;
  5.     var now = -1;//左右浮动
  6.     var send_btn = document.getElementById('send_btn');
  7.     var send_txt = document.getElementById('send_txt');
  8.     var chat_ul = document.getElementById('chat_ul');
  9.     var chat_span = chat_ul.getElementsByTagName('span');
  10.     var chat_img = chat_ul.getElementsByTagName('img');
  11.     send_btn.onclick = function () {
  12.         if (send_txt.value == '') {
  13.             alert("请不要惜字如金");
  14.         } else {
  15.             chat_ul.innerHTML += '<li><img src="../img/img_24.jpg"><span>' + send_txt.value + '</span>';
  16.             now++;
  17.             if (num==0) {
  18.                 chat_span[now].className = 'spanright';
  19.                 chat_img[now].className = 'imgright';
  20.             }
  21.              else {
  22.                 chat_span[now].className = 'spanleft';
  23.                 chat_img[now].className = 'imgleft';
  24.             }
  25.             send_txt.value = '';
  26.             // 内容过多时,将滚动条放置到最底端
  27.             /*contentcontent.scrollTop = content.scrollHeight;*/
  28.         }
  29.     }
  30. }

num 消息显示在左边还是右边，根据后台请求来操作

四.界面截图

20180604231952266.png

以上就是对的全部介绍，如果您想了解更多有关HTML视频教程，请关注PHP中文网。

以上就是高手教你如何制作一个简单漂亮的前端聊天界面的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！