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模块的目前的状况分析
Feb 24 HTML / CSS
基于css3仿造window7的开始菜单
Jun 17 HTML / CSS
纯css3显示隐藏一个div特效的具体实现
Feb 10 HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
May 06 HTML / CSS
详解Canvas事件绑定
Jun 27 HTML / CSS
浅析HTML5中header标签的用法
Jun 24 HTML / CSS
HTML5声音录制/播放功能的实现代码
May 03 HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
Sep 09 HTML / CSS
AmazeUI 导航条的实现示例
Aug 14 HTML / CSS
CSS控制继承中的height能变为可继承吗
Jun 10 HTML / CSS
CSS实现背景图片全屏铺满自适应的3种方式
Jul 07 HTML / CSS
使用CSS实现六边形的图片效果
Aug 05 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函数eval()介绍和使用示例
2014/08/20 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
php创建、获取cookie及基础要点分析
2015/01/26 PHP
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
2014/09/10 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
2018/12/22 jQuery
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
微信小程序全选多选效果实现代码解析
2020/01/21 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
[59:32]Liquid vs Fnatic 2019国际邀请赛淘汰赛败者组BO1 8.20.mp4
2020/07/19 DOTA
python实现跨文件全局变量的方法
2014/07/07 Python
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
python密码错误三次锁定(实例讲解)
2017/11/14 Python
用Python写一段用户登录的程序代码
2018/04/22 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
python numpy格式化打印的实例
2018/05/14 Python
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
Numpy将二维数组添加到空数组的实现
2019/12/05 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
Python模块 _winreg操作注册表
2020/02/05 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
工厂搬迁方案
2014/05/11 职场文书
小学领导班子对照材料
2014/08/23 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
工厂仓库管理员岗位职责
2015/04/09 职场文书
世界名著读书笔记
2015/06/25 职场文书
简短清晨问候语
2015/11/10 职场文书
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python