interface Web
tutoriel CSS
Tutoriel d'introduction à la mise en page Web CSS 10 : Navigation horizontale par onglets avec le didacticiel logo_Basic actuel
Tutoriel d'introduction à la mise en page Web CSS 10 : Navigation horizontale par onglets avec le didacticiel logo_Basic actuel
Le logo actuel signifie que l'utilisateur clique sur la chaîne ou la colonne, et l'étiquette de la colonne affiche une couleur différente des autres étiquettes pour rappeler à l'utilisateur l'emplacement.
Cette conception est un moyen très simple et classique d'améliorer la convivialité d'un site Web dans la conception de sites Web. Lorsqu'un site Web est utilisé par les utilisateurs, il doit prendre en compte le processus de réflexion de l'utilisateur lors de sa navigation. Une mauvaise conception Web ne prend en compte que la page elle-même, sans tenir compte de l'expérience de l'utilisateur. Une excellente conception doit être centrée sur l'utilisateur. L'identification des canaux est souvent quelque chose que de nombreux concepteurs ignorent. Les utilisateurs ont besoin de savoir où ils se trouvent et où ils peuvent aller. En identifiant l'emplacement actuel, cela aide les utilisateurs à comprendre leur position sur le site Web et les guide pour visiter d'autres canaux.
Continuez à écrire à partir du code de l'article précédent. Pour qu'une chaîne devienne une chaîne actuelle, cette chaîne doit avoir une couleur d'arrière-plan ou un texte différent des autres chaînes, mais actuellement nous ciblons toutes les balises. paramètre unifié, donc la première tâche est de concevoir une exception, c'est-à-dire le canal actuel, un canal si spécial, nous apportons quelques modifications aux balises dans le HTML :
<ul id="nav">
<li id="current"><a href="/index.asp">主页</a></li>
<li><a href="/Sort/List_4.html">DIV+CSS教程</a></li>
<li><a href="/Sort/List_5.html">常用代码</a></li>
<li><a href="/Sort/List_6.html">水晶图标</a></li>
<li><a href="/Sort/List_7.html">幻灯图片</a></li>
<li><a href="/Sort/List_10.html">软件下载</a></li>
<li><a href="/css2/">CSS2.0实用手册</a></li>
</ul>Nous ajoutons le premier un tag Un nouvel identifiant est ajouté, nommé current. Continuez à lire la partie CSS. Créez d'abord un design de couleur pour l'id current :
#nav li a#current { background-color:#2788da; color:#fff;}Aperçu de l'effet. Coloré
<style>
#nav li { float:left;}
#nav li a { color:#000000; text-decoration:none; padding-top:4px;
display:block; width:120px; height:22px; text-align:center;
background-color:#ececec; margin-left:2px;}
#nav li a:hover { background-color:#bbbbbb; color:#ffffff;}
#nav li a#current { background-color:#2788da; color:#fff;}
</style>
<ul id="nav">
<li>主页</li>
<li>DIV+CSS教程</li>
<li>常用代码</li>
<li>水晶图标</li>
<li>幻灯图片</li>
<li>软件下载</li>
<li>CSS2.0实用手册</li>
</ul>Continuez à améliorer notre navigation et ajoutez une ligne horizontale sous le menu de la page
#nav { height:26px; border-bottom:2px solid #2788da;}Nous avons défini la hauteur de la balise ul et l'avons ajoutée à la ligne continue inférieure de 2 pixels , prévisualisez à nouveau l'effet, il est similaire à la navigation par onglets que nous avions initialement imaginée. Revenant à la définition de l'élément nav, border-bottom est un attribut nouvellement ajouté que nous avons ajouté, qui fait référence au réglage de la bordure inférieure de l'élément. . Ses paramètres font référence à une largeur de 2px, un seul style de ligne continue et une valeur de couleur de #2788da. Avec de tels paramètres, notre balise ul aura une bordure inférieure colorée de 2px.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
#nav { height:26px; border-bottom:2px solid #2788da; list-style:none;}
#nav li { float:left;}
#nav li a { color:#000000; text-decoration:none; padding-top:4px;
display:block; width:120px; height:22px; text-align:center; background-color:#ececec; margin-left:2px;}
#nav li a:hover { background-color:#bbbbbb; color:#ffffff;}
#nav li a#current { background-color:#2788da; color:#fff;}
</style>
</head>
<body>
<ul id="nav">
<li>主页</li>
<li>DIV+CSS教程</li>
<li>常用代码</li>
<li>水晶图标</li>
<li>幻灯图片</li>
<li>软件下载</li>
<li>CSS2.0实用手册</li>
</ul>
</body>
</html>Une navigation simple par onglets est complétée par un ensemble de conception CSS Chaque fois que vous modifiez une page de chaîne, il vous suffit de modifier l'identifiant = "actuel" Déplacer vers. l'élément où se trouve le canal actuel pour terminer le changement de couleur. Il n'est pas nécessaire d'écrire des attributs de couleur, et si vous devez les modifier, vous pouvez facilement les modifier en CSS.
Concernant l'application de l'héritage des propriétés CSS entre éléments en XHTML dans cet exemple.
Qu'est-ce que l'héritage ? L'héritage signifie que chaque élément peut avoir plusieurs styles. Dans des circonstances normales, il respecte la conception de style la plus externe, s'il rencontre sa propre conception de style, il héritera du style extérieur et se donnera la priorité.
Si le style du calque interne est en conflit avec le style du calque externe, l'effet de style du calque interne sera affiché.
Cet exemple entre également en contact avec un nouvel attribut : list-style:none dans le code de style pour l'aperçu.
Par défaut, le formulaire de liste li dans ul a un point devant, comme vous pouvez le voir dans les chapitres précédents. Cette phrase signifie supprimer le point par défaut devant.
Ce qui précède est le contenu du didacticiel d'introduction à la mise en page Web CSS 10 : Navigation horizontale étiquetée avec le didacticiel logo_Basic actuel Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Comment afficher correctement le 'Jingnan Mai Round Body' installé localement sur la page Web?
Apr 05, 2025 pm 10:33 PM
En utilisant récemment des fichiers de police installés localement dans les pages Web, j'ai téléchargé une police gratuite à partir d'Internet et je l'ai installée avec succès dans mon système. Maintenant...
Comment sélectionner un élément enfant avec l'élément de nom de première classe via CSS?
Apr 05, 2025 pm 11:24 PM
Lorsque le nombre d'éléments n'est pas fixé, comment sélectionner le premier élément enfant du nom de classe spécifié via CSS. Lors du traitement de la structure HTML, vous rencontrez souvent différents éléments ...
Quelles sont les polices codées utilisées dans l'image? Comment appliquer ce style de police dans un projet?
Apr 05, 2025 pm 05:06 PM
Introduction et utilisation des polices codées dans la programmation et la conception Web, le choix de la bonne police peut considérablement améliorer la lisibilité et l'esthétique du code. récent,...
Comment ajuster le style de survol et la logique des lignes fusionnées dans El-Table dans l'élément UI?
Apr 05, 2025 pm 07:45 PM
Comment ajuster le style de survol et la logique des lignes fusionnées dans El-Table? Utilisation d'élément ...
Comment rendre plusieurs lignes de texte alignées et souligner avec CSS?
Apr 05, 2025 pm 08:00 PM
Comment rendre plusieurs lignes de texte alignées et souligner avec CSS? Dans la conception Web quotidienne, nous devons souvent styliser plusieurs lignes de texte dans des styles spéciaux ...
Comment utiliser le groupe React-Transition pour réaliser l'effet de la commutation glissante étroitement des composants REACT de droite à gauche?
Apr 05, 2025 pm 08:03 PM
Concernant le problème de l'utilisation du groupe React-Transition pour atteindre l'effet de transition de commutation des composants dans React. Lorsque vous utilisez des projets de développement React, nous devons souvent mettre en œuvre certains flux ...
La production de pages H5 nécessite-t-elle une maintenance continue?
Apr 05, 2025 pm 11:27 PM
La page H5 doit être maintenue en continu, en raison de facteurs tels que les vulnérabilités du code, la compatibilité des navigateurs, l'optimisation des performances, les mises à jour de sécurité et les améliorations de l'expérience utilisateur. Des méthodes de maintenance efficaces comprennent l'établissement d'un système de test complet, à l'aide d'outils de contrôle de version, de surveiller régulièrement les performances de la page, de collecter les commentaires des utilisateurs et de formuler des plans de maintenance.
Problème de mise en page de la page Web: comment réaliser efficacement la disposition soignée des lignes et des lignes similaires aux tables?
Apr 05, 2025 pm 06:03 PM
Compétences de mise en page de la page Web: deux façons d'implémenter la structure du format de table. De nombreux développeurs rencontreront diverses difficultés lors de la présentation des pages Web, dont une est courante ...
