So richten Sie die HTML-Navigationsleiste ein-HTML-Tutorial-php.cn

So richten Sie die HTML-Navigationsleiste ein

coldplay.xixi

Freigeben： 2023-01-04 09:38:44

Original

48919 Leute haben es durchsucht

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.

So richten Sie die HTML-Navigationsleiste ein

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>&gt 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>

Nach dem Login kopieren

这是实际的效果，可以根据实际需要，去除下划线和颜色等等

So richten Sie die HTML-Navigationsleiste ein

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>

Nach dem Login kopieren

这是实际的效果图。

So richten Sie die HTML-Navigationsleiste ein

3、设置超链接

在这里还想说的是，<ul>的子集元素只能是<li>

Der spezifische Code lautet wie folgt

<!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>

Nach dem Login kopieren

Dies ist der tatsächliche Effekt. Unterstreichungen und Farben können je nach tatsächlichem Bedarf entfernt werden

So richten Sie die HTML-Navigationsleiste ein 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

rrreee

Dies ist das tatsächliche Rendering. So richten Sie die HTML-Navigationsleiste ein

🎜3 , Hyperlinks einrichten🎜🎜Was ich hier auch sagen möchte, ist, dass das Teilmengenelement von <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!