Maison >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
- PHP中文网original
- 2016-05-16 12:07:091516parcourir
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) !