Tutorial Antarmuka WeChat Imitasi H5 (1)

Mari kita buka gambarnya, meniru antarmuka WeChat, antarmuka adalah sebagai berikut, dan itu tidak persis sama.

JQuery Weui adalah versi implementasi jQuery dari WEUI. Komponen JS di jQuery WeUI disediakan dalam bentuk jQuery plug -in.

WeUI adalah perpustakaan H5 UI yang disediakan oleh tim resmi WeChat untuk WeChat. JQuery Weui menggunakan kode CSS WEUI resmi dan menyediakan implementasi API dari versi jQuery/Zepto. Karena CSS resmi digunakan secara langsung, Anda tidak perlu khawatir tentang konflik dengan versi resmi. Bahkan, jQuery weUi == WeUi + jQuery plug -in.

Font Awesome adalah set font ikon yang sempurna, yang digunakan dengan bootstrap.

 <tautan href = statis/lib/weui.css rel = stylesheet type = text/css/> <tautan href = statis/css/jquis-weui.css rel = stylesheet type = text/css/> hRef = statis/font- Awesome/CSS/Font-Awesome.css R = Stylesheet Type = Teks/CSS/>

 <Div class = weui-tabbar> <a href = wx-wx.html class = weui-tabbar__item> <span class = weui-badge style = poselute: atas: -.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> <v class = weui-tabbar__icon> <i class = fa-vcard-o style => </i> </div> <p class = weui -tabbar__label> wellbook </p> <p> /a> <a href =#tab3 class = weui-tabbar__item> <v 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> <v class = weui-tabbar_icon> <i class = fa fa-user style = Warna:#0dba08;> </i> </div> <p class = weui-tabbar_label style = warna:#0dba08;> i </p> </a> </div>

 <nav class = blue nav style => <a id = toppopovershow href =# class = tombol tombol kanan> <i class = fa-plus fa-fw style = font-size: 20px;> </a> <h1 class = tictle> wechat </h1> </av>

 <Div class = page-conftent> <v class = weui-cell style = margin-top: 0px;> <a class = weui-sel weui-sel_access data-popup-modal open-popup- target =#full href = javaScript :; <Div class = weui-cell__hd> <width img = 48px; div style = margin-heft: 10px;> <h4 class = weui-media-box__title> Mendengarkan chunyu bodhi no tree </h4> <p class = weui-media-box_desc> cermin cerah </p> </dv > </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 Lebar = 48px; class = weui-media-box__thumb src = gambar/timg2.jpg alt = class = self-header> </div> <div class = weui-cell__bd> <div style = margin-heft: 10px;> H4 class = WeUI-Media-box__title> Dengarkan Chunyu </h4> <p class = weui-media-box_desc> semua orang mengobrol hari ini. 22:55 </div> </a> </div>

 .NAV {Posity: 0; Backface-Visibilitas: Tersembunyi;

Di atas adalah semua isi artikel ini.