一个导航菜单_html/css_WEB-ITnose-tutoriel HTML-php.cn

Maison

interface Web

tutoriel HTML

一个导航菜单_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:51 AM

<!doctype html><html lang="en">	<head>		<meta charset="UTF-8">		<title>CSS制作立体导航</title>		<link rel="stylesheet" href="http://www.w3cplus.com/demo/css3/base.css">		<style>			body{			  background: #ebebeb;			}			.nav{			  width:560px;			  height: 50px;			  font:bold 0/50px Arial;			  text-align:center;			  margin:40px auto 0;			  background: #f65f57;			 /*制作导航圆角*/			  border-radius: 8px;			 /*制作导航立体效果*/			  box-shadow: 0 7px 0 #ba4a45;			}			.nav a{			  display: inline-block;				-webkit-transition: all 0.2s ease-in;				-moz-transition: all 0.2s ease-in;			   -o-transition: all 0.2s ease-in;			   -ms-transition: all 0.2s ease-in;			   transition: all 0.2s ease-in;			}			.nav a:hover{			  -webkit-transform:rotate(10deg);			  -moz-transform:rotate(10deg);			  -o-transform:rotate(10deg);			  -ms-transform:rotate(10deg);			  transform:rotate(10deg);			}			.nav li{			  position:relative;			  display:inline-block;			  padding:0 16px;			  font-size: 13px;			  text-shadow:1px 2px 4px rgba(0,0,0,.5);			  list-style: none outside none;			}			/*制作导航分隔线效果*/			.nav li::before,			.nav li::after{			  content:"";			  position:absolute;			  top:14px;			  height: 25px;			  width: 1px;			}			.nav li::after{			  right: 0;			  background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));			  background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));			  background: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));			  background: -ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));			  background: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));			}			.nav li::before{			  left: 0;			  background: -moz-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);			  background: -webkit-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);			  background: -o-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);			  background: -ms-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);			  background: linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);			}			/*删除导航第一个导航项左边的分隔线*/			.nav li:first-child::before{			  background: none;			}			/*删除导航最后一个导航右边的分隔线*/			.nav li:last-child::after{			  background: none;			}			.nav a,			.nav a:hover{			  color:#fff;			  text-decoration: none;			}		</style>	</head>	<body>		<ul class="nav">		<li><a href="">Home</a></li>		<li><a href="">About Me</a></li>		<li><a href="">Portfolio</a></li>		<li><a href="">Blog</a></li>		<li><a href="">Resources</a></li>		<li><a href="">Contact Me</a></li>		</ul>	</body></html>

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 connexe

Quel est le but des balises HTML?Apr 28, 2025 am 12:02 AM

Htmltagsaressentialforstructuringwebpages, amélioration accessibilité, référence

Que sont les balises d'auto-fermeture? Donner un exemple.Apr 27, 2025 am 12:04 AM

Self-Flaytagsinhtmlandxmlaretagsthatrechy-sey-sey -thout neweding aparateclosingtag, simplifier laMarkupTructureAnhancingCodingEfficiency.1) TheyAssentialInxmlForeLementswithoutContent, assurantwell-formedDocuments.

Au-delà de HTML: technologies essentielles pour le développement WebApr 26, 2025 am 12:04 AM

Pour créer un site Web avec des fonctions puissantes et une bonne expérience utilisateur, HTML seul ne suffit pas. La technologie suivante est également requise: JavaScript donne la dynamique et l'interactivité de la page Web, et les modifications en temps réel sont réalisées par DOM opération. CSS est responsable du style et de la disposition de la page Web pour améliorer l'esthétique et l'expérience utilisateur. Des cadres et des bibliothèques modernes tels que React, Vue.js et Angular améliorent l'efficacité du développement et la structure de l'organisation du code.

Quels sont les attributs booléens en HTML? Donnez quelques exemples.Apr 25, 2025 am 12:01 AM

Les attributs booléens sont des attributs spéciaux en HTML qui sont activés sans valeur. 1. L'attribut booléen contrôle le comportement de l'élément par le fait qu'il existe ou non, comme les désactivés désactiver la boîte d'entrée. 2. Le principe de travail consiste à changer le comportement des éléments en fonction de l'existence d'attributs lorsque le navigateur analyse. 3. L'utilisation de base consiste à ajouter directement des attributs, et l'utilisation avancée peut être contrôlée dynamiquement via JavaScript. 4. Les erreurs courantes pensent à tort que les valeurs doivent être définies, et la bonne méthode d'écriture devrait être concise. 5. La meilleure pratique consiste à garder le code concis et à utiliser raisonnablement les propriétés booléennes pour optimiser les performances de la page Web et l'expérience utilisateur.

Comment pouvez-vous valider votre code HTML?Apr 24, 2025 am 12:04 AM

Le code HTML peut être plus propre avec des validateurs en ligne, des outils intégrés et des processus automatisés. 1) Utilisez W3CMarkUpValidations Service pour vérifier le code HTML en ligne. 2) Installez et configurez l'extension htmlhint dans VisualStudiocode pour une vérification en temps réel. 3) Utilisez HTMLTIDY pour vérifier et nettoyer automatiquement les fichiers HTML dans le processus de construction.

HTML vs CSS et JavaScript: Comparaison des technologies WebApr 23, 2025 am 12:05 AM

HTML, CSS et JavaScript sont les technologies de base pour la création de pages Web modernes: 1. HTML définit la structure de la page Web, 2. CSS est responsable de l'apparence de la page Web, 3. JavaScript fournit une dynamique de page Web et une interactivité, et ils travaillent ensemble pour créer un site Web avec une bonne expérience d'utilisation.

HTML comme un langage de balisage: sa fonction et son objectifApr 22, 2025 am 12:02 AM

La fonction de HTML est de définir la structure et le contenu d'une page Web, et son objectif est de fournir un moyen standardisé d'afficher des informations. 1) HTML organise différentes parties de la page Web via des balises et des attributs, tels que des titres et des paragraphes. 2) Il soutient la séparation du contenu et des performances et améliore l'efficacité de maintenance. 3) Le HTML est extensible, permettant aux balises personnalisées d'améliorer le référencement.

L'avenir de HTML, CSS et JavaScript: Tendances de développement WebApr 19, 2025 am 12:02 AM

Les tendances futures de HTML sont la sémantique et les composants Web, les tendances futures de CSS sont CSS-in-JS et CSShoudini, et les tendances futures de JavaScript sont WebAssembly et sans serveur. 1. La sémantique HTML améliore l'accessibilité et les effets de référencement, et les composants Web améliorent l'efficacité du développement, mais l'attention doit être accordée à la compatibilité du navigateur. 2. CSS-in-JS améliore la flexibilité de gestion du style mais peut augmenter la taille du fichier. CSShoudini permet le fonctionnement direct du rendu CSS. 3.WeBassembly optimise les performances de l'application du navigateur mais a une courbe d'apprentissage abrupte, et sans serveur simplifie le développement mais nécessite une optimisation des problèmes de démarrage à froid.

See all articles