HTML的导航栏的写法

在编写HTML页面时，会用到导航栏，那么导航栏怎么来编写呢？我们在这里说一下导航栏的编写方法。导航栏有多种不同的格式我们可以根据需要来进行选择。

我们在这里可以编写简单的导航栏。

<!DOCTYPE html>
<html>
<body>
<div>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
</body>
</html>

实现的功能如图片展示

上图是实现了垂直的导航栏，我们通过ul和li标签可以来实现，在a标签中我们可以添加超链接，设置我们的超连接功能。如果需要，我们还可以设置水平的导航栏。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏</title>
    <style>
        .nav ul li {
            float: left;
            background-color: #e7ffb0;
        }
    </style>
</head>
<body>
<div class="nav">
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</div>
</body>
</html>

我们可以在<style>里面设置他的水平导航栏，用float，意思是浮动，可以加参数：left 左；right 右；none 默认值。元素不浮动，并会显示在其在文本中出现的位置；inherit 规定应该从父元素继承 float 属性的值。在<style>标签中我们还可以设置背景颜色。

效果图如下

再根据我们的需要来设计其他的一些样式。这里我们拿水平栏，元素居中添加背景色为例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏</title>
    <style type="text/css">
        .nav {
            width: 960px;
            height: 60px;
            border: 1px solid red;
            margin: 100px auto;
        }
        .nav ul li {
            float: left;
            background-color: #e7ffb0;
        }
        .nav ul li a {
            display: block;
            width: 240px;
            text-align: center;
            line-height: 60px;
            text-decoration: none;
            color: #5a3467;
        }
       
    </style>
</head>
<body>
<div class="nav">
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</div>
</body>
</html>

这样我们就做好了简单的可以使用的导航栏了。效果图如下

这样我们还可以设置高级点的，给它设置一个鼠标悬停方法

 .nav ul li a:hover {
            cursor: pointer;
            background-color: #645e55;
            color: #cdff83;
        }

这样鼠标悬停就可以有别的颜色的效果展示。

我们解释一下一些属性：text-align 这个是文本对齐的方式，就是我们导航栏里面的文本的对齐方式；text-decoration是对文本的修饰方式 none为定义标准的文本，underline为下划线等；cursor: pointer为光标呈现为指示链接的指针（pointer为一只手）。如果还有什么不懂得可以看这篇文章 http://www.w3school.com.cn/html5/index.asp

HTML的导航栏的写法

猜你喜欢