用HTML+CSS写一个手机微信界面

这篇具有很好参考价值的文章主要介绍了用HTML+CSS写一个手机微信界面。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在手机微信里面,其实有很多很好玩的动效。

今日突然奇想,想通过前端的方式去实现微信里的部分动效。

当然,我们该选择哪个界面呢?

我首先想到了聊天窗口,因为这部分相对来说、简单。

构思:

于是,我就开始写了。

当然啦,在写之前,我们得研究一下,微信的聊天界面:

用HTML+CSS写一个手机微信界面

从上往下看,聊天窗口是分为三部分:

上面的联系人信息,中间的信息流界面,以及下面的输入栏。

当然,还有更多选项藏在了加号里面。

于是,我的构想图就出来了,如下图:

用HTML+CSS写一个手机微信界面

我们只需要按照上图来进行设计,就行了。

别问为什么加号是叉号,因为当你点击了加号,之后,它应该旋转45°,变成叉号(更合逻辑)。

第一步,是先画一个手机。

第二步,就是在这手机里面,划分三个区域(跟上面提到的三部分是一样的)。

第三步,就是在这三个区域里面,再进行更加细致的区域划分(比如说联系人信息上,我还在这里加入了手机的状态栏区域(上图中的黑点是前置摄像头))。

最后一步,就是——

代码实现:

<!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>
        * {
            padding: 0;
            margin: 0;
        }

        /* 手机 */
        .div1 {
            width: 326px;
            height: 732px;
            background: rgb(245, 245, 245);
            border: 4px solid pink;
            border-radius: 36px;
            margin: 100px auto;
        }

        /* 聊天部分 */
        .div2 {
            width: 326px;
            height: 480px;
            border-bottom: 1px solid pink;
            /* border-radius: 18px; */
            margin: 0;
            padding: 0;
        }

        /* 状态栏 */
        .top {
            width: 326px;
            height: 25px;
            /* border-bottom: 1px solid pink; */
        }

        /* 摄像头 */
        .holl {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            margin: 5px auto;
            background: rgb(23, 23, 23);
        }

        /* 联系人信息 */
        .more {
            width: 326px;
            height: 50px;
            border-bottom: 1px solid pink;
            /* border-radius: 18px; */
        }

        /* 用户信息 */
        .user {
            width: 326px;
            text-align: center;
            margin-top: 5px;
        }

        /* 图片格式化 */
        .user>img {
            width: 20px;
            height: 20px;
        }

        /* 返回 */
        .re {
            margin-left: 10px;
            float: left;
        }

        /* 联系人信息 */
        .name {
            text-align: center;
            width: 266px;
            float: left;
        }

        /* 更多 */
        .point {
            margin-right: 10px;
            float: right;
        }

        /* 聊天框 */
        .div4 {
            width: 316px;
            height: 430px;
            margin: auto;
        }

        /* 信息时间 */
        .time {
            width: 316px;
            height: 25px;
            margin: auto;
            text-align: center;
        }

        /* 格式化数字 */
        p {
            margin-top: 8px;
            font-size: 10px;
            color: grey;
        }

        /* 发送信息 */
        .send {
            height: 108px;
        }

        /* 对方头像 */
        .send>.i {
            margin-left: 8px;
            width: 42px;
            height: 42px;
            border-radius: 5px;
        }

        /* 红包 */
        .red {
            width: 200px;
            height: 78px;
            background: #bf0f0f;
            border: 0;
            border-radius: 8px;
        }

        /* 格式化reply */
        .reply {
            height: 88px;
        }

        /* 我方头像 */
        .reply>.i {
            float: right;
            margin-right: 8px;
            width: 42px;
            height: 42px;
            border-radius: 5px;
        }

        /* 格式化信息 */
        .reply>span {
            float: right;
            background: greenyellow;
            border-radius: 5px;
            padding: 10px;
            font-size: 14px;
            margin-right: 8px;
        }

        /* 格式化未输入 */
        .info {
            display: none;
            height: 88px;
        }

        /* 格式化头像 */
        .info>.i {
            float: right;
            margin-right: 8px;
            width: 42px;
            height: 42px;
            border-radius: 5px;
        }

        /* 格式化信息 */
        .info>span {
            float: right;
            background: greenyellow;
            border-radius: 5px;
            padding: 10px;
            font-size: 14px;
            margin-right: 8px;
        }

        /* 加号功能 */
        .div3 {
            width: 326px;
            height: 252px;
            margin: 0;
            padding: 0;
            background: rgb(240, 240, 240);
        }

        /* 输入框 */
        .div5 {
            margin-top: -46px;
            /* 修改这行的长度,为后续的发送按钮显示做准备 */
            width: 380px;
            height: 46px;
            overflow: hidden;
            border-top: 1px solid pink 326px;
            border-bottom: 1px solid pink 326px;
        }

        /* 左边输入语音 */
        .i1 {
            float: left;
            width: 24px;
            height: 24px;
            margin: 10px 0 10px 9px;
        }

        /* 输入框 */
        .i3 {
            outline: none;
            border: 0;
            border-radius: 5px;
            float: left;
            margin: 8px 0 8px 9px;
            width: 200px;
            height: 28px;
            /* 修改光标的颜色 */
            caret-color: red;
            transition: all .4s;
        }

        /* emjoy的位置 */
        .i4 {
            float: left;
            margin: 8px 0 8px 9px;
            width: 28px;
            height: 28px;
        }

        /* 叉掉 */
        .i2 {
            display: block;
            float: left;
            width: 22px;
            height: 22px;
            margin: 12px 10px 10px 9px;
        }

        /* 发送按钮 */
        .i5 {
            display: block;
            float: left;
            width: 52px;
            height: 28px;
            border: 0;
            border-radius: 5px;
            background: greenyellow;
            margin: 8px 0 10px 9px;
        }

        /* 底部功能按钮 */
        ul {
            width: 326px;
            height: 116px;
            text-align: center;
            margin-top: 5px;
        }

        li {
            display: inline-block;
            width: 58px;
            height: 58px;
            list-style: none;
            border-radius: 10px;
            background: white;
            margin-left: 10px;
        }

        li>img {
            width: 38px;
            height: 38px;
            padding-top: 10px;
            text-align: center;
        }

        .ul1>li {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <!-- 手机框 -->
    <div class="div1">

        <!-- 聊天部分 -->
        <div class="div2">
            <!-- 联系人 -->
            <div class="more">
                <!-- 状态栏 -->
                <div class="top">
                    <!-- 摄像头 -->
                    <div class="holl"></div>
                </div>

                <div class="user">
                    <img src="./images/re.png" alt="" class="re">
                    <span class="name">老板</span>
                    <img src="./images/more.png" alt="" class="point">
                </div>
            </div>

            <!-- 聊天框 -->
            <div class="div4">
                <!-- 对方的消息 -->
                <div class="send">
                    <!-- 时间 -->
                    <div class="time">
                        <p>10:28</p>
                    </div>

                    <!-- 头像 -->
                    <img src="./images/avatar.jpg" class="i"></img>
                    <!-- 信息内容 -->
                    <input class="red" type="button" value="恭喜发财">
                </div>

                <!-- 回复消息 -->
                <div class="reply">
                    <!-- 时间 -->
                    <div class="time">
                        <p>14:18</p>
                    </div>

                    <!-- 头像 -->
                    <img src="./images/avatar.jpg" class="i"></img>
                    <!-- 信息内容 -->
                    <span>谢谢老板</span>
                </div>

                <!-- 还没有发布的消息 -->
                <div class="info">
                    <!-- 时间 -->
                    <div class="time">
                        <p>14:18</p>
                    </div>

                    <!-- 头像 -->
                    <img src="./images/avatar.jpg" class="i"></img>
                    <!-- 信息内容 -->
                    <span class=".text">谢谢老板</span>
                </div>

            </div>

        </div>

        <!-- 下面功能栏 -->
        <div class="div3">

            <!-- 这个是输入 -->
            <div class="div5">
                <img src="./images/say.png" class="i1">
                <input type="text" class="i3">
                <img src="./images/emjoy.png" class="i4">
                <img src="./images/X.png" class="i2">
                <button class="i5">发送</button>
            </div>

            <!-- 下面的功能区 -->
            <ul class="ul1">
                <li>
                    <img src="./images/ph.png" alt="">
                    <a></a>
                </li>
                <li>
                    <img src="./images/ca.png" alt="">
                    <a></a>
                </li>
                <li>
                    <img src="./images/vi.png" alt="">
                    <a></a>
                </li>
                <li>
                    <img src="./images/add.png" alt="">
                    <a></a>
                </li>
            </ul>
            <ul class="ul2">
                <li>
                    <img src="./images/red.png" alt="">
                    <a></a>
                </li>
                <li>
                    <img src="./images/pay.png" alt="">
                    <a></a>
                </li>
                <li>
                    <img src="./images/sing.png" alt="">
                    <a></a>
                </li>
                <li>
                    <img src="./images/coll.png" alt="">
                    <a></a>
                </li>
            </ul>
        </div>

    </div>

</body>

</html>

运行之后,显示的界面是这样的(发送按钮默认不显示):

用HTML+CSS写一个手机微信界面

最后总结:

当然,上面做的页面其实蛮简单的,还没有特别完善。

比如说,更多功能里面的每一个功能下面是没有文字显示的,微信界面是这样的:

用HTML+CSS写一个手机微信界面

而我的则没有下面的小字,图片显示也稍微有点问题。

当然,如果你找不到图片,可以评论留言。

还有就是,现在这个页面是无法实现什么功能的。

比如说,在我们的聊天窗口里,当我们点击了输入框,此时是没有发送键的,但当系统检测到你输入了内容之后,发送键就会显示出来,就比如下面的视频:

用前端技术写WeChat界面

那么这个功能怎么实现呢?

下期再见。文章来源地址https://www.toymoban.com/news/detail-488994.html

到了这里,关于用HTML+CSS写一个手机微信界面的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • html+css实现的登录界面

    留言 :如果对你有帮助,给博主点个免费的赞吧 ~ 创作不易,感谢支持!

    2023年04月14日
    浏览(36)
  • HTML+CSS前端 简易用户登录界面

    Day1 刚学了一些html和css的简单语法,尝试写一个非常简易的静态用户登录界面。   login_simple.html login_simple.css 这里需要把 background.jpg 替换成自己的背景图。 效果展示 最后的效果就是这样的啦

    2024年02月14日
    浏览(46)
  • html+css简单仿制淘宝商品界面

    目录 一.主要思路 二.完整代码  三.最终效果 1.写一个大盒子,将内部分为如图几个部分,分别写对应的内容 2.首先给整个盒子宽高,传进图片后调整图片宽高 3.重点在于“找同款”和“买家秀”的隐藏效果写法 4.需要考虑到图片与“找同款”“买家秀”的相对绝对位置关系

    2024年02月09日
    浏览(43)
  • 纯HTML+CSS实现可响应式登陆界面

    先上效果视频: 演示视频 基本思路: 一:日月切换模块 1. 用阴影画出太阳和月亮 2.用transform: translate; transform: rotate;两个属性实现日月交换效果 3.使用label for=\\\"\\\" hidden标签实现左上角滑块与复选按钮的链接 4.用兄弟选择器“~”实现一个元素对另一个元素的控制 二:注册界

    2024年02月04日
    浏览(42)
  • 【HTML+CSS+JS】模仿QQ登录界面

    学了HTML、CSS和JS有了一个月了,JS还未学完,偷懒写一个小项目,用了一个下午,顺便巩固一下所学知识。(内容比较简陋,适合新手) 源代码:https://github.com/yeziyuhai/QQ-login-interface 左边是我的,右边是官方的。没有设计稿和素材,只能自己找,所以是无法做到一模一样的,

    2024年02月06日
    浏览(84)
  • 前端登录界面网站设计模板--HTML+CSS

    💖效果展示 💖HTML代码展示

    2024年02月04日
    浏览(56)
  • HTML+CSS 改进前端简易响应式登录界面

    day5 改进上次的项目 HTML+CSS前端 动态响应用户登录界面_一只名叫Me的猫的博客-CSDN博客 在vscode中,空白html文件打入一个感叹号,可以自动创建html模板,避免手搓(悲)。  上次就是因为手搓导致漏了utf-8编码。模板是这个样子的。 块级元素在页面上以块的形式显示,自动占

    2024年02月14日
    浏览(45)
  • HTML+JS+CSS移动端购物车选购界面

    UIGoods 类: 构造函数: 创建 UIGoods 实例时,传入商品数据 g ,初始化商品的数据和选择数量。 getTotalPrice() 方法: 计算商品的总价,考虑了选择数量。 isChoose() 方法: 判断是否选中该商品。 increase() 方法: 增加商品的选择数量。 decrease() 方法: 减少商品的选择数量,但数量

    2024年02月02日
    浏览(62)
  • 在登录界面中设置登录框、多选项和按钮(HTML和CSS)

      登录框(Input框)的样式: 这样设置后,登录框的宽度为200px,高度为30px,具有1px宽的边框,边框颜色为#ccc,圆角为5px,内边距为5px,下方留有10px的外边距。  多选项的样式(如复选框和单选框): 这样设置后,复选框和单选框之间会有5px的外边距,同时复选框和单选框

    2024年02月14日
    浏览(47)
  • HTML写一个简单的登录注册界面

    希望对你们有所帮助,再此感谢各位读者的支持,再次感谢!!! 

    2024年02月12日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包