Maison > Article > interface Web > Tutoriel d'introduction à la mise en page Web CSS 11 : version embellie de l'image de navigation horizontale étiquetée avec le didacticiel Logo_Basic actuel
Tutoriel d'introduction à la mise en page Web CSS 11 : version embellie de l'image de navigation horizontale étiquetée avec le didacticiel Logo_Basic actuel
- PHP中文网original
- 2016-05-16 12:07:081522parcourir
Bien que la navigation par onglets soit terminée, la navigation en forme de carré ne semble pas pouvoir se conformer à la tendance actuelle en matière de conception. En fait, la navigation peut non seulement être définie à l'aide de couleurs CSS, mais également d'images ou d'autres éléments soigneusement conçus. peut être utilisé pour créer la navigation. Ici, nous allons commencer à améliorer la conception de la navigation et à en faire un meilleur effet d'étiquette.
Nous envisagerons de supprimer l’unique élément d’arrière-plan carré et d’utiliser des étiquettes colorées aux coins arrondis pour compléter notre conception. Cependant, à partir de cette amélioration, nous pouvons réaliser un autre avantage de la conception CSS, c'est-à-dire que vous n'avez pas besoin de modifier le code de structure, il vous suffit de modifier le style pour compléter l'amélioration, vous pouvez donc ici regarder directement la conception du code CSS :
<style>
body { background-color:#000000;}
#nav { height:30px; list-style:none;}
#nav li { float:left;}
#nav li a { color:#fff; text-decoration:none; padding-top:4px; display:block; width:118px; line-height:22px; height:24px; text-align:center; background:url(http://www.aa25.cn/upfile/menu_bg.gif); margin-left:5px; font-size:14px; font-weight:bold;}
#nav li a:hover { background:url(http://www.aa25.cn/upfile/menu_bg.gif ) left 84px; ; color:#ffffff;}
#nav li a#current { background:url(http://www.aa25.cn/upfile/menu_bg.gif) left 42px; color:#fff;}
</style> Comme le montre le code ci-dessus, nous avons supprimé le paramètre de couleur d'arrière-plan et ajouté un fond noir à la balise body de la page. Nous avons placé une image gif refaite sur la page. un objet, y compris normal, survol de la souris, Trois états interactifs de la page actuelle. Mais vous constaterez que les images de ces trois états sont réunies en une seule image. Pourquoi? Celui-ci utilise une méthode de conception dans le logiciel. D'une part, il utilise la gestion des images. D'autre part, il suffit de télécharger une seule image lors du téléchargement de la page Web. Lorsque vous définissez cette image comme image d'arrière-plan, il vous suffit d'utiliser CSS pour contrôler la position de l'image. Il semble que la fonction CSS soit vraiment puissante.
Rien qu'en modifiant le code css, l'apparence de la navigation est modifiée. Imaginez que dans l'application d'un grand site web, si on n'est pas satisfait d'un certain module commun, on n'a pas besoin de modifier toutes les pages, nous ne pouvons que changer le style. Cela a été réalisé. CSS rend vraiment votre conception facile !
<!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>
body { background-color:#000000;}
#nav { height:30px; list-style:none;}
#nav li { float:left;}
#nav li a { color:#fff; text-decoration:none; padding-top:4px; display:block; width:118px; line-height:22px; height:24px; text-align:center; background:url(http://www.aa25.cn/upfile/menu_bg.gif); margin-left:5px; font-size:14px; font-weight:bold;}
#nav li a:hover { background:url(http://www.aa25.cn/upfile/menu_bg.gif) left 84px; ; color:#ffffff;}
#nav li a#current { background:url(http://www.aa25.cn/upfile/menu_bg.gif) left 42px; color:#fff;}
</style>
</head>
<body>
<ul id="nav">
<li><a href="/index.asp">主页</a></li>
<li><a id="current" 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>
</body>
</html>