html+css 微信界面（续一之html）
2024-05-13 18:23:48
现在开始贴代码了
html–index
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" type="text/css" href="css/base.css"/><link rel="stylesheet" href="css/index.css"><link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"></head><body><!-- 外框 --><div class="frame"><!-- 顶部框 --><div class="frame_top"><!-- 顶部 --><div class="top"><!-- 左边时间 --><div class="topl">8:27</div><!-- 右边 --><div class="topr"><p class="fa fa-headphones"></p><p class="fa fa-tachometer"></p><p class="fa fa-microchip"></p><p class="fa fa-signal"></p><p class="fa fa-signal"></p><p class="fa fa-battery-3">80</p></div></div><!-- 头部 --><div class="head"><div class="headl">微信</div><div class="headr"><p class="fa fa-search"></p><p class="fa fa-plus-circle"></p></div></div></div><!-- 代替顶部框的白条 --><div class="frame_topti"></div><!-- 主体 --><div class="main"><!-- 聊天列表 --><div class="chat"><!-- 头像 --><div class="chatphoto"><img src="img/Vicious%20.jpeg" alt=""></div><!-- 新消息 --><div class="newchat"><!-- 聊天人名+时间 --><div class="chatrt"><p>Vicious</p><p>昨天</p></div><p>[语音通话]</p></div></div><!-- 聊天列表 --><div class="chat"><!-- 头像 --><div class="chatphoto"><img src="img/苏烟.jpeg" alt=""></div><!-- 新消息 --><div class="newchat"><!-- 聊天人名+时间 --><div class="chatrt"><p>苏烟</p><p>昨天</p></div><p>[图片]</p></div></div><!-- 聊天列表 --><div class="chat"><!-- 头像 --><div class="chatphoto"><img src="img/Lovexo.jpeg" alt=""></div><!-- 新消息 --><div class="newchat"><!-- 聊天人名+时间 --><div class="chatrt"><p>Lovexo</p><p>昨天</p></div><p>哈哈，所以你就帮忙消灭了</p></div></div><!-- 聊天列表 --><div class="chat"><!-- 头像 --><div class="chatphoto"><img src="img/一只小恐龙.jpeg" alt=""></div><!-- 新消息 --><div class="newchat"><!-- 聊天人名+时间 --><div class="chatrt"><p>一只小恐龙</p><p>昨天</p></div><p>哈哈，不会是扯着蛋了吧！</p></div></div><!-- 聊天列表 --><div class="chat"><!-- 头像 --><div class="chatphoto"><img src="img/Alone.jpeg" alt=""></div><!-- 新消息 --><div class="newchat"><!-- 聊天人名+时间 --><div class="chatrt"><p>Alone</p><p>昨天</p></div><p>[语音]</p></div></div><!-- 聊天列表 --><div class="chat"><!-- 头像 --><div class="chatphoto"><img src="img/玖.jpeg" alt=""></div><!-- 新消息 --><div class="newchat"><!-- 聊天人名+时间 --><div class="chatrt"><p>玖</p><p>昨天</p></div><p>你快做一个欠扁的表情!</p></div></div><!-- 聊天列表 --><div class="chat"><!-- 头像 --><div class="chatphoto"><img src="img/sunshine.jpeg" alt=""></div><!-- 新消息 --><div class="newchat"><!-- 聊天人名+时间 --><div class="chatrt"><p>sunshine</p><p>昨天</p></div><p>你的小可爱已上线，天干物燥，小心她闹</p></div></div><!-- 聊天列表 --><div class="chat"><!-- 头像 --><div class="chatphoto"><img src="img/小新小新.jpeg" alt=""></div><!-- 新消息 --><div class="newchat"><!-- 聊天人名+时间 --><div class="chatrt"><p>小新小新</p><p>昨天</p></div><p>当幸福来敲门的时候，我却踌躇着向左还是右</p></div></div><!-- 聊天列表 --><div class="chat"><!-- 头像 --><div class="chatphoto"><img src="img/Superficial.jpeg" alt=""></div><!-- 新消息 --><div class="newchat"><!-- 聊天人名+时间 --><div class="chatrt"><p>Superficial</p><p>昨天</p></div><p>开始工作就瞌睡，群众意见齐反对</p></div></div><!-- 聊天列表 --><div class="chat"><!-- 头像 --><div class="chatphoto"><img src="img/卿久久.jpeg" alt=""></div><!-- 新消息 --><div class="newchat"><!-- 聊天人名+时间 --><div class="chatrt"><p>卿久久</p><p>昨天</p></div><p>"问你个问题</p></div></div><!-- 聊天列表 --><div class="chat"><!-- 头像 --><div class="chatphoto"><img src="img/画卿颜.jpeg" alt=""></div><!-- 新消息 --><div class="newchat"><!-- 聊天人名+时间 --><div class="chatrt"><p>画卿颜</p><p>昨天</p></div><p>你想清楚再跟我说话</p></div></div></div><!-- 底部 --><div class="menu"><div><a href="index.html" style="color: green;"><span class="fa fa-comment"></span><span>微信</span></a></div><div><a href="friend.html" ><span class="fa fa-vcard-o"></span><span>通讯录</span></a></div><div><a href="find.html" ><span class="fa fa-compass"></span><span>发现</span></a></div><div><a href="me.html" ><span class="fa fa-user"></span><span>我</span></a></div></div></div></body>
</html>html—friend
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" type="text/css" href="css/base.css" /><link rel="stylesheet" href="css/index.css"><link rel="stylesheet" href="css/friend.css"><link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"></head><body><!-- 外框 --><div class="frame"><!-- 顶部框 --><div class="frame_top"><!-- 顶部 --><div class="top"><!-- 左边时间 --><div class="topl">8:27</div><!-- 右边 --><div class="topr"><p class="fa fa-headphones"></p><p class="fa fa-tachometer"></p><p class="fa fa-microchip"></p><p class="fa fa-signal"></p><p class="fa fa-signal"></p><p class="fa fa-battery-3">80</p></div></div><!-- 头部 --><div class="head"><div class="headl">通讯录</div><div class="headr"><p class="fa fa-search"></p><p class="fa fa-plus-circle"></p></div></div></div><!-- 代替顶部框的白条 --><div class="frame_topti"></div><!-- 主体 --><div class="main" id="friendmain"><div class="mainml"><div class="contact"><img src="img/添加新朋友.png" alt=""><p>新的朋友</p></div><div class="contact"><img src="img/群聊.png" alt=""><p>群聊</p></div><div class="contact"><img src="img/标签.png" alt=""><p>标签</p></div><div class="contact"><img src="img/公众号图标.png" alt=""><p>公众号</p></div><p style="font-size: 2vmin;">A</p><div class="contact"><img src="img/Alone.jpeg" alt=""><p>Alone</p></div><p style="font-size: 2vmin;">B</p><div class="contact"><img src="img/boby.jpg" alt=""><p>boby</p></div><div class="contact"><img src="img/big.jpg" alt=""><p>big</p></div><p style="font-size: 2vmin;">C</p><div class="contact"><img src="img/Corrupt.jpeg" alt=""><p>Corrupt</p></div><p style="font-size: 2vmin;">E</p><div class="contact"><img src="img/Empress.jpeg" alt=""><p>Empress</p></div><p style="font-size: 2vmin;">H</p><div class="contact"><img src="img/画卿颜.jpeg" alt=""><p>画卿颜</p></div><p style="font-size: 2vmin;">J</p><div class="contact"><img src="img/玖.jpeg" alt=""><p>玖</p></div><p style="font-size: 2vmin;">L</p><div class="contact"><img src="img/Lovexo.jpeg" alt=""><p>Lovexo</p></div><p style="font-size: 2vmin;">M</p><div class="contact"><img src="img/Monologue.jpeg" alt=""><p>Monologue</p></div><div class="contact"><img src="img/Mine.jpg" alt=""><p>Minemine</p></div><p style="font-size: 2vmin;">Q</p><div class="contact"><img src="img/卿久久.jpeg" alt=""><p>卿久久</p></div><p style="font-size: 2vmin;">S</p><div class="contact"><img src="img/Superficial.jpeg" alt=""><p>Superficial</p></div><div class="contact"><img src="img/sunshine.jpeg" alt=""><p>sunshine</p></div><div class="contact"><img src="img/苏烟.jpeg" alt=""><p>苏烟</p></div><p style="font-size: 2vmin;">V</p><div class="contact"><img src="img/Vicious%20.jpeg" alt=""><p>Vicious</p></div><p style="font-size: 2vmin;">X</p><div class="contact"><img src="img/小新小新.jpeg" alt=""><p>小新小新</p></div><p style="font-size: 2vmin;">Y</p><div class="contact"><img src="img/一只小恐龙.jpeg" alt=""><p>一只小恐龙</p></div></div><div class="mainmr"><ul><li>↑</li><li>A</li><li>B</li><li>C</li><li>D</li><li>E</li><li>F</li><li>G</li><li>H</li><li>I</li><li>J</li><li>K</li><li>L</li><li>M</li><li>N</li><li>O</li><li>P</li><li>Q</li><li>R</li><li>S</li><li>T</li><li>U</li><li>V</li><li>W</li><li>X</li><li>Y</li><li>Z</li><li>#</li></ul></div></div><!-- 底部 --><div class="menu"><div><a href="index.html"><span class="fa fa-comment"></span><span>微信</span></a></div><div><a href="friend.html" style="color: green;"><span class="fa fa-vcard-o"></span><span>通讯录</span></a></div><div><a href="find.html"><span class="fa fa-compass"></span><span>发现</span></a></div><div><a href="me.html"><span class="fa fa-user"></span><span>我</span></a></div></div></div></body>
</html>html–find
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" type="text/css" href="css/base.css"/><link rel="stylesheet" href="css/index.css"><link rel="stylesheet" href="css/find.css"><link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"></head><body><!-- 外框 --><div class="frame"><!-- 顶部框 --><div class="frame_top"><!-- 顶部 --><div class="top"><!-- 左边时间 --><div class="topl">8:27</div><!-- 右边 --><div class="topr"><p class="fa fa-headphones"></p><p class="fa fa-tachometer"></p><p class="fa fa-microchip"></p><p class="fa fa-signal"></p><p class="fa fa-signal"></p><p class="fa fa-battery-3">80</p></div></div><!-- 头部 --><div class="head"><div class="headl">发现</div><div class="headr"><p class="fa fa-search"></p><p class="fa fa-plus-circle"></p></div></div></div><!-- 代替顶部框的白条 --><div class="frame_topti"></div><!-- 主体 --><div class="main" id="main"><!-- 发现ing1 --><div class="find" style="margin-bottom: 1.5vh;"><a href="pengyouquan.html"><!-- 图标 --><img src="img/朋友圈.png" alt=""><!-- 文字提示 --><div class="prompt"><p class="promptl">朋友圈</p><p class="fa fa-angle-right"></p></div></a></div><!-- 发现ing2 --><div class="find" ><a href=" "><!-- 图标 --><img src="img/扫一扫.png" alt=""><!-- 文字提示 --><div class="prompt" style="border-bottom: 0.1vh solid #EDEDED;padding-bottom: 1.5vh;"><p class="promptl">扫一扫</p><p class="fa fa-angle-right"></p></div></a></div><!-- 发现ing3 --><div class="find" style="margin-bottom: 1.5vh;"><a href=""><!-- 图标 --><img src="img/摇一摇.png" alt=""><!-- 文字提示 --><div class="prompt"><p class="promptl">摇一摇</p><p class="fa fa-angle-right"></p></div></a></div><!-- 发现ing4 --><div class="find" style="margin-bottom: 1.5vh;"><a href=""><!-- 图标 --><img src="img/搜一搜.png" alt=""><!-- 文字提示 --><div class="prompt"><p class="promptl">搜一搜</p><p class="fa fa-angle-right"></p></div></a></div><!-- 发现ing5 --><div class="find" style="margin-bottom: 1.5vh;"><a href=""><!-- 图标 --><img src="img/附近的人icon.png" alt=""><!-- 文字提示 --><div class="prompt"><p class="promptl">附近的人</p><p class="fa fa-angle-right"></p></div></a></div><!-- 发现ing6 --><div class="find" style="margin-bottom: 1.5vh;"><a href=""><!-- 图标 --><img src="img/游戏.png" alt=""><!-- 文字提示 --><div class="prompt"><p class="promptl">游戏</p><p class="fa fa-angle-right"></p></div></a></div><!-- 发现ing --><div class="find"><a href=""><!-- 图标 --><img src="img/小程序.png" alt=""><!-- 文字提示 --><div class="prompt" ><p class="promptl">小程序</p><p class="fa fa-angle-right"></p></div></a></div></div><!-- 底部 --><div class="menu"><div><a href="index.html" ><span class="fa fa-comment"></span><span>微信</span></a></div><div><a href="friend.html" ><span class="fa fa-vcard-o"></span><span>通讯录</span></a></div><div><a href="find.html" style="color: green;"><span class="fa fa-compass"></span><span>发现</span></a></div><div><a href="me.html" ><span class="fa fa-user"></span><span>我</span></a></div></div></div></body>
</html>html–me
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" type="text/css" href="css/base.css"/><link rel="stylesheet" href="css/index.css"><link rel="stylesheet" href="css/me.css"><link rel="stylesheet" href="css/find.css"><link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"></head><body><!-- 外框 --><div class="frame"><!-- 顶部框 --><div class="frame_top"><!-- 顶部 --><div class="top"><!-- 左边时间 --><div class="topl">8:27</div><!-- 右边 --><div class="topr"><p class="fa fa-headphones"></p><p class="fa fa-tachometer"></p><p class="fa fa-microchip"></p><p class="fa fa-signal"></p><p class="fa fa-signal"></p><p class="fa fa-battery-3">80</p></div></div><!-- 头部 --><div class="head"><div class="headl"></div><div class="headr"><p class=""></p><p class=" fa fa-camera"></p></div></div></div><!-- 代替顶部框的白条 --><div class="frame_topti"></div><!-- 主体 --><div class="main" style="background-color: #EDEDED"><!-- minh --><div class="mainnews"><!-- 头像 --><img src="img/Mine.jpg" alt=""><!-- <div class="headphoto"></div> --><!-- 信息 --><div class="headnew"><!-- 名字 --><div id="name">Minemine</div><!-- 账号 --><div class="number"><!-- 号 --><div class="num ">微信号：XXXXXXXX</div><!-- 二维码 --><div class="erwei"><img src="img/二维码.png" alt=""><p class="fa fa-angle-right" style="font-size: 2vmin;"></p></div></div></div></div><div class="find" style=" margin-top: 2vh;margin-bottom: 2vh;"><a href=""><!-- 图标 --><img src="img/支付.png" alt=""><!-- 文字提示 --><div class="prompt"><p class="promptl">支付</p><p class="fa fa-angle-right" style="font-size:2vmin"></p></div></a></div><div class="find" ><a href=""><!-- 图标 --><img src="img/微信收藏.png" alt=""><!-- 文字提示 --><div class="prompt" style="border-bottom:1px solid #ededed;"><p class="promptl">收藏</p><p class="fa fa-angle-right" style="font-size:2vmin"></p></div></a></div><div class="find" ><a href=""><!-- 图标 --><img src="img/相册.png" alt=""><!-- 文字提示 --><div class="prompt" style="border-bottom:1px solid #ededed;"><p class="promptl">相册</p><p class="fa fa-angle-right" style="font-size:2vmin"></p></div></a></div><div class="find" ><a href=""><!-- 图标 --><img src="img/卡包.png" alt=""><!-- 文字提示 --><div class="prompt" style="border-bottom:1px solid #ededed;"><p class="promptl">卡包</p><p class="fa fa-angle-right" style="font-size:2vmin"></p></div></a></div><div class="find" ><a href=""><!-- 图标 --><img src="img/icon表情.png" alt=""><!-- 文字提示 --><div class="prompt" ><p class="promptl">表情</p><p class="fa fa-angle-right" style="font-size:2vmin"></p></div></a></div><div class="find" style=" margin-top: 2vh;margin-bottom: 2vh;"><a href=""><!-- 图标 --><img src="img/设置.png" alt=""><!-- 文字提示 --><div class="prompt"><p class="promptl">设置</p> <p class="fa fa-angle-right" style="font-size:2vmin"></p></div></a></div></div><!-- 底部 --><div class="menu"><div><a href="index.html" ><span class="fa fa-comment"></span><span>微信</span></a></div><div><a href="friend.html" ><span class="fa fa-vcard-o"></span><span>通讯录</span></a></div><div><a href="find.html" ><span class="fa fa-compass"></span><span>发现</span></a></div><div><a href="me.html" style="color: green;"><span class="fa fa-user"></span><span>我</span></a></div></div></div></body>
</html>html–pengyouquan
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" type="text/css" href="css/base.css" /><link rel="stylesheet" href="css/index.css"><link rel="stylesheet" href="css/pengyouquan.css"><link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"><script language="JavaScript" src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script></head><body><!-- 外框 --><div class="frame"><!-- 顶部框 --><div class="frame_top"><!-- 顶部 --><div class="top" style="background-color: transparent;"><!-- 左边时间 --><div class="topl">8:27</div><!-- 右边 --><div class="topr"><p class="fa fa-headphones"></p><p class="fa fa-tachometer"></p><p class="fa fa-microchip"></p><p class="fa fa-signal"></p><p class="fa fa-signal"></p><p class="fa fa-battery-3">80</p></div></div><!-- 头部 --><div class="head" style="background-color: transparent;"><div class="headl"><a href="find.html"><i class="fa fa-angle-left" style="font-size: 3vmin;"></i></a></div><div class="headr"><p class=""></p><p class="fa fa-camera"></p></div></div></div><!-- 主体 --><div class="mainpyq"><div class="maintou"><img src="img/bc.jpg" alt="" style="width: 20vw;height: 25vh;"> </div><div class="topphoto"><div id="topphoto"><p>Minemine</p><img src="img/Mine.jpg" alt=""></div></div><!-- 朋友圈内容1 --><!-- <div class="pyqnews"><div class="pyqtou" ><img src="img/li.jpg" alt=""></div><div class="new"><p>李云龙</p><p>二营长，你他娘的给老子滚过来！</p><div class="newtime"><p>19:52</p><p>· ·</p></div></div></div> --><!-- 朋友圈内容1 --><div class="pyqnews"><!-- 头像 --><div class="pyqtou" ><img src="img/li.jpg" alt=""></div><!-- new --><div class="new"><p>李云龙</p><p>二营长，你他娘的给老子滚过来！</p><!-- 时间区 --><div class="newtime"><p>19:52</p><p id="11" onclick="myonclick" style="margin-left: 2vw;">· ·</p><div id="22" style="width: 3vw;height: 3vh;
background-color: #0000FF;margin-left: -14vw;display: none;
clip-path: polygon(80% 0, 0 0, 0 100%, 78% 100%, 100% 26%);display: flex;justify-content: space-between;"><p style="font-size: 0.5vmin;">❤点赞</p><p style="font-size: 0.5vmin;margin-right: 2vw;">评论</p></div></div></div></div></div></div></div></body><script type="text/javascript">$("#11").click(function(e){e.stopPropagation();$("#22").toggle();if($("#22").is(":visible")){$(document).one("click",function(){$("#22").hide();});}});$("#btncon").on("click",function(e){e.stopPropagation();})</script>
</html>html+css 微信界面（续一之html）相关推荐
- html+css 微信界面（续二之css）
直接整代码,没有废话!! css–index .top .topl{font-size: 0.8vmin;margin-left: 0;/* margin-top: 1vh; */ } .topr{m ...
- html+css仿制微信界面
html+css仿制微信界面 index.css html index.css * {margin: 0;padding: 0; }#wrap {margin: 0 auto;height: 100v ...
- 用HTML+CSS写一个手机微信界面
在手机微信里面,其实有很多很好玩的动效. 今日突然奇想,想通过前端的方式去实现微信里的部分动效. 当然,我们该选择哪个界面呢? 我首先想到了聊天窗口,因为这部分相对来说.简单. 构思: 于是,我就开始 ...
- html+css 小项目 微信界面
我的微信界面是按照我的手机来的,其中设宽高的时候有点失误,导致在横屏的时候看着是扁的!!!!这个需要更改一下!!朋友圈的内容在另外一个软件上,没有找的,就只能用刚开始写的那个啦!! 话不多说,先上效果 ...
- imchat视频聊天室 linux,基于Nuxt+Vant聊天模板|nuxt.js仿微信界面|红包|朋友圈
项目说明 > [NuxtIMChat项目]是基于vue.js+nuxt.js+vuex+webpack+vant-ui开发的仿微信聊天实例.实现了消息发送.图片/视频预览.下拉刷新/长按弹窗.朋 ...
- H5仿微信界面教程(一)
前言 先来张图,仿微信界面,界面如下,并不完全一模一样,只能说有些类似,希望大家见谅. 1 用到的知识点 jQuery WeUI 是WeUI的一个jQuery实现版本,除了实现了官方插件之外,它还提供 ...
- 是男人就下100层【第一层】——高仿微信界面（4）
上一篇<是男人就下100层[第一层]--高仿微信界面(3)>中我们完成了登录,这一篇看完成登录后的一个短暂加载和引导界面. 加载界面: <RelativeLayout xmlns:a ...
- Android微信界面的设计
Android微信界面的设计 [尊重原创,转载请注明出处]http://blog.csdn.net/guyuealian/article/details/51777792 微信6.0主界面: (1 ...
- WPF仿微信界面发送消息简易版
WPF仿微信界面发送消息简易版 参考别的博主的例子用WPF MVVM框架来仿了一个微信聊天界面,做了个发送消息简易功能,下面一起来看看吧! 以下为View视图布局代码,消息对话框的样式直接在这里定义了 ...
最新文章
- 为 区域添加 Tag
- 大数据分析处理框架——离线分析（hive，pig，spark）、近似实时分析（Impala）和实时分析（storm、spark streaming）...
- ubuntu160.4+anaconda3 +tensorflow1.140 +keras2.2.5安装
- 阿里文娱测试开发专家谈《算法基石：实时数据质量如何保障？》
- “chaos“的算法--之双向链表
- Shell的 for 循环小例子
- one more step_KDA新歌《MORE》的一些冷知识：伊芙琳换回原声，摩托车是定制的
- java执行数据库命令行_java程序执行命令行，解锁数据库表
- wangEditor-3.1.1 自己扩展的， 扩展图片添加alt标签
- Linux：常用shell快捷键
- 大工17春计算机文化基础在线测试3,大工17春《计算机文化基础》在线测试3满分答案...
- 洛谷P2178 品酒大会【后缀数组】【单调栈】
- java格斗代码_java学习2打架代码编写
- 学大数据技术与应用的女生多吗？适合吗？
- Linux 应用程序安装卸载
- 【node.js】一个基于HTPP的服务
- Linux上安装Matlab2020a
- 原创 | 王欣：多维深耕打造数字化银行
- 如何让word左边显示目录
- 银行从业中级系列课程之——银行管理（一）宏观经济与环境