H5仿微信界面教程(一)


Posted in HTML / CSS onJuly 05, 2017

前言

先来张图,仿微信界面,界面如下,并不完全一模一样,只能说有些类似,希望大家见谅。

H5仿微信界面教程(一)

1 用到的知识点

jQuery WeUI 是WeUI的一个jQuery实现版本,除了实现了官方插件之外,它还提供了如下拉刷新、日历、地址选择器等丰富的拓展组件。jQuery WeUI 中的JS组件均是以JQuery 插件的形式提供,使用非常方便,并且可以和React、Angular、VUE之类的主流JS框架一起使用。

WeUI 是微信官方团队针对微信提供的一个H5 UI库,它只提供了一组CSS组件。jQuery WeUI 中使用的是官方WeUI的CSS代码,并提供了jQuery/Zepto版本的API实现。因为直接使用了官方的CSS,所以你不用担心跟官方版本的冲突。实际上 jQuery WeUI == WeUI + jQuery插件。

Font Awesome 是一套完美的图标字体,主要目的是和 Bootstrap 搭配使用。

2 引入样式文件

<link href="static/lib/weui.css" rel="stylesheet" type="text/css" /> 
<link href="static/css/jquery-weui.css" rel="stylesheet" type="text/css" /> 
<link href="static/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css" />

3 先说底部菜单

<div class="weui-tabbar"> 
<a href="wx-wx.html" class="weui-tabbar__item "> <span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;">8</span> 
<div class="weui-tabbar__icon"> 
<i class="fa fa-comment-o fa-fw" style=" "></i> 
</div> <p class="weui-tabbar__label">微信</p> </a> 
<a href="wx-tongxulv.html" class="weui-tabbar__item"> 
<div class="weui-tabbar__icon"> 
<i class="fa fa-vcard-o" style=" "></i> 
</div> <p class="weui-tabbar__label">通讯录</p> </a> 
<a href="#tab3" class="weui-tabbar__item"> 
<div class="weui-tabbar__icon"> 
<i class="fa fa-compass " style=""></i> 
</div> <p class="weui-tabbar__label">发现</p> </a> 
<a href="wx-user.html" class="weui-tabbar__item weui-bar__item--on"> 
<div class="weui-tabbar__icon"> 
<i class="fa fa-user" style=" color:#0dba08;"></i> 
</div> <p class="weui-tabbar__label" style=" color:#0dba08;">我</p> </a> 
</div>

4 头部代码

<nav class="blue nav" style=" "> 
<a id="topPopovershow" href="#" class="button button-link right "> <i class="fa fa-plus fa-fw" style=" font-size:20px;" ></i> </a> 
<h1 class="title">微信</h1> 
</nav>

5 主体部分

<div class="page-content"> 
<div class="weui-cells" style="margin-top: 0px;">
<a class="weui-cell weui-cell_access open-popup weui-popup-modal " data-target="#full" href="javascript:;">
<div class="weui-cell__hd">
<img width="48px;" class="weui-media-box__thumb" src="images/timg5.jpg" alt="" class="self-header">
</div>
<div class="weui-cell__bd">
<div style=" margin-left:10px;">

<h4 class="weui-media-box__title">小楼听春雨菩提本无树</h4>
<p class="weui-media-box__desc" >菩提本无树,明镜</p>

</div> 
</div>
<div class="weui-cell__ft">22:55</div>
</a>

<a class="weui-cell weui-cell_access" href="javascript:;">
<div class="weui-cell__hd">
<img width="48px;" class="weui-media-box__thumb" src="images/timg2.jpg" alt="" class="self-header">
</div>
<div class="weui-cell__bd">
<div style=" margin-left:10px;">

<h4 class="weui-media-box__title">听春雨</h4>
<p class="weui-media-box__desc" >大家聊聊天今天下雨了</p>

</div> 
</div>
<div class="weui-cell__ft">22:55</div>
</a>
</div>

6 头部css

.nav {
position: fixed;
right: 0;
left: 0;
z-index: 10;
height: 2.2rem;
padding-right: .5rem;
padding-left: .5rem;
background-color: #0993c7;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
color: #FFF;
background-color: #20a0ff;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
用CSS3实现瀑布流布局的示例代码
Nov 10 HTML / CSS
CSS3实现全景图特效示例代码
Mar 26 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
Sep 12 HTML / CSS
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
Jan 05 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
Jan 26 HTML / CSS
HTML5新增的Css选择器、伪类介绍
Aug 07 HTML / CSS
html5 更新图片颜色示例代码
Jul 29 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
Jan 09 HTML / CSS
canvas 实现 github404动态效果的示例代码
Nov 15 HTML / CSS
详解基于canvas的视频遮罩插件
Jan 04 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 HTML / CSS
HTML CSS 一个标签实现带动画的抖音LOGO
Apr 26 HTML / CSS
HTML5 progress和meter控件_动力节点Java学院整理
Jul 06 #HTML / CSS
html5 input元素新特性_动力节点Java学院整理
Jul 06 #HTML / CSS
html5标记文字_动力节点Java学院整理
Jul 11 #HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
Jul 06 #HTML / CSS
html5 sessionStorage会话存储_动力节点Java学院整理
Jul 06 #HTML / CSS
HTML5表格_动力节点Java学院整理
Jul 11 #HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 #HTML / CSS
You might like
浅谈php serialize()与unserialize()的用法
2013/06/05 PHP
php5.2以下版本无json_decode函数的解决方法
2014/05/25 PHP
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
PHP实现的微信APP支付功能示例【基于TP5框架】
2019/09/16 PHP
设定php简写功能的方法
2019/11/28 PHP
基于jquery 的一个progressbar widge
2010/10/29 Javascript
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
jQuery窗口、文档、网页各种高度的精确理解
2014/07/02 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
location.hash保存页面状态的技巧
2016/04/28 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
2017/02/08 Javascript
ionic实现下拉刷新载入数据功能
2017/05/11 Javascript
一种angular的方法级的缓存注解(装饰器)
2018/03/13 Javascript
关于JS解构的5种有趣用法
2019/09/05 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
Django 限制用户访问频率的中间件的实现
2018/08/23 Python
python单例模式实例解析
2018/08/28 Python
用python生成1000个txt文件的方法
2018/10/25 Python
Python WEB应用部署的实现方法
2019/01/02 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
python递归下载文件夹下所有文件
2019/08/31 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
解决c++调用python中文乱码问题
2020/07/29 Python
Python析构函数__del__定义原理解析
2020/11/20 Python
玉兰油美国官网:OLAY美国
2018/10/25 全球购物
美国领先的在线旅游网站:Orbitz
2018/11/05 全球购物
SQL数据库笔试题
2016/03/08 面试题
行政助理岗位职责
2013/11/10 职场文书
行政部总经理岗位职责
2014/01/04 职场文书
学生打架检讨书
2014/10/20 职场文书
2014年幼儿园教研工作总结
2014/12/04 职场文书
志愿者服务宣传标语口号
2015/12/26 职场文书
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技