微信聊天框（html+css+js）实现

最新推荐文章于 2025-11-14 16:38:57 发布

原创

最新推荐文章于 2025-11-14 16:38:57 发布 · 5.9k 阅读

43 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #javascript

本文介绍了一个简单的微信聊天界面的HTML、CSS和JavaScript实现案例。该应用支持切换聊天对象和发送消息的功能，并展示了基本的样式设计。

微信聊天框（html+css+js）实现

1.来源

这是我在哔哩哔哩的上面的一个js网课的案例，说是有未添加js的版本（也就是只有样式的html），但我找不到，就只能自己写，比较丑。
主要是小图标，都是用的之前的项目的图标，图片大小看着差不多就行了。还有就是颜色，随便整的。
2.界面
在这里插入图片描述
3.功能
功能及比较简单。就是按一下，左下角的小图标，就可以切换聊天者，就两个，user1和user2.
不同的用户，发出的文字分别是两边的，在中间的框内输入，按一下发送，就能在上面的聊天框里看见。
聊天长度大于页面大小的话，右边会出现滚动条（挺难看的，不想改了）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
    
    
            margin: 0;
            padding: 0;
        }
        .fl{
    
    
            float: left;
        }
        .clearfixd:after {
    
    
            content: "";
            display: block;
            clear: both;
        }
        .box{
    
    
            height: 1000px;
            width: 1000px;
            overflow: hidden;
            margin-top: 50px;
        }
        .box .phone{
    
    
            height: 520px;
            width: 280px;
            margin:50px auto;
            background:grey;
            border-radius: 10px;