Home > Article > Web Front-end > How to set up html navigation bar
How to set up html navigation bar
- coldplay.xixiOriginal
- 2021-01-05 16:12:3048858browse
How to set up the html navigation bar: 1. Directly use the navigation bar label in html5 [<nav></nav>]; 2. You can unorder the list and remove the default style setting to float; 3. Set up hyperlinks.
The operating environment of this article: Windows 7 system, html5 version, Dell G3 computer.
Recommended: HTML tutorial
How to set up the html navigation bar:
1. First of all, you can use html5 directly The navigation bar label in <nav></nav>
The specific code is as follows
<!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>
This is the actual effect. You can remove the underline and Color, etc.
#2. Next, you can unorder the list and remove its default style setting to float. The specific code is as follows
<!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>This This is the actual rendering.
3. Set up hyperlinks
What I also want to say here is that the subset elements of <ul></ul> can only It is <li>, and it cannot be anything else. The semantics of HTML are very weak, and the use of tags is very important. In actual web development, the semantics and weight of different tags are different, so optimization Not the same either.
4. You can use bootstrap. You can take a look at the specific code and detailed comments.
<!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>
The actual effect is as follows
For more programming-related knowledge, please visit: Programming Teaching! !
The above is the detailed content of How to set up html navigation bar. For more information, please follow other related articles on the PHP Chinese website!