Tutoriel d'interface d'imitation H5 (1)

Ouvrez d'abord l'image, imitons l'interface WeChat, l'interface est la suivante, et ce n'est pas exactement la même chose.

JQUERY WEUI est une version d'implémentation JQuery de WEUI. Les composants JS dans jQuery Weui sont fournis sous la forme de JQuery Plug -in.

Weui est une bibliothèque d'interface utilisateur H5 fournie par l'équipe officielle de WeChat pour WeChat. JQuery Weui utilise le code WEUI CSS officiel et fournit la mise en œuvre de l'API de la version jQuery / Zepto. Parce que le CSS officiel est utilisé directement, vous n'avez pas à vous soucier du conflit avec la version officielle. En fait, jQuery weui == weui + jQuery Plug -in.

Font Awesome est un ensemble parfait de polices d'icônes, qui est utilisée avec Bootstrap.

 <link href = static / lib / weUi.css rel = stylesheet type = text / csss /> <link href = static / css / jquis-weui.css rel = Stylesheet type = text / css /> href = static / font- Awesome / 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 = posélute: 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> adresse </p> < / a> <a href = # tab3 class = weui-tabbar__item> <div class = weui-tabbar_icon> <i class = fa-compas -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 = Couleur: # 0DBA08;> </i> </div> <p class = weui-tabbar_label style = couleur: # 0dba08;> i </p> </a> </div>

 <NAV CLASS = BLUE NAV STYLE => <A ID = TOPPOPOVERSHOW HREF = # CLASS = Button Button-Link Droite> <i class = fa-plus fa-fw style = Font-Size: 20px;> i> </ a> <h1 class = tictle> wechat </h1> </AV>

 <div class = Page-Content> <div class = weui-cell style = margin-top: 0px;> <a class = weui-cell weui-cell_access open-popup-mod data- target = # full href = javascript:; <div class = weui-cell__hd> <img width = 48px; div style = margin-heft: 10px;> <h4 class = weui-media-box__Title> écoutant le chunyu bodhi no arbre </h4> <p class = weui-media-box_desc> miroir lumineux </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; Classe H4 = weui-media-box__Title> Écoutez Chunyu </h4> <p class = weui-media-box_desc> tout le monde discute aujourd'hui. 22:55 </div> </a> </div>

 .NAV {Posity: Fixé; BackFace-Visibilité: Hidden;

Ce qui précède est tout le contenu de cet article.