导航栏的制作

最新推荐文章于 2024-09-26 19:17:56 发布

木子你个李

最新推荐文章于 2024-09-26 19:17:56 发布

阅读量313

点赞数 1

文章标签：导航栏

本文链接：https://blog.csdn.net/qq_43592607/article/details/102732286

版权

导航栏的制作

在这里插入图片描述

红色的是鼠标悬浮样式，可以自己改颜色，也可以自己改字体颜色，大小，导航栏的背景也可以改颜色。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		ul
		{//从列表中去掉圆点和外边距
			list-style-type:none;
			margin:0;
			padding:0;
			overflow:hidden;
		}
		li
		{
			float:left;
		}
		a:link,a:visited
		{
			display:block;
			width:120px;
			font-weight:bold;
			color:#FFFFFF;
			background-color:#bebebe;//鼠标未悬浮时导航栏的背景色
			text-align:center;
			padding:4px;
			text-decoration:none;
			text-transform:uppercase;
		}
		// 鼠标悬浮时的样式
		a:hover,a:active
		{
			background-color:#cc0000;//鼠标悬浮时导航栏的背景色
		}

	</style>
	</head>

	<body>
		<ul>
		<li><a href="#柴犬">柴犬</a></li>
		<li><a href="#萨摩耶">萨摩耶</a></li>
		<li><a href="#拉布拉多">拉布拉多</a></li>
		<li><a href="#二哈">二哈</a></li>
		</ul>
	</body>
</html>

在这里插入图片描述