html中的导航条制作

59 阅读 0 评论 39 点赞

我是靠谱客的博主单薄乌龟，最近开发中收集的这篇文章主要介绍html中的导航条制作，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在这里插入图片描述
在网页中一个这样的导航条该怎么做呢？

用HTML中的无序列表(ul)做。。

然后在给列表设置需要的样式即可：

具体参考代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>导航条</title>
	<style type="text/css">
		*{
			padding: 0px;
			margin: 0px;
		}
		.nav{
			list-style: none;
			background-color: #6495ed;/*给整个列表设置蓝色背景*/
			width: 1200px;
			/*height: 45px;*/
			margin: 20px auto;
			overflow: hidden;
			zoom: 1;
		}
		.nav li{
			float: left;
			width: 25%;
		}
		.nav a{
			width: 100%;
			display: inline-block;
			text-align: center;
			padding: 5px 0px;
			text-decoration: none;
			color: white;
			font-weight: bold;
		}
		.nav a:hover{
			background-color: red;
		}
	</style>
</head>
<body>
	<ul class="nav">
		<li><a href="#">首页</a></li>
		<li><a href="#">新闻</a></li>
		<li><a href="#">联系</a></li>
		<li><a href="#">关于</a></li>
	</ul>
</body>
</html>