Maison > interface Web > Tutoriel H5 > le corps du texte

Utilisez H5 pour imiter l'interface WeChat

不言
Libérer: 2018-06-12 17:09:22
original
2039 Les gens l'ont consulté

Cet article présente principalement en détail le premier didacticiel d'interface WeChat d'imitation H5, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Avant-propos

Tout d'abord, voici une image imitant l'interface WeChat. L'interface est la suivante. Ce n'est pas exactement la même. Je peux seulement dire qu'elle est un peu similaire.

1 Points de connaissances utilisés

jQuery WeUI est une version d'implémentation jQuery de WeUI en plus d'implémenter le plug-in officiel. , il fournit également de riches composants d'extension tels que l'actualisation déroulante, le calendrier, le sélecteur d'adresse, etc. Les composants JS de jQuery WeUI sont tous fournis sous la forme de plug-ins JQuery, très pratiques à utiliser et peuvent être utilisés avec les frameworks JS grand public tels que React, Angular et VUE.

WeUI est une bibliothèque d'interface utilisateur H5 fournie par l'équipe officielle de WeChat pour WeChat. Elle ne fournit qu'un ensemble de composants CSS. jQuery WeUI utilise le code CSS officiel WeUI et fournit la version jQuery/Zepto de l'implémentation de l'API. Comme le CSS officiel est utilisé directement, vous n’avez pas à vous soucier des conflits avec la version officielle. En fait jQuery WeUI == WeUI + plugin jQuery.

Font Awesome est un ensemble parfait de polices d'icônes, principalement conçues pour être utilisées avec Bootstrap.

2 Présenter les fichiers de style

<link href="static/lib/weui.css" rel="stylesheet" type="text/css" /> 
<link href="static/css/jquery-weui.css" rel="stylesheet" type="text/css" /> 
<link href="static/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css" />
Copier après la connexion

3 Parlons d'abord du menu du bas

<p class="weui-tabbar"> 
<a href="wx-wx.html" class="weui-tabbar__item "> <span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;">8</span> 
<p class="weui-tabbar__icon"> 
<i class="fa fa-comment-o fa-fw" style=" "></i> 
</p> <p class="weui-tabbar__label">微信</p> </a> 
<a href="wx-tongxulv.html" class="weui-tabbar__item"> 
<p class="weui-tabbar__icon"> 
<i class="fa fa-vcard-o" style=" "></i> 
</p> <p class="weui-tabbar__label">通讯录</p> </a> 
<a href="#tab3" class="weui-tabbar__item"> 
<p class="weui-tabbar__icon"> 
<i class="fa fa-compass " style=""></i> 
</p> <p class="weui-tabbar__label">发现</p> </a> 
<a href="wx-user.html" class="weui-tabbar__item weui-bar__item--on"> 
<p class="weui-tabbar__icon"> 
<i class="fa fa-user" style=" color:#0dba08;"></i> 
</p> <p class="weui-tabbar__label" style=" color:#0dba08;">我</p> </a> 
</p>
Copier après la connexion

4 Code d'en-tête

<nav class="blue nav" style=" "> 
<a id="topPopovershow" href="#" class="button button-link right "> <i class="fa fa-plus fa-fw" style=" font-size:20px;" ></i> </a> 
<h1 class="title">微信</h1> 
</nav>
Copier après la connexion

5 Partie principale

<p class="page-content"> 
<p class="weui-cells" style="margin-top: 0px;">
<a class="weui-cell weui-cell_access open-popup weui-popup-modal " data-target="#full" href="javascript:;">
<p class="weui-cell__hd">
<img width="48px;" class="weui-media-box__thumb" src="images/timg5.jpg" alt="" class="self-header">
</p>
<p class="weui-cell__bd">
<p style=" margin-left:10px;">

<h4 class="weui-media-box__title">小楼听春雨菩提本无树</h4>
<p class="weui-media-box__desc" >菩提本无树,明镜</p>

</p> 
</p>
<p class="weui-cell__ft">22:55</p>
</a>

<a class="weui-cell weui-cell_access" href="javascript:;">
<p class="weui-cell__hd">
<img width="48px;" class="weui-media-box__thumb" src="images/timg2.jpg" alt="" class="self-header">
</p>
<p class="weui-cell__bd">
<p style=" margin-left:10px;">

<h4 class="weui-media-box__title">听春雨</h4>
<p class="weui-media-box__desc" >大家聊聊天今天下雨了</p>

</p> 
</p>
<p class="weui-cell__ft">22:55</p>
</a>
</p>
Copier après la connexion

6 Tête css

.nav {
position: 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;
}
Copier après la connexion

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Utilisez l'imitation Android WeChat pour charger la barre de progression de la page H5

Stockage local HTML5 IndexedDB

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal