Tutorial da interface WeChat de imitação H5 (1)

Vamos abrir a imagem, imitar a interface do WeChat, a interface é a seguinte e não é exatamente a mesma.

O JQuery Weui é uma versão de implementação do jQuery do Weui. Os componentes JS no jQuery weui são fornecidos na forma de plugue jQuery -in.

O Weui é uma biblioteca de interface do usuário H5 fornecida pela equipe oficial do WeChat para o WeChat. O JQuery Weui usa o código oficial do WeUi CSS e fornece a implementação da API da versão JQuery/Zepto. Como o CSS oficial é usado diretamente, você não precisa se preocupar com o conflito com a versão oficial. De fato, jQuery weui == weui + jQuery plug -in.

Fonte Awesome é um conjunto perfeito de fontes de ícone, que é usado com 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- Awesome/css/font-awome.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> livro de endereços </p> < /a> <a href =#tab3 class = weui-tabbar__item> <div class = weui-tabbar_icon> <i class = fa-compass style => </i> </</</div class = weui -tabbar__label> descoberta </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 = Cor:#0dba08;> </i> </div> <p class = weui-tabbar_label style = cor:#0dba08;> i </p> </a> </div>

 <Nav class = Blue Nav Style => <A ID = TopPopoverShow href =# class = botão de botão direita> <i class = fa-plus fa-fw style = font-size: 20px;> i> < /a> <h1 class = tictle> weChat </h1> </avil>

 <div class = Page-Conftent> <div class = weui-células style = margin-top: 0px;> <a class = weui-célula weui-celell_access Open-Popup-modal-alvo =#full href = javascript :; <div class = weui-cell__hd> <iMg width = 48px; div estilo = margem-heft: 10px;> <h4 class = weui-media-box__title> ouvindo o chunyu bodhi sem árvore </h4> <p class = weui-media-box_desc> espelho brilhante </p> </div = > </div> <div class = weui-céll__ft> 22:55 </div> </a> <a class = weui-celell weui-celell_access href = javascript :;> <div class = weui-cell__hd> <img Largura = 48px; H4 Class = Weui-Media-Box__title> Ouça Chunyu </h4> <P class = weui-media-box_desc> Todos conversam hoje. 22:55 </div> </a> </div>

 .Nav {Posity: Fixed; Backface-visibilidade: Hidden;

O acima é todo o conteúdo deste artigo.