纯HTML+CSS实战之仿微信聊天界面制作

最新推荐文章于 2024-08-20 15:14:30 发布

小韩同学哇

最新推荐文章于 2024-08-20 15:14:30 发布

阅读量2.2w

点赞数 9

分类专栏：从零玩转Html5前端开发

本文链接：https://blog.csdn.net/qq_41886761/article/details/86502514

版权

本文介绍如何使用纯HTML和CSS技术，结合三角形制作技巧及before/after伪类选择器，实现微信聊天界面的仿制。示例中头像尺寸为30px*30px。

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

效果图如下：

主要运用了之前实战项目中的三角形制作和before及after伪类选择器知识（其中头像图片采用30px*30px图片）

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯css制作仿微信聊天页面</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            font-size: 14px;
        }
        .triangle{
            margin: 100px auto ;
            width: 300px;
            background-color: #ebebe9;
        }
        .triangle ul{
            padding: 10px;
        }
        .triangle li{
            padding: 5px;
            margin-bottom: 10px;
        }
        .triangle li span{
            position: relative;
            border-radius: 7px;
            background-color: #a6e860;
            padding: