html+css模仿微信主页面

已于 2023-05-25 09:10:02 修改
阅读量4.7k 收藏 39
点赞数 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部分太多了，盛不下，如果有童鞋想要的话私聊我叭，今天记录就到这里啦，下次就是微信的通讯录了~

凡人晶
关注
  • 1
    点赞
  • 踩
  • 39
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
html网页设计仿微信首页
qq_65208855的博客
05-20 2281
最近学习了h5c3 ，做了个仿微信首页，浅发一下吧~ 聊天内容虚构，仅供参考！ 效果图如下所示 话不多说，核心代码 html设置 <body> <!-- 顶部 --> <div class="a1 ee"> <div class="a1_b1">微信</div> <div class="a1_b2"> <div class="a1_c1"><img src="image.
html+css 微信界面（续一之html）
独宠卿一人
08-28 6971
现在开始贴代码了 html–index <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/base.css"/>...
html5 仿微信聊天界面
05-17
html5仿网页版微信聊天界面代码
html+css仿微信底部自定义菜单
12-24
html css 仿微信底部自定义菜单 让微信开发页面体验更佳美好。
最全鸿蒙开发实战终极案例--高仿微信App（附源码）_仿微信app源码(1)，2024年最新阿里测试开发二面
最新发布
2401_84862038的博客
05-09 983
（**ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony****多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）**技术知识点。.divider({ strokeWidth: 1, color: ‘rgb(130,130,130)’, startMargin: 20, endMargin: 0 }) // 每行之间的分界线。
桃花微信（仿微信）项目介绍
桃花岛主的博客
06-10 456
好友：设置备注和标签、推荐名片、设置为星际朋友、设置朋友圈和动态权限、加入黑名单、投诉用户、删除好友，查找添加用户、扫一扫添加用户、发信息、查看朋友圈。聊天页可以发送文字和图片，图片可以放大、缩小，也可以发送音频，视频，保存到相册，发送消息：文字、图片、音频、短视频、表情包、拍摄、名片等功能。
websocket实现仿微信聊天功能
盛难晨
08-13 4419
后端使用的技术是springboot前端是H5+和mui框架。 具体步骤很多，我主要概况一下大概，如果有朋友想要源码欢迎加我qq997355706。 前端最主要的地方有4个： 分别是登录创建与后端websocket的连接，关闭连接和发生错误，和接收消息。 其中open和message又最为重要，里面包括了发送和接收消息。 wsopen: function() { console.log...
精仿微信举报投诉v2.0.2最新版公众号源码
04-18
精仿举报投诉v2.0.2最新版公众号源码 精仿举报投诉v2.0.2最新版公众号源码 精仿举报投诉v2.0.2最新版公众号源码 精仿举报投诉v2.0.2最新版公众号源码 请勿商业运营,违法使用和传播!仅供研究学习使用!
仿微信Html5版
热门推荐
程序猿开发日志【学习永无止境】
05-07 1万+
html5仿微信聊天实战项目案例 | h5仿微信支付、支付宝支付输入法键盘 | 带微信红包、表情、编辑器、微信支付键盘鉴于移动端h5聊天场景应用很广泛，最近利用空余时间开发了一个h5仿微信聊天功能项目，使用了html5+css3+jQ+zepto+weui+wcPop+swiper等技术进行开发，可以发送消息、表情，打赏、霸屏、发红包等功能。视频模板：&lt;!-- …… 图片预览弹窗.Start...
html5实现的仿网页版微信聊天界面效果特效代码
03-20
这是一款基于html5实现的仿网页版微信聊天界面效果源码，可实现微信网页版聊天界面效果，在编辑框编辑文字之后按Ctrl+Enter键即可提交文字到聊天对话框上。整体效果流畅逼真，是一款比较经典的HTML5特效源码。建议使用支持HTML5与css3效果较好的火狐或谷歌等
html5 web微信聊天窗口界面模板
12-19
html5 web微信聊天窗口界面模板,html5 web微信聊天窗口界面模板,html5 web微信聊天窗口界面模板,html5 web微信聊天窗口界面模板
WindChat（仿微信网页版）
06-28
SSM+Websocket+jQuery实现类似微信网页版即时聊天项目。
仿移动微信聊天APP页面(演示图+代码亲测).zip
09-29
仿移动微信聊天APP页面(演示图+代码亲测)
H5仿微信界面教程(一)
09-28
主要为大家详细介绍了H5仿微信界面教程的第一篇，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
仿微信页面
08-04
模仿微信主页的界面，OnPageChangeListener LayoutInflater
HTML5仿微信聊天界面、微信朋友圈实例代码
09-27
小编最近开发一个基于html5开发的一个微信聊天前端界面，功能很全面，下面小编给大家分享实例代码，需要的朋友参考下
html+css+js 仿微信红包
10-19
html+css+js 仿微信红包
Div+CSS仿微信公众平台登录页面
09-27
主要为大家详细介绍了Div+CSS仿微信公众平台登录页面的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
html+css+js模仿百度注册页面
07-27
html+css+js模仿百度注册页面，带表单验证
html+css+js登录页面
06-08
好的，我可以为你提供一个简单的HTML+CSS+JS登录页面的示例代码，如下所示： HTML代码： ``` <!DOCTYPE html> <html> <head> <title>登录页面</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="login-box"> <h2>登录</h2> <form> <p>用户名</p> <input type="text" name="username" placeholder="请输入用户名"> <p>密码</p> <input type="password" name="password" placeholder="请输入密码"> <input type="submit" name="submit" value="登录"> </form> </div> <script src="script.js"></script> </body> </html> ``` CSS代码： ``` body { background-color: #e6e6e6; } .login-box { width: 400px; height: 400px; background-color: #fff; margin: 100px auto; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.25); } h2 { text-align: center; margin-bottom: 30px; } form { display: flex; flex-direction: column; } p { margin-bottom: 5px; } input[type="text"], input[type="password"] { padding: 10px; margin-bottom: 20px; border-radius: 5px; border: none;

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值