Let's first open the picture, imitate the WeChat interface, the interface is as follows, and it is not exactly the same. It can only be said that it is similar. I hope everyone forgive me.
1 The knowledge point usedJquery Weui is a Jquery implementation version of Weui. In addition to the official plug -in, it also provides rich expansion components such as refreshing, calendar, and address selector. The JS components in jQuery Weui are provided in the form of jquery plug -in. It is very convenient to use and can be used with mainstream JS frameworks such as React, Angular, Vue.
Weui is a H5 UI library provided by WeChat's official team for WeChat. It only provides a set of CSS components. Jquery Weui uses the official Weui CSS code and provides the API implementation of the Jquery/Zepto version. Because the official CSS is used directly, you don't have to worry about the conflict with the official version. In fact, jQuery Weui == Weui + jquery plug -in.
FONT AWESOME is a perfect set of icon fonts, which is used with Bootstrap.
2 Introduction of style files<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-AWESOME.CSS R = styleSheet Type = Text/CSS/>3 Let's talk about the bottom menu first
<div class = weui-tabbar> <a href = wx-wx.html class = weui-tabbar__item> <span class = weui-badge style = poselute: top: -.4emt; Right : 1EM;> 8 </ span> <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> Addressbook </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> 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>4 head code
<nav class = Blue Nav style => <A ID = Toppopovershow Href =# Class = Button Button-Link Right> <i class = FA-Plus Fa-FW style = font-siZe: 20px;> i> < /a> <h1 class = tictle> WeChat </h1> </nav>5 main part
<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; class = weui-media-box_thumb src = Images/Timg5.jpg Alt = Class = Self-Head ER> </DIV> <DIV Class = Weui- Cell__bd> <div style = margin-heft: 10px;> <h4 class = weUI-MEDIA-BOX__TITLE> Listening to the 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; Class = Weui-Media-BOX__THUMB SRC = Images/TIMG2.JPG Alt = Class = Self-Header> </Div> <DIV Class = Weui-Cell__bd> <DIV Style = Margin-heft: 10px;> <h4 class = weUI-Media-BOX__TITLE> Listen to Chunyu </h4> <p class = weUI-MEDIA-BOX_DESC> Everyone chats today. </P> </Div> </ div> <div class = weui-cell__ft> 22:55 </div> </a> </div>6 head CSS
.nav {posity: 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;}The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.