用html、css实现网页聊天页面

最新推荐文章于 2025-02-25 15:39:13 发布

k_06140

最新推荐文章于 2025-02-25 15:39:13 发布

阅读量1.7w

点赞数 27

文章标签： html css

本文链接：https://blog.csdn.net/k_06140/article/details/125566198

版权

最近应届找工作好难，聊了一个公司，老板说自研项目，前端功能完善，我只需要做后端的就行。第二天技术人员面试让我写个纯html、css聊天界面，虽然楼主不是主要写前端的，奈何工作难找，硬着头皮上了。最后在B站找了个类似的项目，融合了自己的想法，凑合凑合写了一下。

页面效果如下：

铁子们，话不多说，咱们直接上代码！！！

Chat.html

<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>聊天</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body>
        <div class="container">
            <div class="leftSide">
                <!--header-->
                <div class="header">
                    <div class="userimg">
                        <img src="user.jpg" class="cover">
                    </div>
                    <ul class="nav_icons">
                        <li><img src="消息.png"></li>
                        <li><img src="更多.png"></li>
                    </ul>
                </div>
                <!--search-->
                <div class="search_chat">
                    <div>
                        <input type="text" placeholder="搜索...">
                        <img src="搜索.png">
                    </div>
                </div>
                <!--ChatList-->
                <div class="chatlist">
                    <div class="block active">
                        <div class="imgbx">
                            <img src="img1.jpg" class="cover">
                        </div>
                        <div class="details">
                            <div class="listHead">
                                <h4>开心果</h4>
                                <p class="time">14:25</p>
                            </div>

最低0.47元/天解锁文章