Comment résoudre une imbrication de balises

Nous savons que dans la mise en page réelle de la page Web, il est parfois nécessaire de cliquer sur une partie du bouton au milieu de toute la zone de clic, puis la balise A est imbriquée dans la balise A

&lt ;! -- Lorsqu'une balise est imbriquée--> outerA innerA

Mais nous constaterons que pour ce type d'imbrication, le navigateur l'analysera directement de manière incorrecte, et le résultat de l'analyse est le suivant :

outerA innerA

Alors pour cette situation, comment la résoudre ?

Option 1 : Utiliser des balises d'objet pour l'imbrication

Par exemple, si nous écrivons comme suit, il n'y aura aucune erreur d'analyse !

outerA innerA Copier après la connexion L'application la plus typique de cette méthode d'écriture est qu'il faut cliquer sur toute la liste, et il y a des numéros de téléphone dans la liste sur lesquels il faut cliquer individuellement pour composer !

列表内容 拨打电话 Copier après la connexion Option 2 : Utiliser la méthode de positionnement

Cette méthode est un dernier recours. L'idée est que nous n'avons pas besoin d'imbriquer. Le code direct s'écrit comme suit :

outerA innerA Copier après la connexion Les salles extérieures sont placées dans la balise intérieure en définissant affichage :inline-block et positionnement absolu emplacement . Ajustez ensuite la taille du z-index de l'étiquette interne a et de l'externe a afin que la souris puisse sélectionner correctement l'étiquette a

L'idée principale de cette méthode est de simuler ; notre mise en œuvre par le positionnement L'effet que vous souhaitez obtenir !

Option 3 : utilisez la balise HTML pour implémenter

N'oubliez pas que lorsque vous créez la page Web de l'école, vous utilisez Dreamweaver, vous pouvez utiliser Dreamweaver Image zone chaude pour obtenir l'effet clic de l'image. C'est vrai, nous pouvons utiliser des zones chaudes pour obtenir l'effet d'imbrication d'un tag !

La balise Area n'a pas été utilisée depuis longtemps. Vulgarisons les connaissances de base :

La zone peut spécifier la forme et les coordonnées.

Si l'attribut shape est défini sur "rect", alors cette valeur spécifie les coordonnées des coins supérieur gauche et inférieur droit du rectangle. (x1,y1,x2,y2)

Si l'attribut de forme est défini sur "circ", cette valeur spécifie les coordonnées et le rayon du centre du cercle. (x,y,radius)

Si l'attribut de forme est défini sur "poly", cette valeur spécifie la valeur de chaque sommet du polygone. Si les première et dernière coordonnées ne correspondent pas, alors pour fermer le polygone, le navigateur doit ajouter la dernière paire de coordonnées. (x1,y1,x2,y2,..,xn,yn)

la zone et la carte doivent être utilisées ensemble. Vous pouvez spécifier certaines zones chaudes sur l'image ou spécifier les zones chaudes dans la liste.

Si nous utilisons Area et Map pour spécifier la zone chaude à l'intérieur de la balise a dans la liste, nous pouvons obtenir un effet similaire à l'imbrication de la balise a ci-dessus !

Toujours l'exemple ci-dessus, on peut écrire comme suit :

outerA Copier après la connexion Option 4 : Utiliser span et d'autres balises ainsi que des événements js pour remplacer la balise a

Bien sûr nous pouvons également utiliser span, tags, etc. pour remplacer la balise a, mais vous devez écrire plus de code de saut js pour obtenir l'effet que la balise a peut obtenir via js !

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment convertir l'encodage CSS

Comment utiliser CSS3 pour créer lumières Animation de texte d'affichage d'éclairage

Comment créer des effets spéciaux de chargement CSS3

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Comment résoudre une imbrication de balises