Comment réparer la barre de navigation en haut de la page (explication détaillée avec images et texte)-tutoriel CSS-php.cn

Comment réparer la barre de navigation en haut de la page (explication détaillée avec images et texte)

yulia

Libérer： 2018-10-27 10:43:14

original

45970 Les gens l'ont consulté

Avez-vous remarqué lors de la navigation sur le site Web que presque tous les sites Web ont une barre de navigation et que certaines navigations peuvent être corrigées en haut. Peu importe où la barre de défilement se déplace, elle sera fixée dans la même position. la barre de navigation est fixée en haut ? Comment l'écrire ? Cet article vous expliquera comment réparer la barre de navigation en haut et le code pour réparer la barre de navigation en haut. Il a une certaine valeur de référence et les amis intéressés peuvent y jeter un œil.

Pour corriger la barre de navigation en haut, vous devez utiliser de nombreuses propriétés en CSS, telles que les attributs float, position, list-style-type, etc. Si vous n'êtes pas sûr, vous pouvez vous référer au Site Web PHP chinois Articles connexes, ou visitez le Tutoriel vidéo CSS, j'espère que cela pourra vous aider.

Exemple détaillé : utilisez html et css pour corriger la barre de navigation en haut

Partie HTML :

Créez une balise ul pour créer une liste non ordonnée car des sauts de page sont nécessaires Pour le meilleur effet, vous devez également insérer une balise a dans la balise li et écrire le contenu de navigation dans la balise a. Enfin, créez un div et définissez la hauteur du div sur 1500px Lorsque vous faites glisser la barre de défilement, il est pratique d'observer la position de la barre de navigation. Le code spécifique est le suivant

<ul>
   <li><a class="active" href="#home">首页</a></li>
   <li><a href="#news">新闻动态</a></li>
   <li><a href="#contact">联系我们</a></li>
   <li><a href="#about">关于我们</a></li>
</ul>   
<div style="background-color:pink;height:1500px;"></div>

Copier après la connexion

Partie CSS : <. 🎜>

Le framework de base a été construit. Utilisez maintenant CSS pour embellir la page. Utilisez float: left pour faire flotter le côté gauche de la liste non ordonnée et disposez-la en ligne. Utilisez Padding pour ajuster l'espacement entre les navigations. . Utilisez le sélecteur de pseudo-classe de survol pour définir l'effet de survol de la souris lorsque la souris passe la navigation. Apparaît en rouge, lorsque la navigation est activée, apparaît en jaune. L'étape la plus importante consiste à fixer la barre de navigation en haut de la page. Nous utilisons l'attribut position:fixed, puis définissons sa distance par rapport au haut à 0 (c'est-à-dire top : 0), afin que la barre de navigation soit fixée à en haut. Détails Le code est le suivant :

*{margin:0;padding: 0;}
   ul{
       list-style-type: none;
       overflow: hidden;
       background-color: #333;
       position: fixed;
       top: 0;
       width: 100%;
   }  
   li {
       float: left;
   }   
   li a {
       display: block;
       color: white;
       text-align: center;
       padding: 14px 16px;
       text-decoration: none;
   }   
   li a:hover:not(.active) {
       background-color: red;
   }   
   .active {
       background-color: yellow;
   }

Copier après la connexion

Image d'effet :

Comment réparer la barre de navigation en haut de la page (explication détaillée avec images et texte)

Comme on peut le voir sur l'image, lorsque la barre de défilement glisse vers le bas, la position de la barre de navigation ne change pas. Elle a été fixée en haut pour obtenir l'effet de la barre de navigation fixée en haut. L'étape la plus critique consiste à utiliser la position et à définir sa valeur d'attribut sur fixe. Par exemple, la distance entre le haut et le haut est définie sur 0.

Ce qui précède vous présente plus en détail la méthode de mise en œuvre pour réparer la barre de navigation en haut. Les amis qui sont nouveaux dans le front-end doivent l'essayer eux-mêmes pour voir s'ils peuvent obtenir un effet plus cool. j'espère que cet article vous aidera!

Pour plus de didacticiels vidéo connexes, veuillez visiter le

Tutoriel vidéo CSS3

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!