html+css模仿微信主页面

已于 2023-05-25 09:10:02 修改
阅读量5.1k 收藏 40
点赞数 1
文章标签： html css 微信
于 2022-08-29 13:12:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62177449/article/details/126582697
版权 
  上周，我们进行了认知实习，任务是模仿微信页面开发。
  接下来我会分成四段一一展现给大家，虽然完成的不是很准确精致
 大概框架还是有的，在记录自己成长进步的同时，也可能会给其他小伙伴一些建议。
  接下来，是微信的主页面。

在这里插入图片描述

    上代码

首先是html部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>wechat - Home</title>
    <!-- 引入外部样式表 -->
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/container.css">
    <link rel="stylesheet" href="css/phone-title.css">
    <link rel="stylesheet" href="css/header.css">

    <link rel="stylesheet" href="css/wrap-chat.css">
    <link rel="stylesheet" href="css/menu.css">
    <link rel="stylesheet" href="css/header-menu.css">

    <script src="jquery/jquery.js"></script>
    <script src="js/menu-bottom.js"></script>
    <script src="js/menu-header-popup.js"></script>
</head>

<body>
    <div id="container">2
        <!-- 信号,时间,电池 -->
        <div id="phone-title">

            <!-- 信号 -->
            <div id="phone-title-left">
                <div class="signal"></div>
                <div class="signal"></div>
                <div class="signal"></div>
                <div class="signal"></div>
                <div class="no-signal"></div>

                <div>中国移动&nbsp;4G</div>
            </div>

            <!-- 时间 -->
            <div id="phone-title-center">13:14</div>

            <!-- 电池 -->
            <div id="phone-title-right">

                <div>88%</div>

                <!-- 电池壳 -->
                <div>
                    <!-- 电量 -->
                    <div></div>
                </div>
                <!-- 正极 -->

                <div></div>

            </div>
        </div>

        <!-- 返回，信息条数，+ -->
        <div id="header" class="header-font">

            <!-- 返回 -->

            <div id="header-control">

                <div></div>

                <div>返回</div>

            </div>

            <!-- 信息条数 -->

            <div id="msg">微信(10)</div>

            <!-- 加号 -->

            <div id="function">

                <!-- 符号 -->

                <div id="add"></div>

                <!-- 弹出菜单 -->

                <div id="popup-menu">

                    <!-- 向上箭头 -->

                    <div id="small-triangle-up"></div>

                    <!-- 菜单内容 -->
                    <div class="popup-menu-content">

                        <!-- 前面是图标，后面是文字 -->
                        <div class="popup-menu-content-icon">

                            <img src="img/icon/control/发起群聊.svg">
                        </div>

                        <div>发起群聊</div>

                    </div>

                    <div class="popup-menu-content">

                        <!-- 前面是图标，后面是文字 -->

                        <div class="popup-menu-content-icon">
                            <img src="img/icon/control/添加朋友.svg">
                        </div>

                        <div>添加朋友</div>

                    </div>

                    <div class="popup-menu-content">

                        <!-- 前面是图标，后面是文字 -->

                        <div class="popup-menu-content-icon">

                            <img src="img/icon/control/扫一扫.svg">

                        </div>

                        <div>扫一扫</div>

                    </div>

                    <div class="popup-menu-content">

                        <!-- 前面是图标，后面是文字 -->

                        <div class="popup-menu-content-icon">

                            <img src="img/icon/control/收付款.svg">

                        </div>

                        <div>收付款</div>

                    </div>

                </div>

            </div>

        </div>

       
        <!-- 微信主页面 -->
        <div id="wrap-chat">

            <!-- 搜索框 -->

            <div id="search">

                <input>

            </div>

            <!-- 对话列表容器 -->

            <div id="lists">

                <!-- 每条消息容器 -->

                <div class="content">

                    <!-- 左侧头像 -->

                    <div class="content-left">

                        <img src="img/photo/王者荣耀.jpg">

                    </div>

                    <!-- 中间用户名和聊天消息 -->

                    <div class="content-center">

                        <div class="username">王者农药</div>

                        <div class="text">常回家看看~</div>

                    </div>

                    <!-- 右侧时间 -->

                    <div class="content-right">8:52</div>

                </div>

                <div class="content">

                    <div class="content-left">

                        <img src="img/photo/三胖-01.jpg">
                        <div class="new-msg">1</div>

                    </div>

                    <div class="content-center">

                        <div class="username">金三胖</div>
                        <div class="text-radio">今天干啥了？</div>

                    </div>

                    <div class="content-right">9:14</div>

                </div>

                <div class="content">

                    <div class="content-left">

                        <img src="img/photo/女孩-01.jpeg">

                        <div class="new-msg">1</div>

                    </div>

                    <div class="content-center">

                        <div class="username">欣欣</div>

                        <div class="text-radio">[语音]</div>

                    </div>

                    <div class="content-right">9:02</div>

                </div>

                <div class="content">

                    <div class="content-left">

                        <img src="img/photo/奥巴马-01.jpg">

                    </div>

                    <div class="content-center">

                        <div class="username">奥巴马</div>
                        <div class="text">我们是最强的！</div>

                    </div>

                    <div class="content-right">9:50</div>

                </div>

                <div class="content">
                    <div class="content-left">
                        <img src="img/photo/汉堡.jpg">
                    </div>
                    <div class="content-center">
                        <div class="username">汉波隔</div>
                        <div class="text">下课了，你饿了么</div>
                    </div>
                    <div class="content-right">9:50</div>
                </div>

                <div class="content">
                    <div class="content-left">
                        <img src="img/photo/郭德纲.jpg">
                    </div>
                    <div class="content-center">
                        <div class="username">德云社</div>
                        <div class="text">快来听相声哟</div>
                    </div>
                    <div class="content-right">9:55</div>
                </div>

                <div class="content">
                    <div class="content-left">
                        <img src="img/photo/男孩-01.jpg">
                    </div>
                    <div class="content-center">
                        <div class="username">王浩</div>
                        <div class="text">有时间吗</div>
                    </div>
                    <div class="content-right">9:50</div>
                </div>

                <div class="content">

                    <div class="content-left">

                        <img src="img/photo/马化腾.png">

                    </div>
                    <div class="content-center">

                        <div class="username">马化腾</div>
                        <div class="text">我缺钱了，腾哥</div>

                    </div>
                    <div class="content-right">11:12</div>

                </div>

                <div class="content">

                    <div class="content-left">
                        <img src="img/photo/情侣-01.jpg">

                    </div>
                    <div class="content-center">

                        <div class="username">彤彤</div>
                        <div class="text">姐妹，我分手了，呜呜呜</div>

                    </div>

                    <div class="content-right">13:14</div>

                </div>


                <div class="content">

                    <div class="content-left">

                        <img src="img/photo/女孩-02.jpeg">

                    </div>
                    <div class="content-center">

                        <div class="username">王悦</div>
                        <div class="text">出来玩啊</div>
                    </div>

                    <div class="content-right">13:15</div>

                </div>

                <div class="content">
                    <div class="content-left">

                        <img src="img/photo/wuhong.jpg">

                    </div>
                    <div class="content-center">

                        <div class="username">数学老师</div>

                        <div class="text">这道题做的不对</div>

                    </div>
                    <div class="content-right">15:32</div>

                </div>


                <div class="content">
                    <div class="content-left">

                        <img src="img/photo/java.png">

                    </div>
                    <div class="content-center">

                        <div class="username">java</div>

                        <div class="text">学好java，走遍天下都不怕</div>

                    </div>

                    <div class="content-right">15:34</div>

                </div>


                <div class="content">

                    <div class="content-left">
                        <img src="img/photo/elm.jpg">
                        <div class="new-msg">1</div>

                    </div>

                    <div class="content-center">

                        <div class="username">创造</div>
                        <div class="text-radio">一起联手，创造奇迹</div>

                    </div>

                    <div class="content-right">18:09</div>
                </div>
            </div>
			
			<!-- 底部菜单 -->
        <div id="menu">
            <!-- 微信 -->
            <div class="menu-div" data-icon-normal="img/icon/menu/聊天.svg" data-icon-press="img/icon/menu/聊天-press.svg" data-target="wrap-chat">
                <div>
                    <img class="icon" src="img/icon/menu/聊天-press.svg" style="transform: scale(1.2);">
                </div>
                <div class="font-menu">微信</div>
            </div>

            <!-- 通讯录 -->
            <div class="menu-div" data-icon-normal="img/icon/menu/通讯录.svg" data-icon-press="img/icon/menu/通讯录-press.svg" data-target="wrap-add-friend">
                <div>
                    <img class="icon" src="img/icon/menu/通讯录.svg">
                </div>
                <div class="font-menu">通讯录</div>
            </div>

            <!-- 发现 -->
            <div class="menu-div" data-icon-normal="img/icon/menu/发现.svg" data-icon-press="img/icon/menu/发现-press.svg" data-target="wrap-discovery">
                <div>
                    <img class="icon" src="img/icon/menu/发现.svg" style="transform: scale(.9);">
                </div>
                <div class="font-menu">发现</div>
            </div>

            <!-- 我 -->
            <div class="menu-div" data-icon-normal="img/icon/menu/me.svg" data-icon-press="img/icon/menu/me-press.svg" data-target="wrap-me">
                <div>
                    <img class="icon" src="img/icon/menu/me.svg" style="transform: scale(.9);">
                </div>
                <div class="font-menu">我</div>
            </div>
        </div>

        </div>
        </body>
        </html>

下面是css部分
common.css

html,
body {
    height: 100%;
    width: 100%;
    font-family: 'Courier New', Courier, monospace;
}

/* 
* 表示所有的标签
font-weight 文字粗细
padding 填充
margin 间距
*/

* {
    font-weight: 300;
    padding: 0;
    margin: 0;
}


/* 禁用滚动条 */

::-webkit-scrollbar {
    display: none;
}


/* 测试边框  */

.show-border {
    border: 1px red solid;
}

container.css


#container {
    width: 100%;
    height: 100%;
    /* 弹性布局 */
    display: flex;
    /* 垂直显示 */
    flex-direction: column;
    /* 设置对齐,平均分配 */
    justify-content: space-between;
    /* 窗口定位 */
    position: fixed;
}

header-menu.css

/* 弹出菜单容器 */

#popup-menu {
    height: 190px;
    width: 140px;
    background: #424242;
    position: absolute;
    /* 保存上方显示 */
    z-index: 1;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    align-items: center;
    top: 75px;
    right: 4px;
}


/* 向上箭头 */

#small-triangle-up {
    /* 相对定位 */
    position: relative;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #424242;
    top: -10px;
    right: -54px;
}

.popup-menu-content {
    width: 90%;
    border-bottom: 1px solid #616161;
    display: flex;
    padding: 6px 0 6px 0;
}


/* 最后的元素去掉下边框 */

.popup-menu-content:last-child {
    border-bottom: none;
}

.popup-menu-content div {
    padding: 0 10px 0 10px;
}

.popup-menu-content-icon img {
    height: 22px;
    width: 22px;
}

header.css

#header {
    background-image: linear-gradient(to bottom, #212121, #616161);
    min-height: 30px;
    text-align: center;
    display: flex;
    justify-content: space-between;
}

.header-font {
    color: white;
    line-height: 30px;
    font-weight: 700;
}


/* 返回 */

#header-control {
    width: 33%;
    padding-left: 6px;
    display: flex;
    align-items: center;
}

#header-control div:nth-child(1) {
    height: 18px;
    width: 18px;
    background: url(../img/icon/material/返回.svg) no-repeat;
    /* 图片高宽自适应 */
    background-size: contain;
}


/* 信息条数 */

#msg {
    width: 34%;
    line-height: 30px;
    font-weight: 700;
}


/* 加号 */

#function {
    width: 33%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 8px;
}


/* 符号 */

#add {
    height: 22px;
    width: 22px;
    background: url(../img/icon/material/加号.svg) no-repeat;
    background-size: contain;
}

menu.css

在这里插/* 底部菜单容器 */

#menu {
    height: 60px;
    display: flex;
    /* 内阴影 */
    box-shadow: 0 1px 1px gainsboro inset;
    /* 透明度 */
    opacity: .8;
}


/* 菜单选项 */

.menu-div {
    width: 25%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    align-items: center;
}

.menu-div img {
    height: 23px;
    width: 23px;
    opacity: .7;
}

.font-menu {
    margin-top: 4px;
    font-weight: 200;
    font-size: 90%;
}入代码片

phone-titles.css

#phone-title {
    display: flex;
    justify-content: space-between;
    height: 35px;
    background: #212121;
    color: white;
    font-size: 12px;
}


/* 信号 */

#phone-title-left {
    width: 33%;
    display: flex;
    /* 垂直居中 */
    align-items: center;
}


/* 信号圆圈  */

.signal,
.no-signal {
    height: 7px;
    width: 7px;
    /* 设置圆角,圆形 */
    border-radius: 50%;
    border: 1px white solid;
    background: white;
    margin: 1px;
}


/* 无信号 */

.no-signal {
    background: #212121;
}


/* 顶部时间 */

#phone-title-center {
    width: 34%;
    display: flex;
    /* 水平居中 */
    justify-content: center;
    align-items: center;
}


/* 电池 */

#phone-title-right {
    width: 33%;
    display: flex;
    /* 居右 */
    justify-content: flex-end;
    align-items: center;
}


/* 电池壳 */

#phone-title-right div:nth-child(2) {
    border: 1px white solid;
    height: 11px;
    width: 30px;
    margin-left: 4px;
}


/* 电量 */

#phone-title-right div:nth-child(2) div {
    height: 11px;
    width: 23px;
    background: #76ff03;
}


/* 正极 */

#phone-title-right div:nth-child(3) {
    background: white;
    height: 7px;
    width: 2px;
    margin-right: 6px;
}

wrap-chat.css

#wrap-chat {
    height: 100%;
    /* 占用剩余布局 */
    flex-grow: 1;
    /* 裁剪剩余部分，滚动显示 */
    overflow-y: scroll;
    background: whitesmoke;
}


/* 搜索框容器 */

#search {
    height: 40px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid gainsboro;
    box-shadow: 0 0 2px ghostwhite;
}


/* 搜索框 */

#search input {
    height: 26px;
    width: 99%;
    border: 1px solid gainsboro;
    box-shadow: 0 0 10px gainsboro inset;
    background: url(../img/icon/control/搜索.svg) no-repeat;
    background-size: 16px;
    background-position: center;
}


/* 获取焦点取消背景 */

#search input:focus {
    background: none;
}


/* 对话列表容器 */

#lists {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    width: 100%;
    margin: 0 auto;
}


/* 每条消息容器 */

.content {
    height: 64px;
    background: white;
    border-bottom: 1px gainsboro solid;
    padding: 0 4px 0 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* 左侧头像 */

.content-left {
    height: 52px;
    width: 52px;
}

.content-left img {
    height: 52px;
    width: 52px;
    border-radius: 7px;
}


/* 中间用户名和聊天消息 */

.content-center {
    height: 52px;
    flex-grow: 1;
    padding-left: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    /* 强制不换行 */
    white-space: nowrap;
    /* 超出隐藏 */
    overflow: hidden;
}

.username {
    width: 100%;
    height: 24px;
    font-size: 1em;
    color: #000;
    font-weight: 550;
}

.text,
.text-radio {
    width: 100%;
    height: 20px;
    font-size: 14px;
    color: #9e9e9e;
}

.text-radio {
    color: #bf360c;
}

.content-right {
    height: 52px;
    width: 60px;
    font-size: 10px;
    text-align: right;
    color: #9e9e9e;
}


/* 新消息 */

.new-msg {
    height: 14px;
    width: 14px;
    border-radius: 50%;
    background: red;
    font-weight: 600;
    font-size: 10px;
    color: white;
    line-height: 14px;
    text-align: center;
    position: relative;
    top: -55px;
    left: 43px;
}

js部分太多了，盛不下，如果有童鞋想要的话私聊我叭，今天记录就到这里啦，下次就是微信的通讯录了~

凡人晶
关注
HTML5仿微信聊天界面和朋友圈代码 H5
PmtxPhp的博客
09-24 1318
在上面的代码中，我们使用JavaScript获取输入框和消息/动态显示区域的引用，并定义了相应的函数来处理发送消息和发布动态的逻辑。请注意，上述代码只是一个简单的示例，用于演示如何使用HTML5、CSS和JavaScript创建仿微信聊天界面和朋友圈。通过将上述HTML、CSS和JavaScript代码组合在一起，我们就可以实现一个简单的仿微信聊天界面和朋友圈的页面。在这个文件中，我们将定义聊天界面和朋友圈的样式。在上面的代码中，我们设置了聊天界面和朋友圈容器的样式，包括宽度、高度、边框和背景颜色等。
html网页设计仿微信首页
qq_65208855的博客
05-20 2482
最近学习了h5c3 ，做了个仿微信首页，浅发一下吧~ 聊天内容虚构，仅供参考！ 效果图如下所示 话不多说，核心代码 html设置 <body> <!-- 顶部 --> <div class="a1 ee"> <div class="a1_b1">微信</div> <div class="a1_b2"> <div class="a1_c1"><img src="image.
html5实现的仿网页版微信聊天界面效果源码.rar_h5仿聊天_html5 网页_html5聊天源码_仿微信 聊天_聊天微信
07-13
html5实现的仿网页版微信聊天界面效果源码
html5 仿微信聊天界面
05-17
html5仿网页版微信聊天界面代码
html聊天程序主页
最新发布
Inin888yoxi的博客
09-01 346
聊天
html5仿微信聊天界面
03-08
html5仿微信聊天界面
【html】用html模拟微信布局
weixin_56334307的博客
05-31 976
您做的这个模拟微信布局的作品很不错，使用了Flexbox布局来实现元素的灵活排列。
太强了！这款仿微信的聊天工具开源了！
weixin_43400476的博客
07-08 1105
盒子IM —— 一个仿微信实现的网页版聊天软件，支持私聊、群聊、离线消息、发送语音、图片、文件、emoji 表情等功能，不依赖任何第三方收费组件。
模拟微信主界面H5
01-15
超仿真微信主界面，各项功能齐全，界面美观，适合微信平台多场景二次开发！
环信IM（PC-WEB端整体实现）
点滴记录
04-04 6513
主搞后端开发，前端技术不是很6，望大神勿喷！环信官网的web-im api是一个巨坑，前端兄弟一脸懵逼，无奈只能帮前端兄弟写这个demo，一阵心酸和泪水~~~~完整的资源下载地址：点击下载片段如下：（只提供思路和基本demo，请勿喷代码风格和洁癖，毕竟我只是帮忙搞这个。。。。）&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/...
html5+css3仿微信底部菜单(可自定义)
12-24
采用html5+css3写的仿微信底部菜单(可自定义)，喜欢的可以下载，演示地址：t.caozha.com/m/
html5实现的仿网页版微信聊天界面效果特效代码
03-20
这是一款基于html5实现的仿网页版微信聊天界面效果源码，可实现微信网页版聊天界面效果，在编辑框编辑文字之后按Ctrl+Enter键即可提交文字到聊天对话框上。整体效果流畅逼真，是一款比较经典的HTML5特效源码。建议使用支持HTML5与css3效果较好的火狐或谷歌等
精仿微信详情页html源码
12-04
精仿微信详情页html源码，就是微信中点一个内容的那个页面。适合个人web站做微信接口的详情页。
HTML5仿微信聊天页面框架
11-07
HTML5仿微信聊天页面框架, 一个页面内四个TAB页，完成了添加条目与对话条目部分，直接后台对接即可。
仿微信主界面
09-28
简单模仿微信主界面的效果
html实现微信界面
02-06
个人模仿微信写的小项目，实现了基本的六个界面，代码详尽
仿微信引导页面HTML
03-18
在本项目中，`index.html`应该是引导页的核心，包含着模仿微信引导页的HTML元素和布局。 2. **编辑内容**：这表明该源码是开放的，允许用户直接修改HTML代码以定制自己的引导页。这种灵活性对于开发者来说非常有...
一个模仿微信主界面左右滑动和点击按钮进入不同模块的程序
11-09
本篇将深入探讨如何模仿微信主界面的左右滑动和按钮点击功能，以实现一个类似的功能模块。 首先，我们要理解微信主界面的核心特性。这个界面通常包含底部固定的导航栏，用户可以通过点击导航栏上的图标进入不同的...
仿微信支付页面
06-01
1. **index.html** - 这是项目的主入口文件，包含HTML标记和结构，定义了页面的基本布局和内容，可能包括支付页面的各种元素如标题、金额、按钮等。 2. **cg.html** - 另一个HTML文件，可能包含额外的示例或案例，...
仿微信聊天界面html
08-18
你可以使用以下HTML代码来实现一个简单的仿微信聊天界面： ```html <!DOCTYPE html> <html> <head> <title>仿微信聊天界面</title> <style> body { background-color: #f5f5f5; font-family: Arial, sans-serif; margin: 0; padding: 0; } .chat-container { width: 400px; margin: 20px auto; background-color: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .chat-header { padding: 10px; background-color: #f6f6f6; border-bottom: 1px solid #ddd; font-size: 18px; font-weight: bold; } .chat-body { padding: 10px; height: 300px; overflow-y: scroll; } .message { margin-bottom: 10px; padding: 10px; border-radius: 5px; } .message.sender { background-color: #dcf8c6; text-align: right; } .message.receiver { background-color: #fff; text-align: left; } .message.sender .message-text { color: #333; } .message.receiver .message-text {
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值