How to set up html navigation bar-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to set up html navigation bar

coldplay.xixi

Jan 05, 2021 pm 04:12 PM

html Navigation Bar

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.

How to set up html navigation bar

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>

Copy after login

This is the actual effect. You can remove the underline and Color, etc.

How to set up html navigation bar

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

Copy after login

This This is the actual rendering.

How to set up html navigation bar

3. Set up hyperlinks

What I also want to say here is that the subset elements of <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>

Copy after login

The actual effect is as follows

How to set up html navigation bar

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn