Comment configurer la barre de navigation HTML-tutoriel HTML-php.cn

Comment configurer la barre de navigation HTML

coldplay.xixi

Libérer： 2023-01-04 09:38:44

original

48918 Les gens l'ont consulté

Comment définir la barre de navigation HTML : 1. Utilisez directement l'étiquette de la barre de navigation dans HTML5 [<nav></nav>] ; 2. Vous pouvez désorganiser la liste et supprimer le paramètre de style par défaut pour float; 3. Configurer des hyperliens.

Comment configurer la barre de navigation HTML

L'environnement d'exploitation de cet article : système Windows 7, version html5, ordinateur Dell G3.

Recommandé : Tutoriel HTML

Comment configurer la barre de navigation html :

1. peut utiliser html5 directement Le code spécifique pour l'étiquette de la barre de navigation dans <nav></nav>

est le suivant

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航栏</title>
</head>
<body>
<nav>
<a href="#">首页</a>
<a href="#">新闻</a>
<a href="#">关于我们</a>
</nav>
</body>
</html>

Copier après la connexion

C'est l'effet réel. Les soulignements, les couleurs, etc. peuvent être supprimés en fonction du réel. besoins

Comment configurer la barre de navigation HTML

2. Ensuite, vous pouvez désordonner la liste et supprimer son paramètre de style par défaut pour flotter. Le code spécifique est le suivant

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
ul{
height: 100px;
width:100%;
list-style-type: none; //取消无序列表的固定样式
}
ul li{
float:left;
margin: 20px;  //设置三个元素的外间距
}
</style>
</head>
<body>
<ul>
<li><a href="">首页<a></li>
<li><a href="">新闻<a></li>
<li><a href="">关于我们<a></li>
</ul>
</body>
</html>

Copier après la connexion

C'est le. rendu réel.

Comment configurer la barre de navigation HTML

3. Configurer des hyperliens

Ce que je veux aussi dire ici, c'est que l'élément de sous-ensemble de <ul> ne peut être que <li>, pas autorisé C'est autre chose. La sémantique du HTML est très faible et l'utilisation des balises est très importante dans le développement Web réel, la sémantique et le poids des différentes balises sont différents, donc l'optimisation est également différente.

4. Vous pouvez utiliser bootstrap. Vous pouvez consulter le code spécifique et les commentaires détaillés.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>bootstrap的学习</title>
<!--导入基本样式-->
<link style="text/css" rel="stylesheet" href="css/bootstrap.css">  
<!--导入基本样式的压缩-->
<link style="text/css" rel="stylesheet" href="css/bootstrap.min.css">
<!--导入主题样式  注意：顺序 不可变-->
<link style="text/css" rel="stylesheet" href="css/bootstrap-theme.css">
</head>
<body>
<!--类nav清除列表的默认样式  nav-tabs定义tabs的标题栏-->
<ul class="nav nav-tabs">
<li><a href="#tab2" data-toggle=tab">首页</a></li>
<li><a href="#tab2" data-toggle=tab">关注</a></li>
<li><a href="#tab2" data-toggle=tab">个人中心</a></li>
</ul>
 
</body>
</html>

Copier après la connexion

L'effet réel est le suivant

Comment configurer la barre de navigation HTML