pc版Web聊天界面+代码分享（HTML+CSS）

最新推荐文章于 2024-08-21 08:26:46 发布

宋温暖

最新推荐文章于 2024-08-21 08:26:46 发布

阅读量1.4w

点赞数 9

文章标签： web 聊天室前端界面

本文链接：https://blog.csdn.net/weixin_41651077/article/details/91459860

版权

这篇博客分享了一个PC版的Web聊天界面实现，包括HTML和CSS代码。作者模仿了腾讯QQ的界面设计，虽然内容简洁，但包含了基本的聊天界面元素。如果感兴趣，作者承诺会增加更多注释。此外，他还推荐了一个免费图标网站。

摘要由CSDN通过智能技术生成

不会写前端的测试，不是好测试。抓紧写完用例后划水写了个聊天界面，样式纯高仿tx的扣扣

该例子还在更新中，因为内容比较少，当时也没有想到要上传博客，并没有标明注释。如果看的人比较多，我在加些注释。

本eg包含英文为初中水平，请大胆阅读。

HTML代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>PC聊天</title>
    <link rel="stylesheet" href="../static/css/session-eg.css">
</head>
<body>
<div class="main">
    <div class="top">
        <div class="top-left">
            <div class="header"></div>
            <div class="search">
                <input type="text">
                <i class="icon-sear"></i>
            </div>
        </div>
        <div class="top-type">
            <a href="#" class="news icon-site"></a>
            <a href="#" class="friend icon-site"></a>
            <a href="#" class="file icon-site"></a>
        </div>
        <div class="top-right">
            <i class="ic-menu ic-same"></i>
            <i class="ic-shrink ic-same"></i>
            <i class="ic-boost ic-same"></i>
            <i class="ic-close ic-same"></i>
        </div>
    </div>
    <div class="box">
        <div class="chat-list">
            <div class="list-box">
                <img class="chat-head" src="../static/img/img-header2.jpg" alt="">
                <div class="chat-rig">
                    <p class="title">公众号</p>
                    <p class="text">紧急！！！</p>
                </div>
            </div>
            <div class="list-box select"><img class="chat-head" src="../static/img/img-header.jpeg" alt="">
                <div class="chat-rig"><p class="title">宋温暖</p>
                    <p class="text">在？</p></div>
            </div>
            <div class="list-box"><img class="chat-head" src="../static/img/img-header2.jpg" alt="">
                <div class="chat-rig"><p class="title">安安安</p>
                    <p class="text">你好，我这里有个任务帮我做一下</p></div>
            </div>
            <div class="list-box">
                <img class="chat-head" src="../static/img/img-header2.jpg" alt="">
                <div class="chat-rig">
                    <p class="title">公众号</p>
                    <p class="text">紧急！！！</p>
                </div>
            </div>
            <div class="list-box"&g