H5 Imitation Wechat Interface Tutorial (1)

Öffnen wir das Bild zuerst, nach, die WeChat -Schnittstelle, die Schnittstelle ist wie folgt, und es ist nicht genau das gleiche.

JQuery Weui ist eine JQuery -Implementierungsversion von Weui. Die JS -Komponenten in JQuery Weui sind in Form von JQuery -Stecker vorgesehen.

Weui ist eine H5 -UI -Bibliothek, die von WeChats offiziellem Team für WeChat bereitgestellt wird. JQuery Weui verwendet den offiziellen Weui CSS -Code und bietet die API -Implementierung der JQuery/Zepto -Version. Da das offizielle CSS direkt verwendet wird, müssen Sie sich keine Sorgen um den Konflikt mit der offiziellen Version machen. Tatsächlich, jQuery weUi == weUi + jQuery Plug -in.

Font Awesome ist ein perfektes Satz Icon -Schriftarten, das mit Bootstrap verwendet wird.

 <link href = static/lib/weUi.css rel = styleSheet type = text/css/> <link href = static/css/jquis-weui.css Fantastisch/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: obere: -.4emt; <div class = weUi-tabbar__icon> <i class = fateFoment-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> Adressbuch </p> < /a> <a href =#tab3 class = weui-tabbar__Item> <div class = weUi-tabbar_icon> <i class = fa-compass style => </i> </</</div> <p class = weUi -Tabbar__label> Entdeckung </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 = Farbe:#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 = button-button-link recht <h1 class = tictle> wechat </h1> </nav>

 <div class = page-conftent> <div class = weui-cells style = margin-top: 0px;> <a class = weui-cell weui-cell_access open-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> Hören Sie sich den Chunyu Bodhi no tree </h4> <p class = weUi-media-box_desc> Bright Mirror </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; h4 class = weUi-media-box__-title> Hören Sie sich Chunyu </h4> <p class = weUi-media-box_desc> Jeder chatten heute. 22:55 </div> </a> </div>

 .nav {posität: 0; Backface-Sicht: Versteckt;

Das oben genannte ist der Inhalt dieses Artikels.