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

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

ptsph

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

阅读量580

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/li_yuan_long/article/details/80042368

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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