Comment faire diverses listes sur le terminal mobile H5 (sept derniers chapitres)

Si vous avez vu cet article en premier, il est recommandé d'y aller en premier Jetez un oeil au contenu correspondant dans le lien ci-dessus, afin que le contexte soit cohérent et qu'il soit plus facile de comprendre le contenu de cet article

À travers plusieurs chapitres, de la liste la plus simple d'une ligne de texte à. diverses images Liste d'articles. En fait, la plupart des formes de listes peuvent être trouvées dans les méthodes correspondantes dans mes six chapitres d'articles de blog. Les méthodes ne sont que ces méthodes, il s'agit simplement de savoir comment les utiliser de manière flexible. 🎜>

Ainsi, dans le dernier chapitre, je ne donnerai plus de code, mais analyserai les modalités de mise en œuvre à travers plusieurs cas qui ne semblent pas être évoqués, et donnerai des idées. La mise en œuvre concrète est une question à laquelle chacun doit réfléchir. .

Analysons quelques cas

Quand j'écris des articles de blog, personnellement, je n'aime pas ajouter trop de code décoratif au code. Les exemples donnés sont également des exemples relativement simples. Je ne sais pas comment. C'est juste pour permettre aux lecteurs d'aller à l'essentiel lors de la lecture du code et de comprendre le sens principal que je veux exprimer. Plus de couleurs et d'ombres peuvent être utilisées à volonté

Graphique sur une seule ligne. et liste de textes

Le design H5 de Taobao mérite d'être appris. La capture d'écran ci-dessus provient de Juhuasuan de Taobao

Comme le montre l'image ci-dessus, il semble que. cette liste est plus compliquée. En fait, cette liste n'est pas compliquée du tout. Dans le

Chapitre 3, nous avons présenté comment implémenter une petite icône devant la liste Comment faire.

Dans ce cas, il s'agit en fait d'une grande icône. Changez l'icône en image et tout ira bien. La largeur de l'image est fixe, mais la largeur du texte suivant n'est pas fixe. Cette idée est exactement la même. comme la liste d'icônes.

Le texte suivant contient une variété d'éléments, et ces éléments peuvent être composés et présentés en utilisant diverses méthodes. J'ai jeté un œil au code de Taobao. L'ingénieur front-end a utilisé un superbe. méthode de mise en page du flux de documents pour implémenter cette mise en page. Personnellement, j'aime toujours utiliser la méthode de mise en page de positionnement pour la mettre en œuvre, il n'y a pas beaucoup de différence, la seule différence est dans leurs idées respectives. Disposition de l'image à quatre colonnes

Comme le montre l'image ci-dessus, il s'agit d'une disposition à quatre colonnes de graphiques et de texte mélangés. En fait, nous sommes en doubles colonnes. déjà des tutoriels similaires sur la disposition mixte des images et du texte. Il remplace simplement 50 % par 25 %.

À partir de là, nous pouvons voir cette disposition à trois colonnes, cette disposition à cinq colonnes et le nombre de colonnes que vous aimez, sont tous réalisés en fonction des proportions. En principe, ils sont similaires

Graphiques et disposition du texte déroutants

Ceci provient également de la page d'accueil de Taobao. disposition de quatre éléments de tailles différentes. N'est-ce pas très déroutant ? En fait, ce n'est pas le cas

Nous devons d'abord calculer les proportions en fonction de nos besoins de conception, puis utiliser la méthode donnée dans le cas ci-dessus. Chapitre 6 (Le secret de la liaison entre la largeur et la hauteur), juste la composition

Si vous utilisez la mise en page du flux de documents, c'est plus difficile. Vous pouvez également utiliser la mise en page de positionnement après avoir calculé la proportion, pouvez-vous en ajouter une autre. pièce ? En fait, c'est toujours la même chose.

Peu importe à quel point la mise en page semble compliquée, si vous vous calmez et l'analysez attentivement, vous pouvez trouver une solution au problème.

Si vous avez trouvé une solution à ce qui précède, alors c'est vraiment trop simple. Il s'agit simplement d'une combinaison de plusieurs méthodes

Résumé

.

Le secret pour lier largeur et hauteur, la valeur du rembourrage intérieur Cette fonctionnalité qui n'est pas évidente côté PC résout vraiment un gros problème côté mobile.

1. Côté mobile. Côté PC, la mise en page du flux de documents est naturelle.Même les débutants front-end qui travaillent dans l'industrie depuis quelques années ne connaissent pas ou ne sont pas familiers avec la mise en page du positionnement. Mais du côté mobile, la mise en page du positionnement est plus courante et plus importante. 🎜>

2. Être doué pour démanteler des problèmes complexes, regarder l'essence à travers le problème et résoudre le problème en le divisant en plusieurs parties.

3. Une canette être A, A peut aussi être B, A est également égal à A 1

4. pourcentage.

5. occupe une ligne à elle seule. n'écrivez pas le pourcentage, vous pouvez définir arbitrairement le remplissage intérieur et extérieur

6. Les bordures ne peuvent pas seulement être réalisées avec des bordures, il existe de nombreuses façons de les réaliser.

7. Linyuan Xianyu pourrait aussi bien battre en retraite et construire un filet

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!