用list-style-type和display属性，利用ul和a完成下面页面，鼠标放在链接上面和点击时背景变色。

最新推荐文章于 2023-04-07 15:08:09 发布

原创最新推荐文章于 2023-04-07 15:08:09 发布 · 634 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个使用HTML和CSS创建的基本导航栏示例。通过简单的样式设置实现了导航链接的展示效果，包括背景颜色、文字颜色及鼠标悬停效果。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			ul {
				list-style-type: none;
			}
			li {
				background-color: #003366;
				width: 150px;
				border: 1px solid white;
			}
			a {
				color: white;
				text-decoration: none;
				display: block;
			}
			a:hover {
				background-color: #336699;
			}
		</style>
	</head>

	<body>
		<ul>
			<li>
				<a>首页</a>
			</li>
			<li>
				<a>相册</a>
			</li>
			<li>
				<a>博客</a>
			</li>
			<li>
				<a>我的朋友</a>
			</li>
			<li>
				<a>个人简介</a>
			</li>
		</ul>
	</body>

</html>