먼저 그림을 열고 WeChat 인터페이스를 모방하겠습니다. 인터페이스는 다음과 같습니다.
1 사용 된 지식 포인트JQUERY WEUI는 WEUI의 jQuery 구현 버전으로, 새로 고침, 캘린더 및 주소 선택기와 같은 풍부한 확장 구성 요소를 제공합니다. jQuery Weui의 JS 구성 요소는 JQuery 플러그 인 형태로 제공되며 사용하기가 매우 편리하며 React, Angular, VUE와 같은 주류 JS 프레임 워크와 함께 사용할 수 있습니다.
Weui는 WeChat의 공식 팀이 WeChat 세트 만 제공합니다. JQuery Weui는 공식 WEUI CSS 코드를 사용하고 jQuery/Zepto 버전의 API 구현을 제공합니다. 공식 CSS는 직접 사용되므로 공식 버전과의 충돌에 대해 걱정할 필요가 없습니다. 실제로, jQuery weui == Weui + jQuery 플러그인.
Font Awesome은 완벽한 아이콘 글꼴 세트로 부트 스트랩과 함께 사용됩니다.
2 스타일 파일 소개<link href = static/lib/weui.css rel = 스타일 시트 유형 = text/css/> <link href = static/css/jquis-weui.css rel = 스타일 시트 유형 = 텍스트/css/> href = static/font- 굉장한/css/font-awesome.css r = 스타일 시트 유형 = text/css/>3 하단 메뉴에 대해 먼저 이야기 해 봅시다
<div class = weui-tabbar> <a href = wx-wx.html class = weui-tabbar__item> <span class = weui-badge style = poselute : wrum : 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> 주소록 </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> 발견 </p> </a> <a href = wx- user.html class = weui-tabbar_item weui-bar__item-on> <div class = weui-tabbar_icon> <i class = fa-fauser style = 색상 :#0dba08;> </i> </div> <p class = weui-tabbar_label style = color :#0dba08 ;> i </p> </a> </div>4 헤드 코드
<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>5 주요 부분
<div class = page-conftent> <div class = weui-cells style = margin-top : 0px;> <a class = weui-cell weui-cell_access open-popup-modal datap-target =#full href = javaScript :; <div class = weui-cell__hd> <img 너비 = 48px; div style = margin-heft : 10px;> <h4 class = weui-media-box___title> Chunyu bodhi no tree </h4> <p class = weui-media-box_desc> 밝은 미러 </p> </div. > </div> <div class = weui-cell__ft> 22:55 </div> </a> <a class = wui-cell weui-cell_access href = javaScript :;> <div class = weui-cell__hd> <img 너비 = 48px; 클래스 = weui-media-box___thumb src = images/timg2.jpg alt = class = self-header> </div> <div class = wui-cell__bd> <div style = margin-heft : 10px;>>>>>>>> < h4 class = weui-media-box__title> chunyu의 듣기 </h4> <p class = weui-media-box_desc> 모두가 오늘 채팅합니다 22:55 </div> </a> </div>6 헤드 CSS
. 백 페이스-가시성 : 숨겨진;
위는이 기사의 모든 내용입니다.