CSS 导航菜单

最新推荐文章于 2024-08-24 09:00:00 发布

boonyaxnn

最新推荐文章于 2024-08-24 09:00:00 发布

阅读量379

点赞数 1

分类专栏： CSS3 文章标签： css 导航

本文链接：https://blog.csdn.net/boonyaxnn/article/details/61623766

版权

CSS3 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<style>
			ul {
				list-style-type: none;
				margin: 0;
				padding: 0;
				overflow: hidden;
			}
			li {
				float: left;
			}
			a:link, a:visited {
				display: block;
				width: 180px;
				height:30px;
				font-weight: bold;
				color: #FFFFFF;
				background-color: #575351;
				text-align: center;
				padding: 10px ;
				text-decoration: none;
				text-transform: uppercase;
				
			}
			a:hover, a:active {
				background-color: #cc0000;
				border-radius:3px;
			}

		</style>
	</head>

	<body>
		<ul>
			<li>
				<a href="#home">Home</a>
			</li>
			<li>
				<a href="#news">News</a>
			</li>
			<li>
				<a href="#contact">Contact</a>
			</li>
			<li>
				<a href="#about">About</a>
			</li>
		</ul>
	</body>
</html>

效果图：