导航栏的制作

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

原创最新推荐文章于 2024-09-26 19:17:56 发布 · 352 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#导航栏

本文介绍了一个使用CSS设计的导航栏，展示了如何通过简单的HTML和CSS代码实现导航栏的基本功能和鼠标悬浮效果。导航栏的背景颜色、字体颜色及大小均可自定义。

导航栏的制作

在这里插入图片描述

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

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

在这里插入图片描述