Maison >interface Web >tutoriel HTML >Comment configurer la barre de navigation HTML
Comment configurer la barre de navigation HTML
- coldplay.xixioriginal
- 2021-01-05 16:12:3048917parcourir
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.
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>
C'est l'effet réel. Les soulignements, les couleurs, etc. peuvent être supprimés en fonction du réel. besoins
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>C'est le. rendu réel.
3. Configurer des hyperliens
Ce que je veux aussi dire ici, c'est que l'élément de sous-ensemble de <ul></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>
L'effet réel est le suivant
Pour plus de connaissances liées à la programmation, veuillez visiter : Enseignement de la programmation ! !
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!