弹性布局flex！！之精美聊天框案例（舔狗日记）！！

最新推荐文章于 2024-04-30 21:16:29 发布

努力中的小mi

最新推荐文章于 2024-04-30 21:16:29 发布

阅读量1k

点赞数 3

文章标签： flex html css css3 html5

本文链接：https://blog.csdn.net/weixin_54345600/article/details/118076247

版权

霸道总裁之得不到则毁掉！

该案例大量使用flex布局，提高自己flex布局的熟练度，本人运用VScode进行开发。
你做完次案例将学到

运用CSS绘画三角形。

flex布局：
justify-content，align-items，order，flex。

做一个舔狗~。

在这里插入图片描述

建立一个html文件
编写HTML代码

<!-- 大盒子 -->
<!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>
</head>

<body>
    <div class="main">
        <!-- 头部 start -->
        <div class="header">
            <div class="back"></div>
            <div class="text">宝！</div>
            <div class="time">i</div>
        </div>
        <!-- 头部 end -->
        <!-- 聊天框 start -->
        <div class="word">
            <!-- ta -->
            <div class="Tchat1">
                <div class="head"></div>
                <div class="text">宝？我今天去输液的，输的什么液，想你的夜~</div>
            </div>
            <!-- wo -->
            <div class="Wchat1">
                <div class="head"></div>
                <div class="text">dog！</div>
            </div>
            <!-- ta -->
            <div class="Tchat1">
                <div class="head"></div>
                <div class=

最低0.47元/天解锁文章

努力中的小mi

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
弹性布局flex！！之精美聊天框案例（舔狗日记）！！

霸道总裁之得不到则毁掉！该案例大量使用flex布局，提高自己flex布局的熟练度，本人运用VScode进行开发。你做完次案例将学到运用CSS绘画三角形。flex布局：justify-content，align-items，order，flex。做一个舔狗~。建立一个html文件编写HTML代码<!DOCTYPE html><html lang="en"><head> <met
复制链接

扫一扫