Heim > Artikel > Web-Frontend > So richten Sie die HTML-Navigationsleiste ein
So richten Sie die HTML-Navigationsleiste ein
- coldplay.xixiOriginal
- 2021-01-05 16:12:3048787Durchsuche
So legen Sie die HTML-Navigationsleiste fest: 1. Verwenden Sie direkt die Navigationsleistenbezeichnung in HTML5 [<nav></nav>] 2. Sie können die Reihenfolge der Liste aufheben und die Standardstileinstellung auf „Float“ entfernen. Legen Sie den Super-Link fest.
Die Betriebsumgebung dieses Artikels: Windows 7-System, HTML5-Version, Dell G3-Computer.
Empfohlen: HTML-Tutorial
So richten Sie die HTML-Navigationsleiste ein:
1. Zunächst können Sie das Navigationsleisten-Tag direkt in HTML5 <nav></nav>> verwenden ;<nav></nav>
具体代码如下
<!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>
这是实际的效果，可以根据实际需要，去除下划线和颜色等等
2、接下来可以无序列表，去除它的默认样式设置浮动就可以了，具体的代码如下
<!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>这是实际的效果图。
3、设置超链接
在这里还想说的是，<ul></ul>的子集元素只能是<li>
<!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>Dies ist der tatsächliche Effekt. Unterstreichungen und Farben können je nach tatsächlichem Bedarf entfernt werden
2. Als Nächstes können Sie die Reihenfolge der Liste aufheben und ihre Standardstileinstellung auf „Float“ entfernen. Die Der spezifische Code lautet wie folgt
Dies ist das tatsächliche Rendering.
<ul></ul> nur <li> sein kann und nichts anderes sein kann Die Semantik von HTML ist sehr schwach und die Verwendung von Tags ist in der tatsächlichen Webentwicklung unterschiedlich, sodass auch die Optimierung unterschiedlich ist. 🎜🎜4. Sie können Bootstrap verwenden. Sie können sich den spezifischen Code und die detaillierten Kommentare ansehen. 🎜rrreee🎜Der tatsächliche Effekt ist wie folgt🎜🎜🎜🎜🎜Weitere Programmierkenntnisse finden Sie unter: 🎜Programmierunterricht🎜! ! 🎜Das obige ist der detaillierte Inhalt vonSo richten Sie die HTML-Navigationsleiste ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!