Comment utiliser le code CSS pour créer une barre de navigation de site Web ? (exemple)-tutoriel CSS-php.cn

Comment utiliser le code CSS pour créer une barre de navigation de site Web ? (exemple)

藏色散人

Libérer： 2018-08-25 09:40:19

original

5537 Les gens l'ont consulté

Cet article vous présente principalement les connaissances pertinentes sur la façon d'utiliser CSS pour créer une barre de navigation. J'espère qu'il sera utile aux amis dans le besoin. Pour tout site Web, l'existence d'une barre de navigation est cruciale, donc si vous utilisez simplement du HTML pour créer un menu de navigation ennuyeux, l'effet sera certainement médiocre. À l’heure actuelle, l’importance des attributs CSS se reflète.

Ce qui suit est un exemple spécifique de code de navigation CSS :

Barre de navigation verticale

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>css垂直导航代码示例</title> 
<style>
ul
{
    list-style-type:none;
    margin:0;
    padding:0;
}
a
{
    display:block;
    width:60px;
    background-color:#dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

Copier après la connexion

L'effet ci-dessus est tel qu'indiqué ci-dessous :

Comment utiliser le code CSS pour créer une barre de navigation de site Web ? (exemple)

2. La barre de navigation horizontale

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>css水平导航栏代码示例</title> 
<style>
ul
{
    list-style-type:none;
    margin:0;
    padding:0;
}
li
{
display:inline;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

Copier après la connexion

L'effet est comme suit :

Comment utiliser le code CSS pour créer une barre de navigation de site Web ? (exemple)

Les connaissances importantes impliquées ici :

display : Son attribut précise le type de boîte que l'élément doit générer. Cet attribut permet de définir le type de zone d'affichage générée par l'élément lors de la création de la mise en page. Pour les types de documents tels que HTML, une utilisation imprudente de display peut être dangereuse, car elle peut violer la hiérarchie d'affichage déjà définie en HTML. Pour XML, puisque XML n'a pas ce type de hiérarchie intégré, tout affichage est absolument nécessaire.

display:inline; - Par défaut, l'élément

Ici, nous supprimons les nouvelles lignes avant et après chaque élément de la liste pour afficher une seule ligne.

Ce qui précède est une introduction pertinente à la question de l'utilisation de la navigation CSS dans les pages Web, qui a une certaine valeur de référence. J'espère que cela aide tout le monde.

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Comment utiliser le code CSS pour créer une barre de navigation de site Web ? (exemple)