一个简单漂亮的前端聊天界面

最新推荐文章于 2024-08-03 20:16:26 发布

星尘Pro

最新推荐文章于 2024-08-03 20:16:26 发布

阅读量2.8w

点赞数 14

分类专栏：前端文章标签： web聊天聊天界面 h5 css

本文链接：https://blog.csdn.net/sirius_hly/article/details/80574627

版权

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

一.Html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chat</title>
    <link rel="stylesheet" href="../css/chat.css" type="text/css">
    <script type="text/javascript" src="../js/chat.js"></script>
</head>
<body>
<div class="all">
    <div class="chat_index">
        <!--banner-->
        <div class="chat_banner">

        </div>

        <div class="chat_body">
            <!--在线列表-->
            <div class="chat_online">
                <!--搜索-->
                <div class="search_online">
                    <form>
                        <input type="text" placeholder="搜索联系人">
                    </form>
                </div>
                <div class="online_friend">
                    <ul>
                        <li>
                            <div class="a_friend">
                                <div class="head_portrait">
                                    <div class="head_text">
                                        黄
                                    </div>
                                </div>
                                <div class="friend">

                                    <div class="name">天狼星</div>
                                    <div class="this_time">4-12-15:10</div>

                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="a_friend">
                                <div class="head_portrait">