html中的导航条制作

最新推荐文章于 2024-07-12 21:28:45 发布

忆昔年.

最新推荐文章于 2024-07-12 21:28:45 发布

阅读量1.5w

点赞数 13

分类专栏：前端 CSS HTML

本文链接：https://blog.csdn.net/rt5476238/article/details/85300437

版权

前端同时被 3 个专栏收录

26 篇文章 1 订阅

订阅专栏

CSS

14 篇文章 0 订阅

订阅专栏

HTML

7 篇文章 0 订阅

订阅专栏

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

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