在编写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