H5 Имитация Учебник интерфейса WeChat (1)

Давайте сначала откроем картинку, имитируйте интерфейс WeChat, интерфейс выглядит следующим образом, и это не совсем то же самое.

JQUERY WEUI -это версия WEUI JQUERY. Компоненты JS в jquery weui представлены в виде jquery plug -in.

Weui - это библиотека UI H5, предоставленная официальной командой WeChat для WeChat. JQuery Weui использует официальный код Weui CSS и предоставляет реализацию API версии JQuery/Zepto. Поскольку официальный CSS используется напрямую, вам не нужно беспокоиться о конфликте с официальной версией. На самом деле, jquery weui == weui + jquery plug -in.

Font Awesome - это идеальный набор шрифтов иконок, который используется с начальной загрузкой.

 <link href = static/lib/weui.css rel = stylesheet type = text/css/> <link href = static/css/jquis-weui.css rel = stylesseepte = text/css/> href = static/font- Awesome/css/font-awesome.css r = stylesseept 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> 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-user style = Цвет:#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 = кнопка-изключение правого> <i class = fa-plus fa-fw style = font-size: 20px;> i> < /a> <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 с открытым поп-модальным данных-target =#full href = javascript:;; <div class = weui-cell__hd> <img width = 48px; Div Style = Margin-Heft: 10px;> <h4 class = weui-media-box__title> прослушивание Чуню Бодхи нет дерева </h4> <p class = weui-media-box_desc> Яркое зеркало </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 Ширина = 48px; h4 class = weui-media-box__title> слушать chunyu </h4> <p class = weui-media-box_desc> Все чаты сегодня. 22:55 </div> </a> </div>

 .NAV {ПРЕДОСТАВЛЯЕТСЯ; Задняя часть: скрыто;

Приведенное выше содержимое этой статьи.