html+css模仿微信主页面
2024-05-13 02:54:00
上周，我们进行了认知实习，任务是模仿微信页面开发。接下来我会分成四段一一展现给大家，虽然完成的不是很准确精致大概框架还是有的，在记录自己成长进步的同时，也可能会给其他小伙伴一些建议。接下来，是微信的主页面。
上代码
首先是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>中国移动 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部分太多了，盛不下，如果有童鞋想要的话私聊我叭，今天记录就到这里啦，下次就是微信的通讯录了~
html+css模仿微信主页面相关推荐
- netty案例，netty4.1中级拓展篇五《基于Netty搭建WebSocket，模仿微信聊天页面》
前言介绍 本章节我们模仿微信聊天页面,开发一个基于Netty搭建WebSocket通信案例.Netty的应用方面非常广:聊天.MQ.RPC.数据等等,在5G到来的时候更加需要大量数据传输,Netty的 ...
- JS+HTML+CSS模仿微信界面发送信息
JS+HTML+CSS仿微信聊天界面 前端新人又来报道咯 欢迎大家指教 功能: 1.点击头像可以模拟切换用户. 2.输入信息,点击发送可以显示在屏幕上. 3.新信息在上方,旧信息在下方,方便有滚动条的 ...
- android布局实践——模仿微信主界面
这是目前微信6.0版本的主界面 先来分析一波: 1.(top.xml)界面头部有一个微信(6)消息提醒 一个搜索图标 一个更多的的图标+,中间还有一段空白,我们可以弄两个textView(其 ...
- Android ActionBar应用实战，高仿微信主界面的设计
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/26365683 经过前面两篇文章的学习,我想大家对ActionBar都已经有一个相对 ...
- MUI初体验 模仿微信页面
实训终于结束了,收获不少,本次实训最终作品要求使用MUI制作模仿微信的web前端页面. 截图一下本次实训成果,代码打包放在文末,方便与大家一起交流学习. 有时间将实现的过程写成博文记录一下. 一篇来自 ...
- 一个模仿微信群聊的H5页面
开始 上半年小米Max发布的时候,做了一个在朋友圈传播的模仿微信的群聊界面H5页面:一群公司的大咖在群里聊小米Max,用户可以向大咖们提问,以此了解产品. 页面的主体是群聊对话,同时在对话中包含了很多 ...
- html怎么实现聊天界面设计,纯css制作仿微信聊天页面
纯css制作仿微信聊天页面 *{ margin: 0; padding: 0; } body{ font-size: 14px; } .triangle{ margin: 100px auto ; w ...
- html模仿 商城 静态页面,HTML+CSS简单实现凡客商城静态网页
[实例简介] 用HTML+CSS模仿凡客商城做的静态页面,包括首页.列表页.详情页.登录.注册.购物车.支付页等 [实例截图] [核心代码] 凡客商城 └── 凡客商城 ├── css │ ├── ...
- 墨迹天气-模仿主页面ui
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
最新文章
- html作业三,3.15作业
- 添加墙元素实现碰撞效果
- python一个月能学成嘛-Python 从入门到精通：一个月就够了！
- MyCat 入门指南
- [科普]MinGW vs MinGW-W64及其它
- 码云 Gitee 新增仓库访问之 IP 白名单功能
- 数组的合并和升序排列_区间调度问题之区间合并
- DNN(DotNetNuke)注册用户终于突破10万人了，其3.0也终于跳票了...
- 数论 —— 线性同余方程组与中国剩余定理
- BZOJ2693：JZPTAP——题解
- PHP通过字符串调用函数
- .net dropdownlist 動態顯示，指定字段
- python函数超时，用装饰器解决 func_timeout
- 用MATLAB求定积分
- Web 前端：知道这些，至少有底气去面试了
- python读取txt文件中的内容并用逗号分割_数据分析—gt;文件读写
- [Fourier]傅里叶级数中虚数部分j去了哪里
- 微信小程序、uni-app获取经纬度，并将经纬度转化为确定的位置信息
- 摆扫式（whisk broom）和推扫式（push broom）卫星传感器
- [开源]Qt图片调整之饱和度调节