前端习题之简易新浪导航栏

最新推荐文章于 2023-10-13 10:43:55 发布

半皖丨清愁

最新推荐文章于 2023-10-13 10:43:55 发布

阅读量762

点赞数

分类专栏：前端习题文章标签： html css

本文链接：https://blog.youkuaiyun.com/weixin_47481936/article/details/109514128

版权

前端习题专栏收录该内容

3 篇文章

订阅专栏

这篇博客详细介绍了如何使用HTML和CSS技术构建一个简易的新浪风格的导航栏，涵盖了基本的HTML结构和CSS样式设计，适合前端初学者学习实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简易新浪导航栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.nav{
				height: 41px;
				border-top: 3px solid #ff8500;
				border-bottom: 1px solid #edeef0;
				background-color: #fcfcfc;
				line-height: 41px;
			}
			.nav a{
				display: inline-block;
				height: 41px;
				font-size: 12px;
				text-decoration: none;
				color: #4c4c4c;
				padding: 0 20px;
			}
			.nav a:hover{
				background-color: #eee;
				color: #ff8500;
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<a href="#">新浪导航</a>
			<a href="#">手机新浪网</a>
			<a href="#">移动客户端</a>
			<a href="#">微博</a>
			<a href="#">三个字</a>
		</div>
	</body>
</html>