Tutorial de interfaz WeChat de imitación H5 (1)

Primero abramos la imagen, imitemos la interfaz WeChat, la interfaz es la siguiente, y no es exactamente lo mismo.

JQuery Weui es una versión de implementación de jQuery de Weui. Los componentes JS en jQuery weui se proporcionan en forma de plug -in jQuery.

Weui es una biblioteca de UI H5 proporcionada por el equipo oficial de WeChat para WeChat. JQuery Weui usa el código oficial WEUI CSS y proporciona la implementación de API de la versión jQuery/Zepto. Debido a que el CSS oficial se usa directamente, no tiene que preocuparse por el conflicto con la versión oficial. De hecho, jQuery weui == weui + jQuery plug -in.

Font Awesome es un conjunto perfecto de fuentes de iconos, que se usa con Bootstrap.

 <Link href = static/lib/weui.css rel = stylesheet type = text/css/> <link href = static/css/jquis-weui.css rel = stylesheet type = text/css/> href = static/font-- Impresionante/css/font-awesome.css r = stylesheet type = text/css/>

 <Div class = weui-tabbar> <a href = wx-wx.html class = weui-tabbar__item> <span class = weui-badge style = poselute: top: -.4emt; <div class = weui-tabbar__icon> <i class = fateFomment-o fa-fw style => </div> <p class = weui-tabbar_label> wechat </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> Libro de direcciones </p> </p> </p> /a> <a href =#tab3 class = weui-tabbar__item> <div class = weui-tabbar_icon> <i class = fa-compass style => </i> </</ <biv> <p class = weui -tabbar__label> Discovery </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;> i </p> </a> </div>

 <Nav class = Blue Nav style => <a id = topPopoverShow href =# class = botón Button-Link Derecha> <I class = fa-plus fa-fw style = font-size: 20px;> i> </a> <h1 class = tictle> wechat </h1> </ar Nav>

 <Div class = Page-Conftent> <Div class = Weui-Cells style = margin-top: 0px;> <a class = weui-cell weui-cell_access abre-popup-modal data- target =#full href = javaScript :; <Div class = Weui-Cell__hd> <img width = 48px; Div style = margin-heft: 10px;> <h4 class = weui-media-box__title> escuchando el chunyu bodhi sin árbol </h4> <p class = weui-media-box_desc> espejo brillante </p> </diviv > </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; H4 class = Weui-Media-Box__title> Escucha Chunyu </h4> <p class = weui-media-box_desc> Todos chatan hoy. 22:55 </div> </a> </div>

 .nav {posity: fixed; right: 0; left: 0; z-index: 10; height: 2.2Rem; padding-right: .5rem; padding-left: .5rem; background-color: #0993C7 ; -webkit- VISITACIÓN DE BAJO: Hidden;

Lo anterior es todo el contenido de este artículo.