简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  Plusieurs méthodes d'implémentation de barre d'onglets en HTML

Plusieurs méthodes d'implémentation de barre d'onglets en HTML

小云云
小云云original
2017-12-11 11:33:354020parcourir

Il existe de nombreuses utilisations des balises en HTML. Cet article recommande plusieurs méthodes d'implémentation pour la barre de balises. Il est très utile pour apprendre la connaissance des balises.

Page à onglets : Catégorie + Description

Barre d'onglets : Catégorie=> Permettre aux utilisateurs de comprendre où ils se trouvent et où ils vont

1. Méthode de nommage CSS :


Code XML/HTML Copier le contenu dans le presse-papier


  1. <p classe ="service-tabs service-tabs1">


  3. 　<ul class="service-tabs-inner">

  4. 　🎜><a href="#nogo">Suivez a>li>　<li><

    5. a

  5. href= "#nogo">Recommandéa>li>　<li ><

    6. a

  6. href="#nogo">Navigation a>li>　<li><

    7. a

  7. href= "#nogo">Shoppinga>li>　ul>

  8. p
  9. >


  11. Onglet : onglet


    • 1) float : effacer le débordement du flotteur : caché ;/pseudo-class :after/

      2) display : inline- le bloc IE7 n'est pas compatible : *display:inline;* zoom:1; Espacement des espaces : font-size:0;/same line/negative margin/letter-spacing
2.


3. Code du modèle :

1. Ajouter une couleur d'arrière-plan au survol

Code CSS

Copier le contenu dans le presse-papiers

.service-tabs li a{ largeur:

160px

;
hauteur

:

80px
;

affichage

:bloc;couleur :

#666

;
font-size

:
    32px
  1. ;} 

  2. .service-tabs1 li a:hover{color:#2CC185;} 

  3. .service -tabs1 li.on a{couleur-de-fond:#2CC185;couleur:#fff;} /*Fond Couleur*/



2. Petit triangle, Évident


Code CSSCopier le contenu dans le presse-papiers


  1. .service-tabs4 li{position:relative;}

  2. .service-tabs4 li a:hover{ couleur:#2CC185;} 🎜>#2CC185

    ;
    3. couleur
  3. :

    #fff;} 🎜>:11px ;hauteur:7px;position

    :
    4. absolu
  4. ;

    bas bas :-6px;gauche:76px;arrière-plan:url(images /arrow.png);affichage:aucun;} >:bloquer;} 3. Souligner

  5. Code CSSCopier le contenu dans le presse-papiers


.service-tabs2 li a:hover{color

:

#2CC185

;}


.service-tabs2 li.sur une{hauteur:78px;

bordure-bas

:
2px

    solide

  1. #2CC185;couleur:#2CC185

    ;}

  2. 4. Implémentation du script

    Code JavaScript
Copiez le contenu dans le presse-papiers


$(

fonction(){ $(". service-tabs ul li"

).click(

>function
() { $(

this

).addClass("on").siblings( ).removeClass("on"); } })


C'est simple et très pratique. Dépêchez-vous de mettre la main à la pâte.
  1. Recommandations associées :

    Utilisation de la balise html imgComment utiliser les nouvelles balises HTML5 Balises de marquage de format HTML couramment utilisées

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!

Déclaration：
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
Article précédent：Exemples pour introduire la connaissance du formatage du texte HTMLArticle suivant：Exemples pour introduire la connaissance du formatage du texte HTML

Articles Liés

Voir plus